[HN Gopher] The Monospace Web
___________________________________________________________________
The Monospace Web
Author : mrunseen
Score : 156 points
Date : 2024-08-27 17:09 UTC (5 hours ago)
(HTM) web link (owickstrom.github.io)
(TXT) w3m dump (owickstrom.github.io)
| alberth wrote:
| Typography is so difficult on the web due to lack of support for
| things CSS textbox-trim
|
| https://github.com/jantimon/text-box-trim-examples
|
| You can see that even on this website, if you click "Debug Mode"
| (top right) and notice that later in the page, the headings and
| body copy begin to drift out of vertical alignment (against the
| background grid).
| naet wrote:
| That type of font/textbox issue is my #1 gap in modern CSS.
|
| Honestly I'm surprised that it wasn't addressed long ago, seems
| like such a foundational issue for rendering text.
| Animats wrote:
| At least it's not green on black.
| whartung wrote:
| Monospace doesn't bother me.
|
| Is the hard line endings that bother me.
|
| Someone with their "retro" web site that, essentially, uses pre
| tags.
|
| You get a wall of text, in a small font on the phone, reader view
| doesn't work, and if you tilt is sideways, you're as likely to
| get scrollbars as not.
|
| Nowadays this is also my singular complaint with tech mailing
| lists. The hard line endings and rigid layout.
| vbernat wrote:
| That's not the case for this website. It is fully responsive.
| julienreszka wrote:
| damn it looks good I like it
| bee_rider wrote:
| Eh, I dunno.
|
| Websites have definitely gotten over-complicated and quite
| annoying. But this retro "look like a terminal" style seems like
| the wrong direction.
|
| I like fixed width fonts in a terminal where it is very likely
| that I'll have to interact with columns of text as a thing.
|
| For reading, I mean, LaTeX was invented a million years ago, and
| can produce nicely formatted text. That should be the target IMO.
| If you want to copy something retro, copy an old magazine, they
| were nicely designed.
|
| But I mean, I'll take this over a program trying to run in my
| browser, lol.
| kragen wrote:
| for dercuano my stylistic reference was medieval and early
| modern humanist manuscripts and incunabula, though without
| blackletter font, scribal abbreviations, and _scriptio
| continua_
| abotsis wrote:
| I wish textualize-web used this.
| pavlov wrote:
| The tight line spacing has a negative impact on readability. It's
| hard to read long paragraphs of dense body text like this. But
| the tables and other character graphics require this tight
| leading.
|
| That's the problem with using the same character grid for both
| graphics and text. It could be alleviated with a font that has a
| particularly low x-height (leaving more margin above and below
| the letters).
| alberth wrote:
| Is it the tight line-height, or just the fact that monospace
| fonts a more difficult to read than proportional fonts
|
| (due to monospace words have a more similar 'shape' than
| proportional type words)
| 16bytes wrote:
| I thought you meant line width and was confused because it's in
| the generally accepted range (~70 characters).
|
| The line height, I agree, is too tight. 19.2px at 16px font
| size is too cramped at only 1.2x. Making it 24px is a big
| improvement.
|
| To my eye, however, a taller line height doesn't affect the
| tables and other character graphics. With some tweaks like this
| I think the monospace style comes across quite well.
|
| * edit - I think I see your point; it does break the author's
| concept of the fixed grid (set line-height: 24px for p elements
| and turn on the author's "debug mode" to see the grid.
| kragen wrote:
| you could adjust the margins between paragraphs to fix the
| fixed grid, but then the tables won't adhere to it
| corytheboyd wrote:
| Had the same instant turn off.
| evanjrowley wrote:
| How does it compare to the tightness of comments here in HN?
| 16bytes wrote:
| Looks like HN uses `line-height: normal`, so it would be the
| same factor of 1.2 times font-size that's used on the
| Monospace page.
| miohtama wrote:
| The presentation page dearly needs colour. Even if you emulate
| terminal feeling, you need to use colour.
| michelledepeil wrote:
| If nothing else, the tree ul-list css class is good enough that
| it should be part of the HTML spec (as in: a <tree> tag) imo.
| What an incredibly useful thing that is.
| daliusd wrote:
| It looks nice and refreshingly light.
| rchaud wrote:
| The page loads a webfont (Jetbrains Mono) with 4 different
| weights, for a total payload of 725KB. Looking light and being
| light are 2 different things.
| kragen wrote:
| jesus. 7 floppy disks+ worth of fonts in order to provide the
| illusion of a lightweight text-mode ui from the bbs days.
| that page would have taken 50 minutes to load over a hayes
| smartmodem 2400--if your connection didn't drop because your
| brother picked up the phone
|
| to me this website feels like a clueless outsider
| trivializing the world i grew up in. like christians
| celebrating passover (in english 'easter', but in most other
| languages including spanish the hebrew word is used) and the
| sabbath, putting up the ten commandments in their courtrooms,
| and reading from the torah, while murdering jews for
| practicing judaism. though less intense obviously
|
| maybe a better analogy would be holding a pig roast during
| ramadan to celebrate the muslim community
|
| ______
|
| + 7? yes, the first computer i had with floppies had 100
| kibibytes per side, so this is actually slightly more than 7
| floppies
| usually wrote:
| It looks nice, and I'm glad that it's semantic and responsive,
| but the fundamental problem is that monospace just isn't great
| for body text. I've read blog posts on multiple sites with
| monospaced body text, it's okay, but proportional really is the
| way to go in my opinion.
| layer8 wrote:
| Agreed. It has started bothering me for authoring Markdown
| documents as well, where it's often impractical to avoid
| monospace.
| prmoustache wrote:
| Main problem is I guess the website would be broken the moment
| the user choose the setting to use his preferred font on the
| browser and do not use a monospace one.
| taeric wrote:
| While this was certainly a promise of the early ideas in CSS,
| is this something that is actually done? I'm guessing more
| people run without javascript than pick their own fonts.
| wonger_ wrote:
| I've been keeping a list of monospace pages:
| https://wonger.dev/posts/monospace-dump#web. Currently have ~50.
|
| Spacing is a challenge. And you lose some legibility giving up
| proportional fonts. I think kerning in proportional fonts makes a
| big difference, letting your eyes recognize the shape of
| different letter groupings.
|
| Monospace text is fine if you avoid long-form text, like when
| it's structured and highlighted in a code editor.
|
| But it sure is pretty! Especially with Unicode charts and ASCII
| art.
| dmd wrote:
| Ooh, this is the thread to ask my question in. A few years ago I
| ran across a ... I think a video game walkthrough? maybe? which
| was written to be read in monospace font, and it was _full
| justified_ perfectly all the way through (thousands of lines!)
| SOLELY through word choice.
|
| Anyone know what I'm talking about and have a link?
| CM30 wrote:
| I vaguely recall seeing a GameFAQs walkthrough that did this,
| and I think it might have been for a Final Fantasy game of some
| kind, but unfortunately I can't remember more than that.
| dmd wrote:
| GameFAQ was enough! FOUND IT! Thank you!
|
| https://gamefaqs.gamespot.com/snes/588741-super-
| metroid/faqs...
| tvchurch wrote:
| This is why the internet exists.
|
| Incredible catharsis. Love it.
| 5- wrote:
| this gets discussed, or at least mentioned, often on hn,
| e.g.
|
| https://news.ycombinator.com/item?id=28651093 (this very
| faq)
|
| https://news.ycombinator.com/item?id=40773880 (jart's
| commit)
|
| https://news.ycombinator.com/item?id=40605970 (tom7's
| gnujpl)
|
| and bonus: recently i've been enjoying
| http://arlyle.sdf.org/
|
| (unfortunately, links do not work in preformatted text on
| hn)
| macleginn wrote:
| Cf. also http://tom7.org/bovex/ (a layout engine that tries to
| achieve a similar effect by rephrasing the input using an LLM).
___________________________________________________________________
(page generated 2024-08-27 23:00 UTC)