# 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.

- Type: PHP
- Runs: Frontend only
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: readability, dyslexia, shortcode
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-text-spacing-toggle/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Text Spacing Toggle for Easier Reading" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/