Sadly, 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:
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).
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].
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`.
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.
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.
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].
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
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.
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.
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.
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.
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).
> 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 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.
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.
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).
Just use pandoc, then you can write your documents in markdown (with inline GraphViz and PlantUML!) and have them converted to LaTeX/pdf automatically.
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:
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.
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.
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.
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.
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.
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?
> 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.
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.
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.
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.
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!
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.
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.
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.
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).