July 30, 2026
When box art goes bad
Fixing miss-aligned monospace text in Android browsers
Android turned neat text art into a crooked mess — and commenters felt very seen
TLDR: The fix for Android mangling neat text diagrams was to stop relying on the slim online font and serve the full font file instead. Commenters jumped in to say the problem wasn’t just one device, turning a niche formatting bug into a relatable little tech meltdown.
A tiny browser bug turned into a full-on "why is my phone ruining this perfectly good box art?" moment. The original post was about those simple text diagrams made from lines and corners — the kind that should look identical everywhere. On Mac and iPhone, everything behaved. On Android? Total chaos. Boxes that were supposed to line up neatly came out just a little wonky, which in internet terms is somehow deeply offensive. The big reveal: Android browsers were quietly swapping in a different built-in font for some missing symbols, and that sneaky replacement was just different enough to throw the whole diagram off.
The mini-drama came from how many "obvious fixes" didn't work. Search results said one thing, several artificial intelligence tools pointed in circles, and even loading the font from Google Fonts wasn't enough. That sent the story straight into classic community territory: frustration, detective work, and one of those satisfying endings where the fix is weirdly specific. The winning move was to download the full font file and host it directly, because the slimmer online version appeared to be missing some of the very symbols needed to keep the text art straight.
And the comments? Small but punchy. GranPC basically walked in with a plot twist, saying the broken version also looked bad on a Linux phone using Firefox, while the repaired one was "well, fixed." That gave the whole thing extra credibility — and a faint whiff of cross-platform scandal. The vibe was equal parts bug hunt, font betrayal, and "finally, someone said it."
Key Points
- •The article documents a misalignment issue affecting ASCII box-drawing diagrams rendered in HTML `<pre>` tags on Android browsers.
- •The diagrams displayed correctly in Neovim and in browsers on macOS and iOS, indicating a platform-specific rendering difference.
- •The author says the likely cause was font fallback for missing glyphs, with Android using a system monospace font of different character width.
- •Loading Noto Sans Mono from Google Fonts via a `<link>` tag did not resolve the issue, and other CSS-based fixes also failed.
- •Self-hosting the full TTF version of Noto Sans Mono using CSS `@font-face` fixed the alignment problem, after the author found that the WOFF2 version appeared to omit many symbols.