Remark: Font size

[asmeurer]

I gave a presentation yesterday using Remark. It was mostly successful, but there was one thing that was a little disastrous. The font was _way_ too small for people to see on the screen. Increasing the font size does nothing. I finally figured out that I can force the font to be bigger using the accessibility settings in the browser (Safari in this case).

I suggest:

• Allow Cmd-+ or whatever to actually make the font bigger. This is something that pretty much every presenter has to do, because the font is always smaller than they think it should be.
• Make the default font size in the default theme way bigger.

Aside from these issues, Remark worked very well for me (well this and the indentation thing, but no one noticed that but me). It was super easy to write the slides, a big difference from what I've done in the past (beamer). This is the presentation if you are intereseted.

[gnab]

The automatic scaling is what messes with the browser zooming. I totally get your point, and I guess perhaps the most intuitive solution would be to scale the slide contents according to the browser's zoom level (if that can be detected). Then of course overflow content and scrolling could be a problem. Any ideas or suggestions on how that should be handled?

As for the default font size, #102 addresses this and more.

Btw, I added your presentation to the README listing.

[asmeurer]

Then of course overflow content and scrolling could be a problem. Any ideas or suggestions on how that should be handled?

I had this problem with the workaround I used. For my presentation, once I figured out how to make the fonts bigger, someone in the audience lent me their iPad with the presentation (at normal size), and ended up changing the minimum size dynamically during the presentation when something at the bottom of the screen was hidden. The ability to mirror the presentation in a different window was useful here as it allowed me to pull up the prefs on my display without them showing up on the projected display.

Some suggestions:

• Allow the presentation to scroll vertically if it overflows. I don't know if this is possible, especially with scrolling to switch slides. I also don't know what you could do with mirroring with this.
• Give some kind of visual warning that the slide is overflowing (like some kind of red bar at the bottom).
• Most importantly, make the default font size bigger. If it is big to begin with, then people will split their slides from the beginning, and they won't have to make the font bigger when they present.

[gnab]

I'm going with an increased default font size for now, keeping it simple :)

[William-Yeh]

I'm made a simple zoom in/out facility for remark:

• Source: https://github.com/William-Yeh/remark-zoom
• Online demo: http://william-yeh.github.io/remark-zoom/

I've only tested my remark-zoom on a limited number of browsers (Chrome, Firefox, Safari on Mac OS X "Yosemite"). Feel free to comment on this. Thanks!

[tripu]

@William-Yeh Thanks for that tool. I also noticed that it's not possible to scale contents normally using the browser zoom features. That is an accessibility issue.

Any chance that @William-Yeh's zoom feature goes upstream, @gnab? (Or is it possible to adjust font size already, and maybe I haven't noticed?)

[William-Yeh]

Re @tripu :

I'm not good at CSS, and my remark-zoom still doesn't handle the zooming correctly in all cases.

[Tamriel]

I still would love to see the ability to change the font size :-)

[alexandrnikitin]

I second @Tamriel , ability to change the font size is important.

[Vebryn]

+1

[reactormonk]

In case anyone comes across this, you can change the font size statically via

      .remark-slide-content { font-size: 40px; }

[freder]

I just ran into the same problem.

if you ask me, cmd-+/- to work as expected is crucial! having to edit css during a presentation isn't really an acceptable solution.

[freder]

quick hack:

<style>
    :root {
        --font-size: 22px;
    }
    .remark-slide-content {
        font-size: var(--font-size);
    }
</style>
<script>
    const root = document.documentElement;
    const step = 2;
    window.addEventListener('keydown', (event) => {
        const fs = getComputedStyle(root).getPropertyValue('--font-size');
        let val = parseFloat(fs);
        if (event.metaKey && event.key === '-') {
            val -= step;
            root.style.setProperty('--font-size', `${val}px`);
        } else if (event.metaKey && event.key === '=') {
            val += step;
            root.style.setProperty('--font-size', `${val}px`);
        }
    });
</script>