Text Spacing Toggle for Easier Reading
Adds a [text_spacing_toggle] shortcode button that increases line height, letter and word spacing to the levels recommended by WCAG, which helps readers with dyslexia or low vision.
Opens WPIDE on
Code
add_shortcode( 'text_spacing_toggle', function () {
static $printed = false;
$html = '<button type="button" class="wpide-spacing-toggle" aria-pressed="false">Increase text spacing</button>';
if ( ! $printed ) {
$printed = true;
$html .= '<style>html.wpide-spacing body *{line-height:1.6!important;letter-spacing:.12em!important;word-spacing:.16em!important}html.wpide-spacing p{margin-bottom:2em!important}.wpide-spacing-toggle{min-height:44px;cursor:pointer}</style>';
$html .= '<script>(function(){var k="wpideSpacing",on=false;try{on=localStorage.getItem(k)==="1";}catch(e){}function set(v){on=v;document.documentElement.classList.toggle("wpide-spacing",v);document.querySelectorAll(".wpide-spacing-toggle").forEach(function(b){b.setAttribute("aria-pressed",v?"true":"false");});try{localStorage.setItem(k,v?"1":"0");}catch(e){}}document.addEventListener("DOMContentLoaded",function(){set(on);});document.addEventListener("click",function(e){if(e.target.closest(".wpide-spacing-toggle")){set(!on);}});})();</script>';
}
return $html;
} );Notes
Place the shortcode in a header or footer widget, or in a Shortcode block on a page.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.