You might have spotted something new on my blog recently—a little blue button at the top of each post that says “Turn on Bionic Text.” This was a fun weekend coding project I took on, partly because running an agency means I don’t get my hands dirty with actual code nearly as much as I’d like to anymore. Sometimes you just need to build something for the pure joy of it!
So What’s This Bionic Reading Thing?
Bionic reading is this cool text formatting technique that bolds the first part of each word. Here’s what it looks like:
This is what bionic reading looks like.
The science behind it is pretty interesting. Our brains are actually quite lazy readers—they don’t really need to see every letter to recognize a word. By highlighting just the first half of each word, bionic reading creates these “fixation points” that help your eyes cruise through text more efficiently.
People claim it can help you:
- Read faster without losing comprehension
- Stay focused on dense content
- Reduce eye strain when you’re doom-scrolling
- Potentially help with some reading difficulties
Why I Added It
The idea actually came from a conversation with a neurodivergent friend who mentioned how helpful bionic text is for her ADHD. She explained that the bolded parts help her eyes focus and prevent them from jumping around the page, making it easier to maintain concentration on longer articles.
That conversation sparked my curiosity, and since I like tinkering with ways to make reading more enjoyable on my site, I decided to give it a shot.
I made it optional because reading preferences are super personal. Some of my friends think bionic text is the greatest thing since sliced bread, while others find it visually annoying. No judgment either way—that’s why there’s a toggle!
The Coding Adventure
While PHP is my home turf (and has been since the dinosaur days of the web), I don’t get to play with JavaScript nearly as much as I’d like. Running an agency means more time in meetings and less time writing code, so this was a refreshing change of pace.
Quick Aside: What is “Traversing” the DOM?
When developers talk about “traversing” the DOM (Document Object Model), we’re essentially describing the process of navigating through the structure of a webpage—like exploring a family tree.
Imagine a webpage as a nested set of boxes within boxes. A blog post might contain paragraphs, which contain sentences, which contain words, which contain letters. To “traverse” this structure means to systematically visit each of these elements, often looking for specific items.
In our case, I needed to find all the text nodes (the actual words and sentences) without disturbing links, images, and other formatting elements that might be mixed in with them. This is similar to going through a complex family tree and identifying only people with a specific characteristic while remembering how they relate to everyone else.
The challenge is that when you find what you’re looking for, any changes you make need to preserve the original structure—like carefully replacing a branch on a tree without disturbing the surrounding branches or the overall shape of the tree.
The Technical Stuff
In broad strokes, I had to figure out how to:
- Add a toggle button to my WordPress posts
- Find all the text without breaking existing formatting
- Bold just the first half of each word
- Remember the original content so I could restore it when toggled off
The text processing part was fairly straightforward:
javascript// This bolds the first half of each word
function processBionicText(textNode) {
const text = textNode.nodeValue;
const words = text.split(/\s+/);
let processedText = "";
words.forEach(function(word) {
if (word.length <= 1) {
processedText += word + " ";
return;
}
const halfLength = Math.ceil(word.length / 2);
const firstHalf = word.substring(0, halfLength);
const secondHalf = word.substring(halfLength);
processedText += "<strong>" + firstHalf + "</strong>" + secondHalf + " ";
});
return processedText;
}
The trickier part was finding all the text without breaking things like links and formatting. That required getting friendly with DOM traversal:
javascript// Find and process just the text, not the HTML elements
function processContentNodes(container) {
// We need to process only text nodes to preserve existing HTML
container.find("p, li, h1, h2, h3, h4, h5, h6").contents().each(function() {
// Only process actual text nodes (nodeType 3)
if (this.nodeType === 3) {
const processedText = processBionicText(this);
// Replace just this text node with processed HTML
$(this).replaceWith(processedText);
}
});
}
The WordPress integration part felt like coming home since PHP and I go way back:
php// Add the toggle button to WordPress content
function add_bionic_text_button($content) {
if (!is_singular()) {
return $content;
}
$button = '<div class="bionic-toggle-container">';
$button .= '<button id="bionic-toggle">Turn on Bionic Text</button>';
$button .= '</div>';
// Add the toggle button and necessary JavaScript hooks
return $button . $content;
}
add_filter('the_content', 'add_bionic_text_button', 5);
The DOM Adventure
I’ll be honest—this project reminded me that I’m not quite as sharp with JavaScript DOM manipulation as I am with PHP.
By attempt number three, I had a much better grasp on how to find and replace text without disturbing the rest of the page. The lightbulb moment was realizing I needed to specifically target text nodes (nodeType 3) rather than trying to process entire HTML elements.
It’s funny how these little side-projects end up teaching you more than you expected. What started as a “this should take an hour” project turned into an afternoon of Stack Overflow deep dives and browser console debugging sessions.
The Bionic Reading Results
The feature works pretty well now! I’ve had readers mention they like having the option, especially for longer articles. It seems people who read tons of content online are more likely to appreciate the bionic text toggle.
If You’re a Developer…
If you’re thinking of implementing something similar, here’s my hard-won advice:
- Focus on properly isolating text nodes from HTML elements
- Save the original content before making any changes
- Test with complex content that has a mix of formatting
The code snippets I shared are the simplified “clean” versions after I figured everything out. Trust me, the path to get there involved a lot more console.log statements and frustrated muttering.
As someone who spends more time reviewing other people’s code than writing my own these days, it was both humbling and refreshing to tackle something that pushed me a bit out of my comfort zone.
What Do You Think?
Have you tried the bionic text feature? Does it help you read faster or just distract you? I’m curious to hear your experiences—drop a comment below and let me know!
And if any fellow agency owners have tips for carving out more coding time amid the chaos of client work, I’m all ears. Sometimes you just need to build something for yourself to remember why you got into this field in the first place.