back

by hexomancer·4y ago·view on hn ↗
I made a version which works in all web pages, it is still very hacky though:

    function bionifyPage(){
        function bionifyWord(word) {
            if (word.length == 1) {
                return word;
            }
            var numBold = Math.ceil(word.length * 0.3);

            // return "<div class=\"bionic-highlight\">" + word.slice(0, numBold) + "</div>" +  + "<div class=\"bionic-rest\">" + word.slice(numBold) + "</div>";
            return "<b>" + word.slice(0, numBold) + "</b>" + "<span>" + word.slice(numBold) + "</span>";
        }

        function bionifyText(text) {
            var res = "";
            if (text.length < 10) {
                return text;
            }
            for (var word of text.split(" ")) {
                res += bionifyWord(word) + " ";
            }
            return res;
        }

        function bionifyNode(node) {
            if (node.tagName == 'SCRIPT') return;
            if ((node.childNodes == undefined) || (node.childNodes.length == 0)) {
                if ((node.textContent != undefined) && (node.tagName == undefined)) {
                    var newNode = document.createElement('span');
                    var bionifiedText = bionifyText(node.textContent)
                    newNode.innerHTML = bionifiedText;
                    if (node.textContent.length > 20){
                        node.replaceWith(newNode);
                    }
                }
            }
            else {
                for (var child of node.childNodes) {
                    bionifyNode(child);
                }
            }
        }
        bionifyNode(document.body);
    }
2 comments
Could you make one that reduces the opacity of the second half of the word, while keeping the same boldness for the complete text, to compare the effect?
I have made a chrome extension that does that: https://github.com/ahrm/chrome-fastread

You can customize the css attributes of highlighted text and rest of the word using the two input texts.

I think yours infringes the patent ;)
Alright, I modified it to be like the original comment.
I have some trouble making it work in Chrome and Firefox (Win 10). Your parent's code does work, so maybe you introduced a bug when editing the code?
you need to manually run bionifyPage() after executing the script.