4 ms·
Cool, here's a quick hack to try a similar technique with the comments in this thread (copy and paste into dev tools: $$('span.commtext').forEach(span => {
by phpnode 5y ago
Cool, here's a quick hack to try a similar technique with the comments in this thread (copy and paste into dev tools:
$$('span.commtext').forEach(span => {
const frag = document.createDocumentFragment();
span.textContent.split(/\s+/).forEach(word => {
const len = Math.ceil(word.length * 0.3);
const leading = document.createElement('strong');
leading.textContent = word.slice(0, len);
const trailing = document.createTextNode(word.slice(len) + ' ');
frag.appendChild(leading);
frag.appendChild(trailing);
});
span.parentNode.replaceChild(frag, span);
})
- hexomancer 5y agoI 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); }
- phpnode 5y agoI think yours infringes the patent ;)
- hexomancer 5y agoAlright, I modified it to be like the original comment.
- dr_kiszonka 5y agoI 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?
- hexomancer 5y agoyou need to manually run bionifyPage() after executing the script.
- w-m 5y agoCould 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?
- hexomancer 5y agoI have made a chrome extension that does that: https://github.com/ahrm/chrome-fastread 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.
- deleted 5y ago[deleted]