This bookmarklet is inspired by Bionic Reader API that is truly incredible. However I have issues with service APIs that are not clear on how they handle the privacy and security of my data. So I made a quick and dirty bookmarklet to do the job locally.
- Create a new bookmark in your browser
- Use this script as the address:
javascript:(function(){!function(){window.hasOwnProperty("bionicWordWrapApplied")||(!function(e){var n,t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,null,null);for(;n=t.nextNode();){for(var o,r=n.parentNode,d=n.nodeValue;o=d.match(/^(\s*)(\S+)/);){d=d.slice(o[0].length),r.insertBefore(document.createTextNode(o[1]),n);var a=Math.ceil(o[2].length/2),c=r.insertBefore(document.createElement("b"),n);c.appendChild(document.createTextNode(o[2].slice(0,a)));var i=r.insertBefore(document.createElement("span"),n);i.appendChild(document.createTextNode(o[2].slice(a)))}n.nodeValue=d}}(document.body),window.bionicWordWrapApplied=!0)}();})();
This is the initial code I wrote in ~half an hour and I'm rust. Definitely needs more testing and improvement.
javascript: (function() {
if (!window.hasOwnProperty('bionicWordWrapApplied')) {
bionicWord(document.body);
window.bionicWordWrapApplied = true;
}
function bionicWord( element ){
var nodes = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
var node;
while (node = nodes.nextNode()) {
var p = node.parentNode;
var text = node.nodeValue;
var m;
while(m = text.match(/^(\s*)(\S+)/)) {
text = text.slice(m[0].length);
p.insertBefore(document.createTextNode(m[1]), node);
var breakpoint = Math.ceil(m[2].length/2)
var firstpart = p.insertBefore(document.createElement('b'), node);
firstpart.appendChild(document.createTextNode(m[2].slice(0,breakpoint)));
var secondpart = p.insertBefore(document.createElement('span'), node);
secondpart.appendChild(document.createTextNode(m[2].slice(breakpoint)))
}
node.nodeValue = text;
}
}
})();