Show HN: A bookmarklet to more easily read and simultaneously listen to articles

Although I am aware of the reader functionality of many browsers, I often find the small, gray text on many webpages difficult to read. I also have found that I read faster when part of a word is in bold (previously discussed on HN as "bionic reading"; though this does not work for everyone). Also, I read better when the computer is speaking the same text simultaneously.

To address these needs, I created this bookmarklet, and I hope others will also benefit from it. To use, add this bookmarklet as a link in the top toolbar of your browser, highlight the text in an article you would like to read, and then press the bookmarklet to have the text displayed in a larger format in Arial font with an easy-on-the-eyes peach background while the text is read. You can adjust the rate of speech with the slider that appears at the top of the new text window.

javascript:void function(){ javascript:(function(){ var selection = window.getSelection().toString(); if (!selection) { alert("Please select some text on the page."); return; } var encodedSelection = document.createElement("div"); encodedSelection.textContent = selection; var processedContent = encodedSelection.innerHTML.replace(/\n/g, " <br></br> "); var words = processedContent.split(" "); var formattedText = ""; var speechContent = ""; for (var i = 0; i < words.length; i++) { var word = words[i]; var chunkSize = Math.floor(word.length / 3) + 1; var boldPart = "<span style='font-weight:bolder'>" + word.substring(0, chunkSize) + "</span>"; var lightPart = "<span style='font-weight:lighter'>" + word.substring(chunkSize, word.length) + "</span>"; var formattedWord = boldPart + lightPart; if (word.endsWith(".")) { formattedWord += "<span style='color:red'> *</span>"; } formattedText += formattedWord + " "; speechContent += word + " "; } var newWindow = window.open("", "_blank"); newWindow.document.write("<html><head><title>Spoken Content</title></head><body><input type='range' min='0.1' max='10' value='1' step='0.1' id='rate-slider'><p id='content' style='background-color:#EDD1B0;font-size:40;line-height:200%25;font-family:Arial'>" + formattedText + "</p></body></html>"); var rateSlider = newWindow.document.getElementById("rate-slider"); var utterance = new SpeechSynthesisUtterance(speechContent); rateSlider.addEventListener("input", function() { utterance.rate = rateSlider.value; window.speechSynthesis.cancel(); window.speechSynthesis.speak(utterance); }); window.speechSynthesis.speak(utterance); })();}();