treffynnon/sqlstyle.guide

Code is not mono-spaced on Firefox?

owenh000 opened this issue · 6 comments

owenh000 commented

On Firefox, the code blocks are not truly mono-spaced. See the image below.

  • First code block: it is difficult to see, but the file_system on second line is not quite at the same horizontal alignment.
  • Second code block: it is more obvious here: file_size on the fourth line is noticeably shifted to the left.

With the more complex examples later in the document, it becomes quite difficult to see the intended alignment.

code blocks

I do not know what is causing this. Are the spaces narrower than the other characters? Perhaps this is a Firefox problem (I tested this with Firefox 52.7.3)?

treffynnon commented
treffynnon commented

I can't replicate this on Firefox 59.0.3 so perhaps an upgrade might fix it?

owenh000 commented

I tested on Windows 7 with Firefox 59.0.3. It is significantly better but the alignment is still not perfect.

img

treffynnon commented

Yep, I can see that in Firefox too. It's not as bad in Chrome, but it is there in the example you've shown from https://www.sqlstyle.guide/#preferred-formalisms

Looks like it is a problem with the Droid Sans Mono web font itself so might just remove it and rely on the browsers default monospace font.

treffynnon commented

I've used pretty much the same font stacks as GitHub. It should now use your system fonts for the body copy and the code samples. Looks good in Firefox and Chrome for me now.

owenh000 commented

Looks good for me too. Thanks!