
Show HN: LaTeX.css – Make your website look like a LaTeX document - doerig
https://latex.now.sh
======
e12e
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:

[https://developer.mozilla.org/en-
US/docs/Web/CSS/hyphens](https://developer.mozilla.org/en-
US/docs/Web/CSS/hyphens)

[https://www.chromestatus.com/feature/5642121184804864](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/](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).

~~~
mpetroff
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](https://www.w3.org/TR/css-
text-4/#text-wrap) [2] [https://github.com/w3c/csswg-
drafts/issues/672](https://github.com/w3c/csswg-drafts/issues/672) [3]
[https://github.com/robertknight/tex-
linebreak](https://github.com/robertknight/tex-linebreak)

~~~
mpetroff
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/](https://mpetroff.net/files/pre-calculated-line-breaks-demo/) [2]
[https://mpetroff.net/2020/05/pre-calculated-line-breaks-
for-...](https://mpetroff.net/2020/05/pre-calculated-line-breaks-for-html-
css/)

~~~
e12e
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.

~~~
mpetroff
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.

~~~
e12e
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.

------
jjice
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.

~~~
DavidVoid
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...](https://www.typografie.info/3/topic/22238-ist-die-computer-
modern-wirklich-zu-d%C3%BCnn/) Translated:
[https://translate.google.com/translate?sl=de&tl=en&u=https%3...](https://translate.google.com/translate?sl=de&tl=en&u=https%3A%2F%2Fwww.typografie.info%2F3%2Ftopic%2F22238-ist-
die-computer-modern-wirklich-zu-d%C3%BCnn%2F)

~~~
chrismorgan
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](https://mbtype.com/pdf/equity-type-specimen.pdf#page=5)

~~~
flobosg
I had no idea one could link directly to PDF pages. Thanks for the tip!

~~~
astroalex
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](https://www.google.com/search?q=graph+theory+pdf)

~~~
rcfox
I think they were referring to the #page=5 part of the URL.

~~~
flobosg
Yes, that's exactly what I meant.

~~~
astroalex
Ohhh, that makes a lot of sense -- sorry if my comment came off as
patronizing.

------
fefe23
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.

~~~
pseingatl
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?

~~~
cpach
Is that font available for free?

------
gwern
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](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.)

------
bryanrasmussen
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.

~~~
hugey010
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).

~~~
sah2ed
> _to HTML pages with various css applied (I often use github 's)._

Mind sharing the subset of GitHub CSS that you use?

------
giantrobot
I've spent a not insignificant amount of time trying to make my LaTeX
documents _not_ look like LaTeX documents. To each their own!

------
csarven
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/](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](https://dokie.li/acm-sigproc-sp) (ACM - authoring guidelines)

* [https://dokie.li/lncs-splnproc](https://dokie.li/lncs-splnproc) (LNCS - authoring guidelines)

* [https://csarven.ca/linked-research-decentralised-web](https://csarven.ca/linked-research-decentralised-web)

* [https://csarven.ca/dokieli-rww](https://csarven.ca/dokieli-rww)

* [https://linkedresearch.org/ldn/](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.

------
gitgud
If you're a fan of this, you might like; _" WordTeX - A WYSIPCTWOTCG
Typesetting Tool"_

[1]
[https://www.youtube.com/watch?v=jlX_pThh7z8](https://www.youtube.com/watch?v=jlX_pThh7z8)
(video)

~~~
yesenadam
WYSIPCTWOTCG = What You See Is Pretty Close To What Other Tools Can Get

------
LifeIsBio
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.

~~~
TheRealPomax
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.

------
DominikPeters
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...](https://texdoc.net/texmf-
dist/doc/latex/booktabs/booktabs.pdf)

------
niknetniko
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.

------
fermienrico
There is also a Jupyter Notebook theme that uses Computer Modern:
[https://github.com/neilpanchal/spinzero-jupyter-
theme](https://github.com/neilpanchal/spinzero-jupyter-theme)

------
mattlondon
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...

------
enriquto
It is a bit dishonest to call it "css" when most of the heavy lifting (the
math) is done by javascript.

~~~
ShitOpinionAcc
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.

[1]: [https://www.mathjax.org](https://www.mathjax.org)

------
tekkk
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%);
    

I think that grey was kinda neutral. But anyway, that's just my opinion.
Otherwise it looks nice.

~~~
doerig
Thanks, changed [https://github.com/vincentdoerig/latex-
css/releases/tag/v.1....](https://github.com/vincentdoerig/latex-
css/releases/tag/v.1.0.2)

------
chrismorgan
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.

~~~
doerig
Thanks, it should be better now.

------
perl4ever
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?

------
rdevnull
how is it different to
[https://github.com/davidrzs/latexcss](https://github.com/davidrzs/latexcss) ?

------
romwell
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

~~~
JadeNB
> 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.

~~~
dhosek
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.

------
snek
Related:
[https://github.com/AndrewBelt/WiTeX](https://github.com/AndrewBelt/WiTeX) or
my modified version here:
[https://gist.github.com/devsnek/9689917c8095febbf48b91c2f8f5...](https://gist.github.com/devsnek/9689917c8095febbf48b91c2f8f5a9af)

------
qznc
Some years ago, I tried to replicate the ACM paper style in LaTeX:
[http://beza1e1.tuxen.de/acm_html/test.html](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.

------
scythmic_waves
Why do some of the equations show up as rendered by MathJax, but others still
read `$\mathbb{R}$`?

~~~
doerig
Honestly, I really don't know. MathJax has been very janky for some reason. I
have tried using KaTeX ([https://katex.org](https://katex.org)) but couldn't
get it to work properly and some equations just looked "off".

~~~
TheRealPomax
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.

~~~
adimitrov
That's actually pretty cool. Do you have an automated setup to do that, or is
it manual for every "post"?

~~~
TheRealPomax
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.

------
pgcj_poster
The line-height is higher than I'm accustomed to with most documents typeset
in LaTeX.

------
nailer
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.

------
smabie
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!

------
dig1
There is also
[https://davidrzs.github.io/latexcss/](https://davidrzs.github.io/latexcss/)

------
nicofcurti
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.

------
ggm
Yes, the familiar tables-reduced-below-functional outcome. Why did latex hate
TBL so much?

------
znpy
I also wastes space on both right and left, just like plain LaTeX!

------
throwlaplace
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.

~~~
jjice
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.

------
diablo1
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.

~~~
kleiba
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.

~~~
thomaspark
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/2015/01/pubcss-formatting-academic-publications-
in-html-css/)

[https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-
we...](https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html)

