3 ms·

I use ASCIIFlow all the time. I still haven't figured out how to get browsers to render the monospace fonts correctly see example diagram on this page: http://u

I use ASCIIFlow all the time. I still haven't figured out how to get browsers to render the monospace fonts correctly see example diagram on this page: http://uggly.bytester.net/#how-it-works http://uggly.bytester.net/#how-it-works

Retr0id 3y ago
Looks fine on my machine - my guess is that your primary font does not contain all the glyphs used (e.g. the box-drawing chars), so its falling back to another font just for those glyphs, causing inconsistencies.
- russellendicott 3y ago
  It seems to only mess it up on mobile. Desktop Chrome seems fine. Mobile Chrome is all I've tested on.
  - Retr0id 3y ago
    Ah, in that case you might want: text-size-adjust: none; -webkit-text-size-adjust: none; (it's infuriating that these options need to exist!)
    - golem14 3y ago
      How do you set options for chrome on iPhone and android? Sorry for the naive question, I never figured this out.
      - Retr0id 3y ago
        These are in-page CSS controls, not browser config options (no idea how those works, I avoid mobile platforms)
      - jasonm23 3y ago
        You could use a browser that supports extensions on Andriod, iOS will protect you from such nefarious things though.
        Retr0id 3y ago
        iOS supports browser extensions, and has done for some time - e.g. https://apps.apple.com/us/app/makeover-custom-css/id1602361167 https://apps.apple.com/us/app/makeover-custom-css/id16023611... (which demonstrates custom HN CSS in the demo screenshots!)
tracker1 3y ago
First is using a monospace font, second is aligning line height to font height. Third includes a bit of tweaking and trying different sizes. Your best bet is to use a good fixed width don't with broad character support. Some are better or worse than others. Cascadia Code and Fira Code work pretty well with differing characteristics and both have nerd don't variants. Emoji alignment is another problem.

Retr0id 3y ago

Looks fine on my machine - my guess is that your primary font does not contain all the glyphs used (e.g. the box-drawing chars), so its falling back to another font just for those glyphs, causing inconsistencies.

russellendicott 3y ago
It seems to only mess it up on mobile. Desktop Chrome seems fine. Mobile Chrome is all I've tested on.
- Retr0id 3y ago
  Ah, in that case you might want: text-size-adjust: none; -webkit-text-size-adjust: none; (it's infuriating that these options need to exist!)
  - golem14 3y ago
    How do you set options for chrome on iPhone and android? Sorry for the naive question, I never figured this out.
    - Retr0id 3y ago
      These are in-page CSS controls, not browser config options (no idea how those works, I avoid mobile platforms)
    - jasonm23 3y ago
      You could use a browser that supports extensions on Andriod, iOS will protect you from such nefarious things though.
      - Retr0id 3y ago
        iOS supports browser extensions, and has done for some time - e.g. https://apps.apple.com/us/app/makeover-custom-css/id1602361167 https://apps.apple.com/us/app/makeover-custom-css/id16023611... (which demonstrates custom HN CSS in the demo screenshots!)

tracker1 3y ago

First is using a monospace font, second is aligning line height to font height. Third includes a bit of tweaking and trying different sizes. Your best bet is to use a good fixed width don't with broad character support. Some are better or worse than others. Cascadia Code and Fira Code work pretty well with differing characteristics and both have nerd don't variants. Emoji alignment is another problem.