Text Size Buttons Shortcode

// Scaling steps in percent of the browser's default font size.
$wpide_text_steps = array( 90, 100, 112, 125, 140 );

add_shortcode( 'text_size_controls', function () use ( $wpide_text_steps ) {
    static $printed = false;

    $html = '<div class="wpide-textsize" role="group" aria-label="Text size">'
        . '<button type="button" data-step="-1" aria-label="Smaller text">A−</button>'
        . '<button type="button" data-step="0" aria-label="Default text size">A</button>'
        . '<button type="button" data-step="1" aria-label="Larger text">A+</button>'
        . '</div>';

    if ( ! $printed ) {
        $printed = true;
        $html   .= '<style>.wpide-textsize{display:inline-flex;gap:4px}.wpide-textsize button{min-width:44px;min-height:44px;font-weight:700;cursor:pointer}</style>';
        $html   .= '<script>(function(){var steps=' . wp_json_encode( array_values( $wpide_text_steps ) ) . ',key="wpideTextStep",def=steps.indexOf(100),i=def;try{var s=parseInt(localStorage.getItem(key),10);if(!isNaN(s)&&steps[s]){i=s;}}catch(e){}function apply(){document.documentElement.style.fontSize=steps[i]===100?"":steps[i]+"%";try{localStorage.setItem(key,i);}catch(e){}}apply();document.addEventListener("click",function(e){var b=e.target.closest(".wpide-textsize button");if(!b){return;}var d=parseInt(b.getAttribute("data-step"),10);i=d===0?def:Math.max(0,Math.min(steps.length-1,i+d));apply();});})();</script>';
    }

    return $html;
} );