Show HN: LaTeX.css – Make your website look like a LaTeX document
latex.now.shSadly, css/html hyphenation is still pretty awful. And AFAIK on mobile kerning is pretty far off too. So to me it feels more like a latex parody than homage, unfortunately.
Additionally, it took a long time for Chrome to even implement:
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
https://www.chromestatus.com/feature/5642121184804864
Sadly, even with auto, there's way too much ragged right in html, or too irregular word spacing. Even with tricks like inserting soft hyphens.
A list apart long held up the pretty much gold standard, but it's still not as good as plain latex (not sure about plain tex, as I've never had occasion to use it).
See also:
https://alistapart.com/article/the-look-that-says-book/
Unfortunately it appears the current ala styling is worse than it used to be (probably due to a move to use modern css, which is understandable - but only highlights the problem).
The problem is that CSS uses greedy line breaks. In theory, this should improve once browsers implement CSS Text Module Level 4, specifically the `pretty` value for the `text-wrap` property [1][2]. Until then, we're stuck with poor-quality typesetting, or JavaScript solutions [3].
[1] https://www.w3.org/TR/css-text-4/#text-wrap [2] https://github.com/w3c/csswg-drafts/issues/672 [3] https://github.com/robertknight/tex-linebreak
It’s not that CSS does that, but that browsers (all of them) do that. CSS has no opinion on the matter until text-wrap, where `text-wrap: stable` would dictate the current behaviour.
As an example showing that browsers have long been open to doing things better, this bug was opened against Firefox nine years ago, to implement Knuth-Plass: https://bugzilla.mozilla.org/show_bug.cgi?id=630181 (it hasn’t gone anywhere, of course, because it’s hard; but it shows willingness).
This had me wondering about whether it was possible to use pre-calculated line breaks to implement improved text justification in current browsers. I was able to come up with a demo [1][2] that does so, although it falls back to default line breaks in Safari due to lack of support for `text-align-last`.
[1] https://mpetroff.net/files/pre-calculated-line-breaks-demo/ [2] https://mpetroff.net/2020/05/pre-calculated-line-breaks-for-...
Ho-hum :) I'm slightly torn between admiration and horror:
> The key is to wrap all the potential line breaks (inserted via ::after pseudo-elements) and hyphens in <span> elements that are hidden by default with display: none;. Media queries are then used to selectively show the line breaks specific to a given column width.
Doesn't look like you compared with simply inserting soft hyphens - last I looked, that made columns bearable in browsers, although still not as good as proper line breaking.
I have `hyphens: auto` set for the browser default comparison in the demo, which is roughly equivalent to inserting soft hyphens for Firefox (where I was doing most of the development), as well as for Chrome on Android and macOS.
While browser hyphenation (either auto or soft hyphens) is definitely an improvement over no hyphens for narrower column widths, I think it generally makes things worse for wider columns, since it frequently adds unnecessary hyphens.
Edit: I updated the demo to use soft hyphens for the browser default comparison so the text is hyphenated in all browsers.
OK, I suspect Firefox hyphens auto may have improved since I last checked - at that time whatever I used (aspell?) seemed better at finding potential word breaks than whatever Firefox did (and getting Firefox to do sane word splitting on non-English was a bit of a quest).
Anyway, thank you for this - it's sad that we don't have anything really usable in the browsers still - but also nice to be able to work around the issue somewhat.
Given the emphasis on typesetting I’m surprised LaTeX.css opted for rendering speed [1] over kerning [2]
[1]: https://github.com/vincentdoerig/latex-css/blob/3d5c1e9/styl...text-rendering: optimizeSpeed; text-rendering: optimizeLegibility;Thank you for this comment. I honestly didn't give it much thought at all when I copied it from the CSS reset [1] I used. I'll change it to `optimizeLegibility` asap.
[1]: https://github.com/hankchizljaw/modern-css-reset/blob/master...
Awesome. I like the project and the classless approach. Will PR if I stumble across anything else.
I hated the look of LaTeX documents when I first started university, especially the font. I don't know what happened, but I eventually fell in love Computer Modern. Something about it just looks great. Maybe it's just Stockholm Syndrome.
The problem is that it's much too thin and therefore hard to read on computer screens. I'm sure it looks great on paper printed with the old Xerox laser printers that were around when it was made, but in its current form it's just way too thin to be read on a screen.
Someone on a German forum made a wider version of it which (imo) looks much better [1].
[1] https://www.typografie.info/3/topic/22238-ist-die-computer-m... Translated: https://translate.google.com/translate?sl=de&tl=en&u=https%3...
I strongly agree on the “too thin” point. On screen I find it an awful font, almost as bad as half the 300-weight sans-serifs too many people love to use on their websites. Computer Modern does look better printed, especially on less-accurate printers that thicken what they print.
Related: the serif font Equity comes in two grades to compensate for such types of printers (though both grades are thicker than Computer Modern), and discusses the rationale for this feature: https://mbtype.com/pdf/equity-type-specimen.pdf#page=5
I had no idea one could link directly to PDF pages. Thanks for the tip!
Chrome & other browsers have had PDF reading capabilities for a long, long time. I actually can't remember a time when you couldn't view a PDF inside Chrome/Firefox.
You might also be interested to know that Google indexes PDFs. For example: https://www.google.com/search?q=graph+theory+pdf
I think they were referring to the #page=5 part of the URL.
Yes, that's exactly what I meant.
Ohhh, that makes a lot of sense -- sorry if my comment came off as patronizing.
Use "filetype:pdf" in the search to get PDF files only, not mentions of them.
My recollection is that Computer Modern didn't look very good on old laser printers, as their resolution just wasn't high enough to handle the detail of the glyphs. It was crafted for digital phototypesetting systems with a resolution of 1200dpi or more, and 300dpi laser printers couldn't do it justice.
It depended on the laser printer. It's funny that the poster mentioned Xerox laser printers in particular because cm looked especially bad on them: There were two competing approaches to laserprinting. One was write black where a laser was used to add charge to the parts of the drum that should be black. The other (used by Xerox and perhaps others) was write white where the whole drum was charged and the laser was used to remove charge from the parts that should be white. In either case, the pixel was a little bigger than the actual 1/300in x 1/300in square that was to be drawn so it resulted in CM coming out even more spindly on write white laser printers. Neenie Billawalla came up with a modification to the MF source code for CM to allow for increasing the darkness of the fonts as well as some other fine-tuning. (https://tug.org/TUGboat/tb08-1/tb17billawala.pdf)
As I recall, there were occasional other issues with running MF on the CM sources at low resolutions and it was often necessary to just tell MF to continue at the error prompt to generate the font (when Tom Rokicki's dvips incorporated auto-running MF to generate missing PK files for specific resolutions, I think it ran it with a default setting of ignoring errors).
Those 1980s Xerox laser printers were real beasts. The 87xx/97xx series printers were prone to rolling over (crashing) on TeX print jobs since downloading fonts to the printer was not fully supported. The first dvi driver for the Xerox printers actually required pre-installing font sets on the printer and only certain combinations of fonts could appear in a single document. I don't think the 27xx series printers were ever capable of handling TeX output.
The heavier version looks better, but this involves messing with Metafont, which generates bitmaps. (And sadly his sample PDF links have died.)
I don't know of a way to heavier outline fonts. I believe the commonly used versions aren't in fact derived smoothly from Metafont, but either fitted to the bitmaps, or drawn by hand over them. That would have been a good time to correct this sad mistake.
This is why I always change the font to times
Same, except instead of falling in love with Computer Modern, I went "oh hey, XeLaTeX lets me use fonts in a sane way" and started typesetting with modern OpenType fonts instead. So I'd argue there's at least a good chunk of Stockholm syndrome there.
Same. I particularly like Linux Libertine, enough so that I make Firefox use it everywhere, even (especially?) where the page designer wanted sans.
Sadly, mobile Firefox does not support that, so HN on Android is relentlessly sans.
Even if the UI is not exposed, it’s all there in about:config and should work:
browser.display.use_document_fonts = 0
font.name.serif.x-western = Linux Libertine
font.name.sans-serif.x-western = Linux Libertine
Thank you, I had already done that. (Well, "Droid Serif".) For some reason it has no visible effect.
I never got the "Linux Libertine O" fonts to work in my phone. I suspect it doesn't like the file format.
I think it's because the font is correlated with higher-than-average quality for random docs one finds on the web.
Very true -- interesting when the barrier to using the tool signifies a certain level of professionalism and investment in wanting the paper to look and read right.
However, there is a part of the curve where random failed grad student and retired professors become conspiracy cranks and email you half-baked theories about the shape of the universe, typeset in Latex -- and those get through the filter unfortunately.
Many cryptocurrency “whitepapers” take advantage of the trust for this format
This psychological baggage was precisely why I chose it for body copy on my blog. It’s a sort of an intellectual dogwhistle.
I think a lot of people go through a life cycle of Computer Modern. I originally was indifferent, but once I learned LaTeX I used it since it was the default and it signaled to people that I knew LaTeX. Now I prefer Utopia/Fourier instead. Computer Modern seems to "thin", in my opinion, but I still use it on occasion. Some colleagues of mine really love it, though.
I can see why some people like it since it's the default font for a lot of technical documents and seeing it often signifies a certain level of "quality". The documents generally look better than Word documents, for example. Moreover, if an author took the time to learn LaTeX, it is easy to assume that they know what they are talking about. This is a form of "honor by association" (opposite of guilt by association fallacy).
Relevant XKCD:
Nice! https://tug.org/FontCatalogue/utopia-fouriermath/ I've been away from TeX/LaTeX typesetting for a long time. That's immediately appealing.
I loved Computer Modern till I read your post. Now I wanna move to Fourier for good - thanks for that!
Maybe have a look at XeLaTeX (the unicode-by-default LaTeX), which lets you just use any modern font you have installed, using normal syntax.
Does the arxiv accept xetex yet? That's one constraint which kept me away.
If it doesn't, someone needs to raise a stink. It's been in TeX Live for over a decade now, there is no excuse for not supporting it.
Officially? No.
> Anything that relies on something other than TeX or (PDF)LaTeX will fail. At this time arXiv does not support processing with: XeTeX and its variants including LuaTeX, LyX, or PDFTeX. [0]
However, you'll frequently see papers with:
> Comments: PDF file generated using XeLaTeX/XeTeX.
Such as [1], where the author would prefer submitting a PDF-only than jump through the hoops to make it work under standard LaTeX.
I use XeLaTeX! Just wasn't aware of Fourier and Utopia.
I feel the same way. I had a good laugh at your Stockholm Syndrome comment!
I hate the lack of composability of LaTeX code. What works in one environment may just break in another.
I don't care for Computer Modern serif, but I have a soft spot for Computer Modern Sans Serif [1].
It's the default font in Beamer, and I find when I make it the default font for non-serious publications, it looks really clean and modern. I especially like its rounded edges -- makes it look Web 2.0ish.
I disliked Computer Modern enough that after experimenting with various free fonts, I actually purchased Michael Spivak's MathTime Professional 2 Complete fonts, and then I use a nice Times-like font.
Michael Spivak absolutely loathes CM. I remember trying to make the case for at least a few characters of the design to him poolside during one of the 80s TUG conferences and he wasn't having it.
Me too. I particularly hated the lowercase 'x'. Today, I get triggered like a Pavlov's dog just by seeing LaTeX fonts.
The font looks god awful on my screen. Changing everything to Roboto in the linked page made it 100x more pleasant to read.
I noticed two big omissions:
1. No automatic numbering (and no automatic table of contents generation).
2. Latex will indent the first line of each paragraph (except the first one in a run). This is the reason why it gets away with very little padding between paragraphs.
Having written my share of Latex, I have always wondered why people are focusing on math and formulas. That is the least of what Latex brings to the table. Most documents have no need for formulas but are massively underserved in the "proper typesetting" department.
I remember hacking a Latex CSS many years ago when CSS was only half as powerful as it is now. I had to use some Javascript for the table of contents generation though.
Personally, I find the Computer Modern font the least attractive thing about TeX. I always substitute either Times Roman if the size of the resulting PDF is important, or Linux Libertine or so if not.
Times Roman was designed for narrow newspaper columns. If you're not writing/printing in narrow newspaper columns, there are many other choices out there.
How about a nice Janson?
Is that font available for free?
My fave is New Century Schoolbook :)
Which is the preferred font of the Supreme Court of the United States, btw.
One bit of irony: LaTeX.css can't display math without... JS.
(However, there is a solution if you're using Pandoc! Compile via texmath and then https://github.com/mathjax/MathJax-node can create a static HTML+CSS+fonts page, which aside from looking the same, runs far faster than loading Mathjax. This is what I do on gwern.net. It's very nice. texmath doesn't support all of LaTeX, of course, but if you need a block or a diagram, there's lots of Pandoc plugins to call a TeX install of some sort and generate an SVG or PNG.)
So then if you use a html2pdf tool you can generate a pdf people will think was done with LaTeX! Here I wasted all that time learning LaTeX to impress people.
I write solely in markdown and use pandoc with other tools to generate the best file-type for the audience. Business folks get .doc or .pdf. For technical folks it varies on the situation: anything from the raw markdown, to LaTeX styled pdf, to HTML pages with various css applied (I often use github's).
> to HTML pages with various css applied (I often use github's).
Mind sharing the subset of GitHub CSS that you use?
Just use pandoc, then you can write your documents in markdown (with inline GraphViz and PlantUML!) and have them converted to LaTeX/pdf automatically.
Clever!
I've spent a not insignificant amount of time trying to make my LaTeX documents not look like LaTeX documents. To each their own!
There is an ocean of CSS that mimic off the shelf LaTeX or journal-specific layouts. They're almost entirely one-off attempts depend on a particular HTML structure to have the CSS work. Introducing new CSS layouts to work on the same HTML generally doesn't work well.
In https://dokie.li/ , HTML is key - semantic and sufficiently "flexible". CSS is secondary. That is why we can generally throw different CSS at it without touching the underlying HTML pattern. Examples:
* https://dokie.li/acm-sigproc-sp (ACM - authoring guidelines)
* https://dokie.li/lncs-splnproc (LNCS - authoring guidelines)
* https://csarven.ca/linked-research-decentralised-web
* https://csarven.ca/dokieli-rww
* https://linkedresearch.org/ldn/
* ...
You can dynamically switch the CSS view from the dokieli menu (top-right) or from your browser's native controls eg. view the ACM authoring guidelines using the LNCS CSS and vice-versa.
If you're a fan of this, you might like; "WordTeX - A WYSIPCTWOTCG Typesetting Tool"
[1] https://www.youtube.com/watch?v=jlX_pThh7z8 (video)
WYSIPCTWOTCG = What You See Is Pretty Close To What Other Tools Can Get
This is neat!
One small thing I noticed is that in the Binomial theorem, “k=0” is hidden by sigma, unless I zoom in a little. If I zoom back out afterwards, it’s fine until I start scrolling again.
I don’t know anywhere near enough css to guess what’s going on.
That part's actually not the .css stylesheet, but MathJax's conversion result. I run a website with over 150 formulae, at which point client-side MathJax becomes impossible (unless you're okay with a page taking 2 minutes to fully load due to formula-by-formula conversion) so I actually use _real_ LaTeX (XeLaTeX, technically) to convert maths to .svg files and include those instead.
Looks great, though I wish the table style followed the recommendations of the \usepackage{booktabs} documentation [1] more closely.
[1] https://texdoc.net/texmf-dist/doc/latex/booktabs/booktabs.pd...
This is pretty cool.
However, I do agree with some of the other contents that the style is a little dry for a webpage.
I think it would be very useful as the "print" style for articles or blog posts, without having to pipe through pandoc: most browsers support print to pdf.
There is also a Jupyter Notebook theme that uses Computer Modern: https://github.com/neilpanchal/spinzero-jupyter-theme
Nicely done - it instantly reminded me of that feeling of deep dreading when coming across a latex document so it looks like this is fairly spot on :)
Not sure what it is, perhaps PTSD from uni but something about latex docs bring on really bad feelings...
It is a bit dishonest to call it "css" when most of the heavy lifting (the math) is done by javascript.
Agreed, the CSS is basically just importing the Latin Modern font and doing some spacing and font-size specifications. Not wanting to be mean, but there's nothing special about it. The credit should go to MathJax [1] which is rendering the math.
Hey, nice work. As a webdev who has had to do designer work, I just noticed a small minor thing you could maybe change to make the style better. I myself too sometimes trip on the correct use of borders, and in this case I don't think you need one for the pre-tags. Just use a stronger background color and it will look a lot less "blocky" if that's the correct term.
Eg.
padding: 1rem 1.4rem;
max-width: 100%;
overflow: auto;
/* border: 1px solid hsl(210, 15%, 49%); */
border-radius: 4px;
background: hsl(210, 28%, 93%);
Thanks, changed https://github.com/vincentdoerig/latex-css/releases/tag/v.1....
One brief note on the markup: please specify the width and height attributes on the <img>, especially if you want to use the loading=lazy attribute, so that the browser gets its aspect ratio right.
Thanks, it should be better now.
I always liked the standard appearance of monospaced type in LaTeX, but not the regular proportional serif text. It's a kneejerk reaction, but thinking about why, I notice that one not so subjective issue is that parts of the letters are just too thin for a relatively low resolution screen, presumably because they were designed for laser printing...
If you really want serifs, why is it better than Times?
Also, has anyone ever tried doing scientific papers with a sans-serif font?
how is it different to https://github.com/davidrzs/latexcss ?
This is great!
Putting anything mathematics-related on the Web and making it look half-decent is such a chore. Thank you for making it easier!
MathJax and KaTeX are a great thing, but there's a contrast between formulas and the rest of the document unless you use something like this.
The comments here as of now fall into two groups:
- "Who needs it and why?"
People who want to present or discuss mathematics and proofs on the Web. If you ask, you're not one of them.
- "This does not exactly like LaTeX!"
Duh. It does not. Only TeX looks like TeX.
You know what else TeX does? It takes forever to compile, and the nice-looking result is a PDF that most people will be too lazy to download.
So, we have the ArXiV. And if your website is not the ArXiV, linking to PDFs is far from ideal. Static generation is a chore.
This is a compromise.
TL;DR: great work, much needed and appreciated
> You know what else TeX does? It takes forever to compile
What are you compiling, and what are your expected and actual times? It's certainly fast enough for me, although I mostly compile article-length documents.
Indeed. I remember the first time I ran TeX on an SGI workstation in the 90s. I thought it didn't run because the compilation ran so fast the screen didn't scroll.
Related: https://github.com/AndrewBelt/WiTeX or my modified version here: https://gist.github.com/devsnek/9689917c8095febbf48b91c2f8f5...
Some years ago, I tried to replicate the ACM paper style in LaTeX: http://beza1e1.tuxen.de/acm_html/test.html
The biggest problem is floating figures. ACM papers have a copyright notice on the first page at the bottom of the left column. I have no clue how to do that with CSS.
Why do some of the equations show up as rendered by MathJax, but others still read `$\mathbb{R}$`?
The reason this is happening here is because the customization telling mathjax to regard `$...$` as an inline equation occurs immediately after the script tag loading mathjax. Reordering these lines fixes this.
Honestly, I really don't know. MathJax has been very janky for some reason. I have tried using KaTeX (https://katex.org) but couldn't get it to work properly and some equations just looked "off".
I had to give up on both: they seem great until your page needs more than 10 formulae and it starts to take quite a lot of seconds for your page to finish loading for folks. Instead I switched to preprocessing my pages to extract latexy blocks, literally run them through latex and pdf2svg to turn them into clean SVG image and replace the on-page latex code with presized <svg> elements: now your content doesn't jump around while loading (because the browser already knows how much space the image will take up), everyone sees the same thing (no browser quirks around MathML etc) and because it's SVG, positioning and scaling is trivial.
That's actually pretty cool. Do you have an automated setup to do that, or is it manual for every "post"?
I could trivially automate it so that it runs as part of CI/CD, but that's honestly more work than just running `npm run build` ever time I write a new chapter.
If you use next.js with eg. katex this will happen by default.
Do you have a repo by any chance?
I have many, many repos, but in this case we're talking https://github.com/pomax/Bezierinfo-2
The line-height is higher than I'm accustomed to with most documents typeset in LaTeX.
Needs more bitmap fonts for that authentic metafont look. The Windows 95 font rendering theme on HN recently used a technique of rendering then recapturing the render.
Not bad, though the spacing and kerning are notably inferior. LaTeX would never have that many hyphens, though I suppose it isn't your fault. Nice work!
There is also https://davidrzs.github.io/latexcss/
I'm a bit biased since I worked as a Research Lead a while back, but I LOVE ITTTTTTT.
I'm gonna try and build a proper webpage like a personal blog using this.
Yes, the familiar tables-reduced-below-functional outcome. Why did latex hate TBL so much?
I also wastes space on both right and left, just like plain LaTeX!
hmm i wish i weren't so shit at webdev or i would take this and turn plug it into jekyll's markdown compiler. i guess it shouldn't be that hard.
I don't know too much about Jekyll, but I assume you can just find a template project and swap out the style sheet this this one.
What so it just styles your site to look like a dry academic paper? What use case does this have? I imagine someone out there really needs this and the target audience is small.
But don't most academic papers actually look very different from this? Usually, conferences and journals provide style files that look very different from this website.
I see out-of-the-box latex looks mostly in shorter student reports - although even there, you often get more modern looking styles.
On a side-note, I made a thing a few years back that does academic papers with CSS, with examples of ACM and IEEE format:
https://thomaspark.co/2015/01/pubcss-formatting-academic-pub...
https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-we...
I don't know about everyone but for me there is this weird effect style has on how serious I think the text is.
When I read something written in the style of a medium post I sub-consciously think of the material as being shallow. While reading this type of LaTeX style I would start taking it more seriously. But the texts with most serious look to me are non-formatted pages, like the ones on danluu.com or even plain text posts like this one: http://fmwww.bc.edu/RePEc/bocode/t/transint.html
Me too. Your comment perfectly nails it. I'd guess with a wet finger that it is learned: our brains probably look for clues to quickly assess the quality / trustworthiness of a document. This is why style is pretty important: it certainly affects a lot many people's perceptions.
By the way, this is also why I used serious words like "brain" and "assess" and avoided typos: to make my comment look trustworthy. I had to put a front warning in terms of "wet finger" to lower that a bit though. The Hacker News style and context already make it feel far too scientific already.
For texts like in your link, I automatically expect they are written in the 90s by some very clever person and when I find some that are from the 2000s or later, I think "wow, this is actually new!".
What would be your impression with such a text written in Comic Sans? I would probably be completely lost I think.
Ever seen any science prof's course subject pages, with those fantastic ascii formulae, 1992 nav buttons, and grey background with "color:blue" links? Not everything needs this, but some things need this kind of almost trivial improvement to their presentation.
there are plenty of people that appreciate "dry academic papers" - they're called academics. there are also plenty of blogs written by academic types that aim for minimalism.
Yeah but it's very edge-casey and not everyone's an academic so the target audience must be very small. Otherwise why write the CSS for it. If I wanted to write a CSS library I would be aiming for a large audience (but that's just me; always trying to have maximum impact)
Of course the audience this is intended for is pretty niche. Afaik there is only one other LaTeX-like library (the one I built my version upon) that achieves such a style. I don’t expect my version to blow up like bootstrap or whatever at all. Getting a maximum impact with a CSS library nowadays is extremely hard imo. I mean, we already have thousands of CSS libraries that are pretty much the same, right?
Unless your audience pays you, where's the ROI? And without an ROI, what's the point in going for maximum impact? That's just wasting time and effort that can be spent on other things: apply a stylesheet, and move on to the things that actually pay off.
I don’t see anything wrong about targeting a small audience...or doing something just because you enjoy it.
Did you have any audiences in mind? Were you thinking a one size fits all or just a larger niche?
Success of CSS themes depends a bit on fashion, so there's some risk that a popular theme will implode by getting too popular and then feel bland, overused. Or shifts in preferred styles making the theme look dated.
The LaTeX approach is sort of an anti-style. It's a uniform. I'd bet that this CSS theme will send the same message (I am an academic, and this content is for academics) for many years. A uniform should actually gain popularity as its used. Although you are correct that the reach of this theme may be limited to just academics who create websites.
lol what kind of person doubles down on a mistake/error/bias after being shown that error? do you really want me to now go and show you how many academics there are that publish papers using latex? or even publish papers in latex and publish to blogs? you probably will still claim for some reason that your initial guess was correct.
just take your L and move on.