I have been toying with a similar idea for a personal blog... nothing quite polished, though. I enjoyed playing with typesetting in general with this, it's interesting to remember you're not...
I have been toying with a similar idea for a personal blog... nothing quite polished, though.
I enjoyed playing with typesetting in general with this, it's interesting to remember you're not actually limited to the terminal character grid here. I built a small static site generator that renders LaTeX out into MathML and embeds it; in JavaScript I inspect inline math tags and add some inline padding to make them an integer number of characters wide. I'd rather do this in the static site generator but I can't figure out how to reliably compute the width for each math tag. More reliable to just do it in JavaScript when the page is rendered.
You can also play with variable fonts and font sizes. For example mixed font families; block quotes could be proportional font, headers could be double- or one-and-a-half height, or different content could use different fonts. In my prototype I used the monaspace family. The different variants all align to the same grid and typeset together nicely. Main body was sans, headers and code were slab serif, and asides/pseudocode were handwritten. The ligatures and "texture healing" look fine but it's not super important to me.
I haven't worked on the project in a while though, I was stuck on a couple things:
I also encountered a strange issue on mobile where <pre> tags have much much smaller font than main body text. It's related to some accessibility setting where font size is increased to match the OS font size, but it doesn't seem to apply to everything and I'm not sure how to make it do so.
Violating fixed width: When there's space, I'd like to be able to place figures and asides outside the fixed-width limit in the margins. In theory it would be straightforward with float but I never got it to work right.
Generating figures: ASCII art and box drawing characters are too tedious for me. I'd like the static site generator to compile tikz figures to svg and embed those. I did get it partially working, but the font size and DPI is all wrong. It's important to me that the tikz text and the $\LaTeX$ text be the same size and font. Fonts are easy, but DPI is not. Arrows and borders were also rendered too thin, like less-than-a-pixel width so it's a pain to read. I suspect it's something to do with the template \documentclass or some esoteric command-line flag to set units but I never quite figured it out.
This has me inspired to work on the project some more! Thanks for sharing!
Brutalist web design, some of my absolutely favorite.
I have been toying with a similar idea for a personal blog... nothing quite polished, though.
I enjoyed playing with typesetting in general with this, it's interesting to remember you're not actually limited to the terminal character grid here. I built a small static site generator that renders LaTeX out into MathML and embeds it; in JavaScript I inspect inline math tags and add some inline padding to make them an integer number of characters wide. I'd rather do this in the static site generator but I can't figure out how to reliably compute the width for each math tag. More reliable to just do it in JavaScript when the page is rendered.
You can also play with variable fonts and font sizes. For example mixed font families; block quotes could be proportional font, headers could be double- or one-and-a-half height, or different content could use different fonts. In my prototype I used the monaspace family. The different variants all align to the same grid and typeset together nicely. Main body was sans, headers and code were slab serif, and asides/pseudocode were handwritten. The ligatures and "texture healing" look fine but it's not super important to me.
I haven't worked on the project in a while though, I was stuck on a couple things:
Fixed width: I enjoy writing justified to a fixed character width, but if the display is too small or the user's font too large, it breaks everything. Why bother to write justified if a mobile browser will just reflow everything anyway? I could pick a narrower width, but some readers will still have the problem (and too narrow looks silly on desktop). I can't be bothered to write justified to multiple widths, that seems like a nightmare and I think would produce strange Moiré-ish patterns of whitespace on the page.
I also encountered a strange issue on mobile where
<pre>tags have much much smaller font than main body text. It's related to some accessibility setting where font size is increased to match the OS font size, but it doesn't seem to apply to everything and I'm not sure how to make it do so.Violating fixed width: When there's space, I'd like to be able to place figures and asides outside the fixed-width limit in the margins. In theory it would be straightforward with
floatbut I never got it to work right.Generating figures: ASCII art and box drawing characters are too tedious for me. I'd like the static site generator to compile tikz figures to svg and embed those. I did get it partially working, but the font size and DPI is all wrong. It's important to me that the tikz text and the
$\LaTeX$text be the same size and font. Fonts are easy, but DPI is not. Arrows and borders were also rendered too thin, like less-than-a-pixel width so it's a pain to read. I suspect it's something to do with the template\documentclassor some esoteric command-line flag to set units but I never quite figured it out.This has me inspired to work on the project some more! Thanks for sharing!