3

I have made a webpage which uses a <pre> block to display text with a monospace font. I've tried the default font, as well as a bunch of ones such as "Fixedsys" or "Courier New", etc. The same result happens no matter what I do:

This is what it looks like if I use a Unicode checkmark: https://i.stack.imgur.com/Dyocg.png

This is what it looks like if I instead use a "X": https://i.stack.imgur.com/VxvRj.png

It seems as if various Unicode symbols do not respect the fixed width that each character is supposed to have with "monospace" or "fixed-width character" fonts.

I don't want to use "X" instead of the checkmark because it looks very ugly. But on the other hand, it also looks very ugly when the "columns" don't line up...

Is there anything I can do about this

user15744668
  • 41
  • 1
  • 2
    I've had a similar problem and I've been using a "thin space" U+2009 to readjust. – pete Jan 04 '22 at 22:59

1 Answers1

0

Please check what fonts are actually used by the browser. For Chrome, refer to: https://makandracards.com/makandra/59967-css-how-to-find-out-the-rendered-font-in-chrome.

Two sollutions come to mind:

  1. Find a monospaced font that supports the symbols you want to use. You might want to check you my answer here: https://stackoverflow.com/a/73313342/13663706
  2. Apply the letter-spacing (https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) to your symbol to compensate for the 'wrong' width.
Gertjan Kruiger
  • 111
  • 2
  • 3