LaTeX.css – Make your website look like a LaTeX document | Hacker News Reader

LaTeX.css – Make your website look like a LaTeX document

latex.vercel.app

196 pointsOuterVale60 comments

That's funny because the first thing I do when I write a LaTeX document is to make it look less like a (default) LaTeX document.

Yeah, especially that font rendering. What has it been? 30 years? 40 years?

Yikes!

I love it. It might be "old fashioned" but it's the devil you know and it ain't bad and it's very readable.

I don't doubt it or that it's extremely useful and mostly well-designed. I just wish its font rendering had a bit more meat on its bones.

I've never had to use it, so I don't know how it works at all (besides understanding that it's a marked-up file processing pipeline), so I'll ask: is there something deeply problematic with its font rendering tech that it has been like this for soooo long?

I mean, I can spot one of its PDFs from a mile away.

I don't know much about typesetting, but I always thought it was quite the opposite, Latex is a proper typesetting system for professional physical printing. It's actually almost everything else that looks "wrong" (besides things like InDesign).

I think it might also be because many things like browsers or MS Word have to use crude, fast algorithms for typesetting, but Latex uses complicated and slow, but much more accurate algorithms for that.

It's like if you compare a printed Word document vs. a printed Latex document it becomes very obvious. Latex looks like a newspaper or magazine, because that's just how printed text is actually supposed to look like.

Thanks for that, it makes sense.

The meat on the bones is the support for ink behaviour when using offset printing, as mentioned by sibling comments.

You need different parameters for different display/printing mechanisms

> and it's very readable

No it's not. Computer Modern is way to thin to be considered readable. This is because it was originally designed with print in mind, which used to have ink bleeding, making thin lines thicker on paper.

The Computer Modern font was designed to incorporate a "blackness" variable that controlled the thickness of its strokes. This provided a way to adjust the design for different printing processes and to accommodate, for example, ink swell or the lack thereof on modern printing devices.

Here are some scans by Raph Levien showing the vector design vs. the offset printing in Knuth’s Digital Typography vs. laser printing:

https://levien.com/type/cmr/gain.html

Presumably, the middle version is how Knuth wanted the font to appear on the page. But the bottom version is what we get when we take the digital outlines and render them on a laser printer.

Fortunately for us, several people have used the adjustable-blackness feature to make blacker renditions of Computer Modern that are designed to look good when laser printed.

MLModern is the one I prefer:

> MLModern is a text and math font family with (La)TeX support, based on the design of Donald Knuth’s Computer Modern and the Latin Modern project. It avoids the spindliness of most other Type 1 versions of Computer Modern.

For a typeset example of it in use: https://blog.moertel.com/images/public_html/blog/pix-2024060...

MLModern looks much better. I wish they would replace CModern with this as the default font.

Does it include ports of the AMS packages with extra symbols?

If only there were some way to adjust for that difference when viewed on a different type of medium, such as a high-DPI LED-backlit liquid crystal display.

Unfortunately, the web wasn't designed that way, which is why every document that you read on a website instead of on paper is illegible.

It's a shame, really. :) /s

I love it too. Very readable, very focused, no distractions. I like it so much more than all those soulless "modern" web 2.0 (or whatever) style clones. This LaTeX look is like a great suit.

Agreed, but I'd go with a great lab coat :)

On the other hand, the reflowing/small screen readability story of LaTeX is a very sad one, and no typesetting will be able to taper over that for me in 2024. Even scientists use smartphones.

Oh yes, you have a good point, old is always bad.

I am wondering how much of the hate of LaTeX document is due to the default font. Computer Modern seems to be disliked by many users of LaTeX as well. I personally am very conflicted, as I have come to identify it as the "vanilla" option so that I have lost any aesthetic sensitivity to it.

Computer Modern immediately signals to me "This was written in [Xe|Lua|]LaTeX". That alone has value; at the absolute least it tells me that the person writing it knows enough about computers to drive LaTeX to produce a compiled document.

If reviewing e.g. applications from undergraduates for a summer studentship, that signal is a subconscious hint saying 'read this a bit more closely' if nothing else.

Which is unfortunate, since the students using a different TeX font often know more about TeX.

Designers seem to prefer other fonts. That seems to be true whether they work for traditional publishers, advertising agencies, news papers, or indeed web agencies. It just does not seem to be a popular choice outside the narrow niche of people who use latex. Who are of course mostly not designers. And having worked with some great designers in recent years, I tend to follow their lead when it comes to making things look good.

But beyond me being conditioned to be bored out of my head reading scientific papers (being an ex-academic who definitely does not miss having to read lots of poorly written papers) written with latex and having that look, I shouldn't have much of an opinion on the matter.

IDK. I never had any problem reading the default font on screens, which seems to be the problem according to some commenters. It's more that the default style overall feels unappealing and space-wasteful (I get leaving margins for note-taking is a thing, but come on), and yes, also reminiscent of super-boring math stuff. And more than that still. I find myself disliking the style holistically, and can't put my finger on why exactly.

So unfortunate that justified text in browsers looks awful compared to documents generated with LaTeX (usually)....

For want of a "real" H&J algorithm, and having problematic lines identified as "overfull boxes" which need to be fixed.

Try to make a LaTeX document that automatically reflows based on screen size and you’ll see why it’s difficult.

That is not what a latex document is for.

It's like talking about reflowing a physical page.

Instead, you change the document page size and render multiple versions and switch it out based on zoom level.

That’s the point. HTML has to support arbitrary screen sizes whereas LaTeX doesn’t, so the layout algorithms have to be more accomodating.

But the width of a PDF is still arbitrary isn't it? Can you just, recalculate for bigger widths?

Not really. It's fixed at "compile time". Eg "A4" or "Letter". I guess it "changes" according to zoom level, but that's just enlarging or shrinking - no reflow required.

You could apply the LaTeX algorithm to each rendering. The rendering might jump and it would be a change from before but it can be done.

How long does a fast latex renderer take on a large document? It's been a few years since I worked with latex, but it's on the order of multiple seconds, right?

For a book, it can take minutes. For a short document, seconds.

Texpresso looks promising though, but I haven’t tried it yet.

The Knuth-Plass line-breaking algorithm is applied per paragraph; performance is typically not going to be an issue at all.

If you apply it to all paragraphs, yes, you will get pathological performance on some extreme cases—the algorithm is quadratic, if I recall correctly. But there’s nothing preventing you from trying to apply it in general, and giving up if the input is too long. So your five or ten line paragraphs get KP, and longer paragraphs get greedy.

There is absolutely nothing stopping browsers from applying Knuth-Plass. In fact, Firefox has had a bug about implementing it for 14 years <https://bugzilla.mozilla.org/show_bug.cgi?id=630181>, and there’s some useful discussion of things there. And CSS itself is finally actually going ahead with `text-wrap: pretty`, which encourages such things. Long ago, IE apparently even had it via `text-justify: newspaper` <https://news.ycombinator.com/item?id=5189258>.

You can’t ask the user of a website to fix overfull hboxes for you after they resize their browser window.

A good example of this is Bertrand Russell's _Introduction to Mathematical Philosophy_:

https://courses.umass.edu/klement/imp/

which is available in a number of sizes _and_ has the LaTeX source available showing how the various sizes are arrived at.

It’s still just a few different sizes. A HTML website has to support every possible width.

The LaTeX source may be easily edited to impart any size/proportion desired --- not quite as straight-forward as re-sizing a browser window, but the same ultimate effect.

The HTML version is quite nice. Do you know how they did the LaTeX to html conversion?

No idea. Ask the folks who manage that page?

I had a crack at a solution to this problem recently. It's pretty basic in terms of what it can do and not the most performant.

Code: https://github.com/tdjsnelling/microtype Demo: https://tdjsnelling.github.io/microtype/test/from-cdn/

Even better, there is the new CSS `hyphens: auto;`. Browser & language support is not yet 100% though.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

All the print books on my bookshelf use fully justified text. In contrast, my preference for ebooks are to render them as left-justified. So I think I intuitively arrived at a practice that matches your conclusion about justified text in browsers.

did not read the whole document. just the proof of theorem 1 and it has a minor error. it is not obvious that C(n) != x. that is because it is not true. to see that, consider a map C(n) such that

C(n) = 0.10000000...

that is: c_1(n) = 1 and c_i(n) = 0 for all other i.

If you let \overline{c}_1(n) = 0 and c_i(n) = 9 for all other i, then we have that c_i(n) != \overline{c}(c)_i(n) for all i but C(n) = x.

This is a common mistake people make. To fix it, one needs to be more careful when defining \overline{c}_i.

> To fix it, one needs to be more careful when defining \overline{c}_i.

I think the usual way to fix it is actually to be more careful when defining C(n) - that is, to specify that the value of C(n) is a sequence of digits, with the sequences in 1:1 correspondence with [0,1], not itself a value that belongs to the interval [0,1]. Then you can just say that trailing zeroes, or trailing nines, aren't allowed, giving you a unique representation for every value in [0,1]. At that point c-bar will work as defined.

If printing to pdf looked better and if it could do footnotes then this would go a long way before actually needing to switch to latex!

CSS Paged Media does that, but it's sadly not implemented (or only small parts) in browser.

(author of the project here) we tried extensively [1], but unfortunately concluded that obtaining consistent outputs across various platforms, not to mention across different versions of the same browser, is not feasible at present -- if you want a nicely typeset PDF document, use the real LaTeX (or an alternative such as Typst).

[1]: https://github.com/vincentdoerig/latex-css/pull/62

Worth noting that Computer Modern, the typeface that is characteristic of TeX, was never designed to be used for reading on a computer screen. It couldn't have been, because it was designed in 1986. It's intended to be used on the printed page. And regardless of what people think of its legibility in print, I don't think it's a hot take to say that it's kind of hard to read on a screen. Too thin and light for my liking.

> It couldn't have been, because it was designed in 1986.

It was possible to read on computer screens at the time.

You wouldn't be using Computer Modern for reading on a Commodore 64 or Amiga 1000 of the era. The resolution of the displays was just too low, on OSes designed for bitmap fonts with no antialiasing or subpixel rendering. Here's the sort of font you'd be looking at, and their primitiveness is not because their designers liked the retro aesthetic:

https://style64.org/c64-truetype

https://fontstruct.com/fontstructions/show/675155/amiga_topa...

Computer Modern is actually a family of fonts, generated using Metafont, free software also created by Donald Knuth (who made TeX). There are thicker variants, and you can generate more at will.

I still think it is one of the most elegant font out there, although I probably wouldn't recommend using it on a webpage.

MLModern is a heavier version: https://ctan.org/pkg/mlmodern?lang=en

More importantly, it was a re-creation of Monotype Modern 8A:

https://tex.stackexchange.com/questions/186512/did-knuth-act...

I use this style for my blog. It looks and works great for my case. Here is an example page: https://omics.sbs/blog/prs/prs_calculation.html

looks great but i foudn myself wishing that the text could be denser and smaller. you seem to have blown up the defaults.

Very much this. I'm getting 5 words per line on my phone, with about equal parts white space and text.

FYI missing an `h` in Thymine label

looks excellent

Without overfull hbox warnings this is just half the fun :(

Or: we need scroll-wrapper for printed documents.

(I'm now thinking of various pop-up book elements, sliders, etc., which could be used as dynamic online elements are in HTML.)

Well, it's not real LaTeX unless embedded images come out wrong size and 1-10 pages before or after they were inserted in the source.

I prefer write LaTex document, compile to pdf and then convert pdf to html using pdf2htmlEX.

If your .tex is simple enough, it can be converted directly to plain html using a tiny sed script.

Does that work well in practice? It seems like you'd throw away all (remaining, given that LaTeX freely mixes style and semantics in practice already) separation between style and content that way.

I think it's better to avoid css unless it's strictly necessary.

Reply on news.ycombinator.com