Support for square tiles and non-square-ratio text

[ddmills]

When rendering maps, forceSquareRatio: true is perfect, but when rendering display text, the square ratio makes it difficult to read:

when rendering text, it would be great to have an additional flag or option to allow the aspect ratio to be non-square.

[ondras]

The rot.js Display is supposed to represent a grid with rows and columns. It is not possible and not feasible to mix different character widths. I can highly recommend creating an independent rendering area for your text needs. It can be either a different ROT.Display instance, or simply a HTML <p> (with the additional benefit of CSS styling).

Alternatively, you might want to try different monospace fonts to find some with more square-like aspect ratio. This is a good place to start: https://github.com/chrissimpkins/codeface

[ddmills]

I was thinking more along the lines of how it's done in cogmind: https://www.gridsagegames.com/cogmind/game/cogmind_labels_items.png

a good article on how this was achieved: https://www.gridsagegames.com/blog/2014/09/fonts-in-roguelikes/

I think maybe a couple challenges here:

1. would require support for multiple glyphs [Question] Is there a way to use two different tilesets? #163
2. would require some decent math around how many non-square glyphs would fit in a square row
3. goes against the grid-like row/column structure that is currently in place for rot.js

[ondras]

Also, there remains an open question of a text-based vs. image-based Display. You mentioned the forceSquareRatio property that is used for text-based Displays, but you also linked the #163 which is only relevant in the context of Image Tiles.