search

ondras / rot.js

ROguelike Toolkit in JavaScript. Cool dungeon-related stuff, interactive manual, documentation, tests!
https://ondras.github.io/rot.js/hp/
BSD 3-Clause "New" or "Revised" License
2.33k stars 254 forks source link

Background / foreground not aligned #126

Open eranimo opened 6 years ago

eranimo commented 6 years ago

When using any font and any configuration.

Example:

screen shot 2017-10-15 at 10 30 10 pm

You can see the last two glyphs are not aligned and the foreground peaks above the background.

display.setOptions({
  fontSize: 14,
  forceSquareRatio: true,
});
ondras commented 6 years ago

I am afraid that there is not reasonable way of solving this, as I am unable to detect this situation.

In particular, when using ROT.Display, the general assumption of individual rectangular cells having the height of fontSize is being made. There is no feedback available that would tell us what is the actual glyph height is. The canvas is partitioned into rows (and columns) of a fixed height -- and this height is precisely the fontSize value.

The issue can be somewhat remedied by using a spacing value slightly larger than 1 (the cell height is multiplied by this constant), but I understand that this may introduce other problems.

If anyone is able to provide some insight here, I would be happy to hear about that.

eranimo commented 6 years ago

Understandable. Are there special fonts that would solve this problem?

I think the misalignment is the same for every glyph of the font. What we really need is an offset value just for the foreground glyph, instead of a spacing value.

ondras commented 6 years ago

The glyphs, in my opinion, shall be (vertically) centered, as the canvas has textBaseline = "middle". I would not be surprised if the resulting rendering was different across multiple browsers (have you tried Chrome + Firefox + Edge?).