Skip to content

Instantly share code, notes, and snippets.

@jeremypage
Created November 23, 2015 12:50
Show Gist options
  • Save jeremypage/0b15169d11798a33d91f to your computer and use it in GitHub Desktop.
Save jeremypage/0b15169d11798a33d91f to your computer and use it in GitHub Desktop.
Bookmarklet to high light optimum line reading length (45-75 characters). From CSS-Tricks (https://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/)
javascript:(function(){function loadScript(a,b){var c=document.createElement('script');c.type='text/javascript';c.src=a;var d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',function(){var redOutline={outline:'2px solid red'},text;var textyElements='p, li, dt, dd, h1, h2, h3, h4, h5, h6';$(textyElements).on('mouseover.red',function(){$(this).css(redOutline)}).on('mouseleave.red',function(){$(this).removeAttr('style')}).on('click.red',function(){text=$(this).text();var e=text.substring(0,45);var t=text.substring(45,75);var n=text.substring(75,text.length);var r=e+'<span style=\'color: red;\'>'+t+'</span>'+n;$(this).html(r);$(textyElements).off('mouseover.red mouseleave.red click.red');$(this).removeAttr('style');})})})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment