Is it possible to change the font size with the keyboard

[ChoCho66]

As in the title, is it possible to add something like in https://www.w3.org/Talks/Tools/Slidy2/#(2)

• Font sizes automatically adapt to browser window size
  • use S and B keys for manual control (or < and >, or the - and + keys on the number pad

this function?

So that I can immediately modify the font size when there is a problem with the text layout.

[t-fritsch]

Hi,

As mentioned in https://revealjs.com/keyboard/ you can add/edit keyboard shortcut quite easily.

Font sizes in reveal are controlled by a main css variable named --r-main-font-size :

reveal.js/css/theme/template/exposer.scss

Line 6 in 92ee97f

--r-main-font-size: #{$mainFontSize};

then overriding this variable value on a DOM node will automatically change font-sizes in every children. If you do so on body element, you then control the whole font sizes. This snippet should do the trick :

function updateFontSize( delta ) {
    const fontSizeRegexp = /^(?<size>\d+)(?<unit>\D*)$/, // the beauty of named capturing groups 😍
        fontSize = getComputedStyle( Reveal.getViewportElement() ).getPropertyValue( '--r-main-font-size' ),
        { size, unit } = fontSize.match(fontSizeRegexp).groups;

    Reveal.getViewportElement().style.setProperty( '--r-main-font-size', ( parseInt( size ) + delta ) + unit );
}
function resetFontSize() {
    Reveal.getViewportElement().style.removeProperty( '--r-main-font-size' );
}
Reveal.initialize({
    // ...
    keyboard: {
        82 : () => updateFontSize( -2 ), // 'r'
        84 : () => updateFontSize( +2 ), // 't'
        69 : () => resetFontSize(), // 'e'
    },
    // ...
});