Show HN: LaTeX.css – Make your website look like a LaTeX document

Sadly, css&#x2F;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.<p>Additionally, it took a long time for Chrome to even implement:<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;hyphens" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;hyphens</a><p><a href="https:&#x2F;&#x2F;www.chromestatus.com&#x2F;feature&#x2F;5642121184804864" rel="nofollow">https:&#x2F;&#x2F;www.chromestatus.com&#x2F;feature&#x2F;5642121184804864</a><p>Sadly, even with auto, there&#x27;s way too much ragged right in html, or too irregular word spacing. Even with tricks like inserting soft hyphens.<p>A list apart long held up the pretty much gold standard, but it&#x27;s still not as good as plain latex (not sure about plain tex, as I&#x27;ve never had occasion to use it).<p>See also:<p><a href="https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;the-look-that-says-book&#x2F;" rel="nofollow">https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;the-look-that-says-book&#x2F;</a><p>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).

I hated the look of LaTeX documents when I first started university, especially the font. I don&#x27;t know what happened, but I eventually fell in love Computer Modern. Something about it just looks great. Maybe it&#x27;s just Stockholm Syndrome.

I noticed two big omissions:<p>1. No automatic numbering (and no automatic table of contents generation).<p>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.<p>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 &quot;proper typesetting&quot; department.<p>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.<p>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.

One bit of irony: LaTeX.css can&#x27;t display math without... JS.<p>(However, there is a solution if you&#x27;re using Pandoc! Compile via texmath and then <a href="https:&#x2F;&#x2F;github.com&#x2F;mathjax&#x2F;MathJax-node" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mathjax&#x2F;MathJax-node</a> 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&#x27;s very nice. texmath doesn&#x27;t support all of LaTeX, of course, but if you need a block or a diagram, there&#x27;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&#x27;ve spent a not insignificant amount of time trying to make my LaTeX documents <i>not</i> 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&#x27;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&#x27;t work well.<p>In <a href="https:&#x2F;&#x2F;dokie.li&#x2F;" rel="nofollow">https:&#x2F;&#x2F;dokie.li&#x2F;</a> , HTML is key - semantic and sufficiently &quot;flexible&quot;. CSS is secondary. That is why we can generally throw different CSS at it without touching the underlying HTML pattern. Examples:<p>* <a href="https:&#x2F;&#x2F;dokie.li&#x2F;acm-sigproc-sp" rel="nofollow">https:&#x2F;&#x2F;dokie.li&#x2F;acm-sigproc-sp</a> (ACM - authoring guidelines)<p>* <a href="https:&#x2F;&#x2F;dokie.li&#x2F;lncs-splnproc" rel="nofollow">https:&#x2F;&#x2F;dokie.li&#x2F;lncs-splnproc</a> (LNCS - authoring guidelines)<p>* <a href="https:&#x2F;&#x2F;csarven.ca&#x2F;linked-research-decentralised-web" rel="nofollow">https:&#x2F;&#x2F;csarven.ca&#x2F;linked-research-decentralised-web</a><p>* <a href="https:&#x2F;&#x2F;csarven.ca&#x2F;dokieli-rww" rel="nofollow">https:&#x2F;&#x2F;csarven.ca&#x2F;dokieli-rww</a><p>* <a href="https:&#x2F;&#x2F;linkedresearch.org&#x2F;ldn&#x2F;" rel="nofollow">https:&#x2F;&#x2F;linkedresearch.org&#x2F;ldn&#x2F;</a><p>* ...<p>You can dynamically switch the CSS view from the dokieli menu (top-right) or from your browser&#x27;s native controls eg. view the ACM authoring guidelines using the LNCS CSS and vice-versa.

If you&#x27;re a fan of this, you might like; <i>&quot;WordTeX - A WYSIPCTWOTCG Typesetting Tool&quot;</i><p>[1] <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=jlX_pThh7z8" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=jlX_pThh7z8</a> (video)

This is neat!<p>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.<p>I don’t know anywhere near enough css to guess what’s going on.

Looks great, though I wish the table style followed the recommendations of the \usepackage{booktabs} documentation [1] more closely.<p>[1] <a href="https:&#x2F;&#x2F;texdoc.net&#x2F;texmf-dist&#x2F;doc&#x2F;latex&#x2F;booktabs&#x2F;booktabs.pdf" rel="nofollow">https:&#x2F;&#x2F;texdoc.net&#x2F;texmf-dist&#x2F;doc&#x2F;latex&#x2F;booktabs&#x2F;booktabs.pd...</a>

This is pretty cool.<p>However, I do agree with some of the other contents that the style is a little dry for a webpage.<p>I think it would be very useful as the &quot;print&quot; 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: <a href="https:&#x2F;&#x2F;github.com&#x2F;neilpanchal&#x2F;spinzero-jupyter-theme" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;neilpanchal&#x2F;spinzero-jupyter-theme</a>

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 :)<p>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 &quot;css&quot; when most of the heavy lifting (the math) is done by javascript.

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&#x27;t think you need one for the pre-tags. Just use a stronger background color and it will look a lot less &quot;blocky&quot; if that&#x27;s the correct term.<p>Eg.<p><pre><code> padding: 1rem 1.4rem; max-width: 100%; overflow: auto; &#x2F;* border: 1px solid hsl(210, 15%, 49%); *&#x2F; border-radius: 4px; background: hsl(210, 28%, 93%); </code></pre> I think that grey was kinda neutral. But anyway, that&#x27;s just my opinion. Otherwise it looks nice.

One brief note on the markup: please specify the width and height attributes on the &lt;img&gt;, <i>especially</i> 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&#x27;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...<p>If you really want serifs, why is it better than Times?<p>Also, has anyone ever tried doing scientific papers with a sans-serif font?

how is it different to <a href="https:&#x2F;&#x2F;github.com&#x2F;davidrzs&#x2F;latexcss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;davidrzs&#x2F;latexcss</a> ?

This is great!<p>Putting anything mathematics-related on the Web and making it look half-decent is such a chore. Thank you for making it easier!<p>MathJax and KaTeX are a great thing, but there&#x27;s a contrast between formulas and the rest of the document unless you use something like this.<p>The comments here as of now fall into two groups:<p>- &quot;Who needs it and why?&quot;<p>People who want to present or discuss mathematics and proofs on the Web. If you ask, you&#x27;re not one of them.<p>- &quot;This does not exactly like LaTeX!&quot;<p>Duh. It does not. Only TeX looks like TeX.<p>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.<p>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.<p>This is a compromise.<p>TL;DR: great work, much needed and appreciated

Related: <a href="https:&#x2F;&#x2F;github.com&#x2F;AndrewBelt&#x2F;WiTeX" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AndrewBelt&#x2F;WiTeX</a> or my modified version here: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;devsnek&#x2F;9689917c8095febbf48b91c2f8f5a9af" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;devsnek&#x2F;9689917c8095febbf48b91c2f8f5...</a>

Some years ago, I tried to replicate the ACM paper style in LaTeX: <a href="http:&#x2F;&#x2F;beza1e1.tuxen.de&#x2F;acm_html&#x2F;test.html" rel="nofollow">http:&#x2F;&#x2F;beza1e1.tuxen.de&#x2F;acm_html&#x2F;test.html</a><p>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 line-height is higher than I&#x27;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&#x27;t your fault. Nice work!

There is also <a href="https:&#x2F;&#x2F;davidrzs.github.io&#x2F;latexcss&#x2F;" rel="nofollow">https:&#x2F;&#x2F;davidrzs.github.io&#x2F;latexcss&#x2F;</a>

I&#x27;m a bit biased since I worked as a Research Lead a while back, but I LOVE ITTTTTTT.<p>I&#x27;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&#x27;t so shit at webdev or i would take this and turn plug it into jekyll&#x27;s markdown compiler. i guess it shouldn&#x27;t be that hard.

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.