12 ms·
Show HN: LaTeX.css – Make your website look like a LaTeX document
- fermienrico 6y agoThere is also a Jupyter Notebook theme that uses Computer Modern: https://github.com/neilpanchal/spinzero-jupyter-theme https://github.com/neilpanchal/spinzero-jupyter-theme
- diablo1 6y agoWhat 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.
- throwlaplace 6y agothere 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.
- diablo1 6y agoYeah 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)
- doerig 6y agoOf 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?
- mastry 6y agoI don’t see anything wrong about targeting a small audience...or doing something just because you enjoy it.
- throwlaplace 6y agolol 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.
- thanksforfish 6y agoDid 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.
- TheRealPomax 6y agoUnless 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.
- KKPMW 6y agoI 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 http://fmwww.bc.edu/RePEc/bocode/t/transint.html
- jraph 6y agoMe 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.
- kleiba 6y agoBut 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 6y agoOn 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-publications-in-html-css/ https://thomaspark.co/2015/01/pubcss-formatting-academic-pub... https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-we...
- TheRealPomax 6y agoEver 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.
- throwlaplace 6y agohmm 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 6y agoI 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.
- jjice 6y agoI 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.
- nbrempel 6y agoI feel the same way. I had a good laugh at your Stockholm Syndrome comment!
- atrettel 6y agoI 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: https://xkcd.com/1301/ https://xkcd.com/1301/
- elSidCampeador 6y agoI loved Computer Modern till I read your post. Now I wanna move to Fourier for good - thanks for that!
- TheRealPomax 6y agoMaybe have a look at XeLaTeX (the unicode-by-default LaTeX), which lets you just use any modern font you have installed, using normal syntax.
- improbable22 6y ago
- niknetniko 6y agoThis 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.
- pgcj_poster 6y agoThe line-height is higher than I'm accustomed to with most documents typeset in LaTeX.
- giantrobot 6y agoI've spent a not insignificant amount of time trying to make my LaTeX documents not look like LaTeX documents. To each their own!
- bryanrasmussen 6y agoSo 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.
- qubex 6y agoClever!
- hugey010 6y agoI 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 6y ago> to HTML pages with various css applied (I often use github's). Mind sharing the subset of GitHub CSS that you use?
- pantalaimon 6y agoJust use pandoc, then you can write your documents in markdown (with inline GraphViz and PlantUML!) and have them converted to LaTeX/pdf automatically.
- LifeIsBio 6y agoThis 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 6y agoThat 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.
- scythmic_waves 6y agoWhy do some of the equations show up as rendered by MathJax, but others still read `$\mathbb{R}$`?
- doerig 6y agoHonestly, 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 6y agoI 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.
- rubatuga 6y agoDo you have a repo by any chance?
- TheRealPomax 6y agoI have many, many repos, but in this case we're talking https://github.com/pomax/Bezierinfo-2 https://github.com/pomax/Bezierinfo-2
- grizzles 6y agoIf you use next.js with eg. katex this will happen by default.
- 6y ago
- DominikPeters 6y agoLooks 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.pdf https://texdoc.net/texmf-dist/doc/latex/booktabs/booktabs.pd...
- e12e 6y agoSadly, 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 6y agoThe 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
- chrismorgan 6y agoIt’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 https://bugzilla.mozilla.org/show_bug.cgi?id=630181 (it hasn’t gone anywhere, of course, because it’s hard; but it shows willingness).
- 6y ago
- dig1 6y agoThere is also https://davidrzs.github.io/latexcss/ https://davidrzs.github.io/latexcss/
- chrismorgan 6y agoOne 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 6y agoThanks, it should be better now.
- romwell 6y agoThis 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 6y ago> 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 6y agoIndeed. 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.
- perl4ever 6y agoI 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?
- gitgud 6y agoIf 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 6y agoWYSIPCTWOTCG = What You See Is Pretty Close To What Other Tools Can Get
- mattlondon 6y agoNicely 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...
- fefe23 6y agoI 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.
- cpach 6y agoMy fave is New Century Schoolbook :)
- pseingatl 6y agoWhich is the preferred font of the Supreme Court of the United States, btw.
- pseingatl 6y agoTimes 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 6y agoIs that font available for free?
- enriquto 6y agoIt is a bit dishonest to call it "css" when most of the heavy lifting (the math) is done by javascript.
- ShitOpinionAcc 6y agoAgreed, 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
- nicofcurti 6y agoI'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.
- deleted 6y ago[deleted]
- snek 6y agoRelated: https://github.com/AndrewBelt/WiTeX https://github.com/AndrewBelt/WiTeX or my modified version here: https://gist.github.com/devsnek/9689917c8095febbf48b91c2f8f5a9af https://gist.github.com/devsnek/9689917c8095febbf48b91c2f8f5...
- rdevnull 6y agohow is it different to https://github.com/davidrzs/latexcss https://github.com/davidrzs/latexcss ?
- nailer 6y agoNeeds 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.
- gwern 6y agoOne 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.)
- ggm 6y agoYes, the familiar tables-reduced-below-functional outcome. Why did latex hate TBL so much?
- smabie 6y agoNot 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!
- qznc 6y agoSome 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.
- csarven 6y agoThere 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.
- tekkk 6y agoHey, 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 6y agoThanks, changed https://github.com/vincentdoerig/latex-css/releases/tag/v.1.0.2 https://github.com/vincentdoerig/latex-css/releases/tag/v.1....
- znpy 6y agoI also wastes space on both right and left, just like plain LaTeX!