Consistent spacing for monospace font

[JesseCSlater]

I am trying to display a grid of monospace characters like a terminal on the browser (not actually for a terminal). I am having a huge amount of trouble getting consistent vertical spacing across devices. On some devices, the line spacing is slightly taller, so there is a gap between the vertical line characters, and the grid is too tall. It seems to be a device issue, not a browser issue, since it is consistent across browsers on a single device (as far as I can test). I assume that means it is an issue with fonts somehow.

What do I need to do to display a grid of monospace characters so that characters size and spacing will be consistent across browsers and devices? Ideally, I would like to ensure that every character is exactly 8x16px, and that they tile without gaps.

I don't know if this is an appropriate question to ask here since it is not directly xtermjs related, but I could not find any information about this on the internet, and it appears xtermjs has solved the problem somehow.

[jerch]

Ideally, I would like to ensure that every character is exactly 8x16px, and that they tile without gaps.

Imho thats not easily possible across different browsers and devices. Main reasons - the devices may have different DPR, OS may provide different monospace fonts and last but not least the font renderer may scale fonts differently on different devices for better legibility. The latter point is also the reason why forcing things into a fixed scheme might lead to poor output quality on certain device types while it looks perfect on others.
xterm.js goes the other way around - it takes the selected font and measures its "natural" output appearance done by the font renderer to derive its char grid size, which works nicely for most chars (beside some rare edge case chars still messing with the grid size, which is often a font glyph issue).

[TylerBloom]

How does xterm go about that calculation? That is, how does it determine the final size of a character after rendering?

[jerch]

The basic normative calc is done in https://github.com/xtermjs/xterm.js/blob/master/src/browser/services/CharSizeService.ts, and for the DOM renderer for individual char adjustments here https://github.com/xtermjs/xterm.js/blob/master/src/browser/renderer/dom/WidthCache.ts