7 ms·
LaTeX.css – Make your website look like a LaTeX document
- vextea 2y agoSo unfortunate that justified text in browsers looks awful compared to documents generated with LaTeX (usually)....
- WillAdams 2y agoFor want of a "real" H&J algorithm, and having problematic lines identified as "overfull boxes" which need to be fixed.
- deleted 2y ago[deleted]
- xigoi 2y agoTry to make a LaTeX document that automatically reflows based on screen size and you’ll see why it’s difficult.
- fooker 2y agoThat 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.
- xigoi 2y agoThat’s the point. HTML has to support arbitrary screen sizes whereas LaTeX doesn’t, so the layout algorithms have to be more accomodating.
- eddd-ddde 2y agoBut the width of a PDF is still arbitrary isn't it? Can you just, recalculate for bigger widths?
- MrVandemar 2y agoNot 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.
- Bootvis 2y agoYou 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.
- esperent 2y agoHow 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?
- setopt 2y agoFor a book, it can take minutes. For a short document, seconds. Texpresso looks promising though, but I haven’t tried it yet.
- chrismorgan 2y agoThe 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 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 https://news.ycombinator.com/item?id=5189258>.
- WillAdams 2y agoA good example of this is Bertrand Russell's _Introduction to Mathematical Philosophy_: https://courses.umass.edu/klement/imp/ 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.
- xigoi 2y agoIt’s still just a few different sizes. A HTML website has to support every possible width.
- WillAdams 2y agoThe 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.
- jxy 2y agoThe HTML version is quite nice. Do you know how they did the LaTeX to html conversion?
- WillAdams 2y agoNo idea. Ask the folks who manage that page?
- tdjsnelling 2y agoI 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 https://github.com/tdjsnelling/microtype Demo: https://tdjsnelling.github.io/microtype/test/from-cdn/ 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 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- madphilosopher 2y agoAll 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.
- zython 2y agoWithout overfull hbox warnings this is just half the fun :(
- dredmorbius 2y agoOr: 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.)
- TeMPOraL 2y agoWell, 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.
- kreetx 2y agoIf 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!
- Semaphor 2y agoCSS Paged Media does that, but it's sadly not implemented (or only small parts) in browser.
- doerig 2y ago(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 https://github.com/vincentdoerig/latex-css/pull/62
- kleiba 2y agoThat'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.
- MrMcCall 2y agoYeah, especially that font rendering. What has it been? 30 years? 40 years? Yikes!
- deskr 2y agoI love it. It might be "old fashioned" but it's the devil you know and it ain't bad and it's very readable.
- red_trumpet 2y ago> 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.
- tmoertel 2y agoThe 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 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-20240601/sampling-with-sql.pdf https://blog.moertel.com/images/public_html/blog/pix-2024060...
- rrhjm53270 2y agoI prefer write LaTex document, compile to pdf and then convert pdf to html using pdf2htmlEX.
- enriquto 2y agoIf your .tex is simple enough, it can be converted directly to plain html using a tiny sed script.
- lxgr 2y agoDoes 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.
- i2go 2y agodid 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.
- thaumasiotes 2y ago> 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.
- deleted 2y ago[deleted]
- kibwen 2y agoWorth 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.
- thaumasiotes 2y ago> It couldn't have been, because it was designed in 1986. It was possible to read on computer screens at the time.
- kibwen 2y agoYou 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://style64.org/c64-truetype https://fontstruct.com/fontstructions/show/675155/amiga_topaz https://fontstruct.com/fontstructions/show/675155/amiga_topa...
- thrance 2y agoComputer 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.
- dghf 2y agoMLModern is a heavier version: https://ctan.org/pkg/mlmodern?lang=en https://ctan.org/pkg/mlmodern?lang=en
- WillAdams 2y agoMore importantly, it was a re-creation of Monotype Modern 8A: https://tex.stackexchange.com/questions/186512/did-knuth-actually-design-the-computer-modern-font https://tex.stackexchange.com/questions/186512/did-knuth-act...
- aboardRat4 2y agoI think it's better to avoid css unless it's strictly necessary.
- barslmn 2y agoI 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 https://omics.sbs/blog/prs/prs_calculation.html
- swyx 2y agolooks great but i foudn myself wishing that the text could be denser and smaller. you seem to have blown up the defaults.
- xboxnolifes 2y agoVery much this. I'm getting 5 words per line on my phone, with about equal parts white space and text.
- p10_user 2y agoFYI missing an `h` in Thymine label looks excellent
- deleted 2y ago[deleted]