Inconsistent font size scaling

My work's standard presentation format is Google Slides in a ratio 16:9, with width set to 10 inches. But I hate having to manually input plots etc so originally mimicked it using Beamer, but am now trying to use xaringan for all the modern html features (which uses remarkjs under the hood - and I'm pretty sure is where my problem originates).

My problem comes in that I cannot easily get any consistency in font sizes between displaying presentations on screen and printing them. As in, I want the print out and the screen to be identically laid-out, but just scaled appropriately. Even different size screens scale slightly inconsistently. Google Slides can achieve this, but I cannot (easily) achieve the same with remarkjs.

With remarkjs I can only get this to (sort of) work if I manually set CSS options that scale the font size according to the physical size of my monitor relative to the physical size of the print out. For example:

@page {
  size: 10in 5.625in; 
}
@media only screen {
  html {
    font-size: calc(1.2289 * var(--base-font-size));
  }
}

My screen is 14.1 inches 16:9, hence the 1.2289 to scale to the default 10in x 5.625in (= 11.473in) that Google Slides uses.

This is not so much an issue if I only display the presentation on my own screen, but the second I display it on a different size screen then the font sizes scale incorrectly again and I have to manually adjust the 1.2289 factor. Often it's not visually obvious, but sometimes it can cause problems with the paging of the slide and bump things around too far.

I don't have this problem when using revealjs as long as I set the reveal options to be the correct number of pixels (e.g. 960 x 540 gives 10in x 5.625in) then everything scales appropriately regardless of whether it is print or screen, or the size of the screen - so, presumably, there's a slight difference between then way the two scale everything. I'd prefer to keep using remarkjs, though as it integrates a little better with everything else I'm doing.

If there a way to get remarkjs to be screen size "insensitive" so I don't have to manually adjust the scaling factor every time?

Update. I went off on a bit of a tangent with the whole screen size vs print out size ratio. In my case the correct scaling size to use for fonts is 1.2611, as in:

@media only screen {
  html {
    font-size: calc(1.2611 * var(--base-font-size)); 
  }

I could only tell the difference once I started checking enormous fonts.

The reason being, after getting round to dig through the remark.js source code, it sets a reference 4:3 slide dimension of 908 x 681 (in scaler.js) - and then adjusts the scaling according to the width of the current display device (or printed page). But it never corrects the height accordingly and this gives the inconsistent font scaling.

In my case my slides are defined as 960 x 540, so I need to correct the font sizes (plus any other objects with a variable height - e.g. hr) by 681/540 and then everything scales consistently. It would be nice if the scaler could scale both dimensions "correctly" as that would avoid all these issues - when you've got font, hr's etc etc in your slides, it's a lot of CSS to write to make sure they scale correctly.

gnab / remark

Inconsistent font size scaling #641