Bionic Reading
This is a an example of my implementation of the bionic reading. Every word in the text will be split into 2 parts and depending of the length of the word thefirst few letters will be spelled Bold. The Idea is, that you eyes can differentiate between word better this way.
If you want to learn more here is a good repository about it https://github.com/ansh/bionic-reading
function makeBionic() {
var a = document.getElementsByClassName("bionic")
for (let section of a) {
var b = "";
var wordContainer = section.innerHTML.split(" ")
for (let wordIndex in wordContainer) {
var anker = ""
var rest = ""
var WordParts = wordContainer[wordIndex].split('')
if (WordParts == []) {
break
}
if (WordParts.length <= 1) {
anker = ''
+ wordContainer[wordIndex] + ""
}
if (WordParts.length == 2) {
anker = ''
+ wordContainer[wordIndex].substring(0, 1) + ""
rest = ''
+ wordContainer[wordIndex].substring(1, wordContainer[wordIndex].length) + ""
}
if (WordParts.length == 3) {
anker = ''
+ wordContainer[wordIndex].substring(0, 2) + ""
rest = ''
+ wordContainer[wordIndex].substring(2, wordContainer[wordIndex].length) + ""
}
if (WordParts.length > 3) {
anker = ''
+ wordContainer[wordIndex].substring(0, 3) + ""
rest = ''
+ wordContainer[wordIndex].substring(3, wordContainer[wordIndex].length) + ""
}
b += " " + anker + rest + " "
}
section.innerHTML = b
}
}
No Script
I use noscript on the side, so that everyone can display it without having to fear trackers or other stuff like that. I really hate, that every page nowadays needs 50mb of js to work properly. You can update your alignments for non js users by adding a style tag if the user disabled it like i did in the following.
<noscript>
<style>
.incanvas {
width: 100%!important;
position: absolute !important;
height: auto !important;
display: contents;
}
.incanvasObject{
margin: 0px !important;
}
.offcanvas-toogle{
display: none;
}
.offcanvas-close{
display: none;
}
</style>
</noscript>
I changed the width of the incanvas to 100% and the position to absolute to display all the content underneath each other.