Hacker News Reader

Comment by paulirish | Hacker News Reader

Looks nice. https://asciiflow.com/ is a web-based alternative that's been my go-to for a decade.

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

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.

It seems to only mess it up on mobile. Desktop Chrome seems fine. Mobile Chrome is all I've tested on.

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!)

How do you set options for chrome on iPhone and android?

Sorry for the naive question, I never figured this out.

These are in-page CSS controls, not browser config options (no idea how those works, I avoid mobile platforms)

You could use a browser that supports extensions on Andriod, iOS will protect you from such nefarious things though.

iOS supports browser extensions, and has done for some time - e.g. https://apps.apple.com/us/app/makeover-custom-css/id16023611... (which demonstrates custom HN CSS in the demo screenshots!)

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.

Doesn't look like screen readers can read the text on these.

I believe you can treat it as if it were an image by putting it an element with attributes role="img" aria-label="description of the diagram goes here"

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

The problem is, having to describe a diagram using text defeats the purpose of the diagram. Must better is to use diagrams that render as SVG, so screen readers can read them. [0]

[0] https://accessibility.princeton.edu/how/design/images-text

A flowchart involving labeled boxes with arrows between them is going to be more accessible as an SVG than a PNG, sure, but you're still going to need to explain what the arrows are doing, otherwise a screenreader user will be quite lost.

Reply on news.ycombinator.com