LaTeX.css is a CSS library that makes your website look like a LaTeX document

  • By Vincent Dörig
  • Last update: Nov 23, 2022
  • Comments: 13

LaTeX.CSS

License: MIT latex.css on NPM

LaTeX.css is a minimal, almost class-less CSS library which makes any website look like a LaTeX document. It is based on @davidrzs' latexCSS.

Getting Started

Using the <link> tag

Add the following code in the head of your project.

<link rel="stylesheet" href="https://latex.now.sh/style.min.css" />

or use a CDN like Unpkg:

<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />

Using NPM/Yarn

NPM:

npm install latex.css

Yarn:

yarn add latex.css

Add any optional classnames to elements with special styles (author subtitle, abstract, lemmas, theorems, etc.). A list of supported class-based elements can be found here.

Languages

The labels of theorems, definitions, lemmas and proofs can be changed to other supported languages by including the following snippet in addition to the main CSS file.

<link rel="stylesheet" href="https://latex.now.sh/lang/es.css" />

and changing the html lang attribute:

<html lang="es">

Have a look at the language support page for more info and a demo of the different languages.

Contributing

Contributions, feedback and issues are welcome. Feel free to fork, comment, critique, or submit a pull request.

Acknowledgements

This project is based on David Zollikofer's project latexCSS.

Most of the CSS reset is based on Andy Bell's Modern CSS Reset.

The sample HTML5 markup test page is based on html5-test-page by @cbracco.

The idea of sidenotes was taken and adpated from Tufte CSS.

License

This project is open source and available under the MIT License.

Github

https://github.com/vincentdoerig/latex-css

Comments(13)

  • 1

    Support for dark mode

    • Make all color usage into variables
    • Override color variables with values suitable for a light text on dark background situation

    Colors are up for debate, I took the ones from https://github.com/kaisugi/HugoTeX as a starting point.

  • 2

    Add 2px blue focus-frame (accessibility) and danish language file

    Using the keyboard to navigate (tab-key and/or accessive technology) having a focus highlight is very helpfull. So, this change adds a 2px blue focus frame.

  • 3

    Remove CSS Properties [box shadows]

    Description

    I used this CDNlink on my SPA page and it worked well but for some element used as cards that have box-shadows doesn't comply with the pattern

    Solution

    I'm suggesting that on default CSS properties like box-shadow should removed

  • 4

    Turkish Language

    Can you add the tr.css file for the LaTeX.css file? I tried it myself and could not get authorization. It should be:

    :lang(tr) .theorem::before { content: 'Teorem ' counter(theorem) '. ' !important; } :lang(tr) .lemma::before { content: 'Lemma ' counter(theorem) '. ' !important; } :lang(tr) .proof::before { content: 'Kanıt. ' attr(title) !important; } :lang(tr) .definition::before { content: 'Tanım ' counter(definition) '. ' !important; }

  • 5

    Wrong code for Danish

    The ISO language code for the Danish language support is wrong. It should be da but is dk.

    Reference: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

  • 6

    Latin Modern, readability issues

    I've added latex.css to my page and without any other styling, it is quite difficult to read the text - see screenshot below. I tried three displays (2 external, 1 notebook with native resolution), Firefox and Chrome (Windows) - same result. Types are too thin, somehow blurry and too close to each other - however it doesn't seem like kerning was somehow overdone; of course, increasing font-size helped - but then font is too big obviously.

    I'm aware that you are not author of LM font itself - is there any other variant of LM font, or is there any other but similar font? (Or perhaps, could be issue on my device?)


    image

  • 7

    Improve table styles

    This is an attempt to make the tables in this library to look more like tables we see in LaTeX.

    Before

    image

    After

    image

    Same table in actual LaTeX

    image
    Add two new example tables image

    Detailed Changes

    • table does not stretch to 100% width anymore (auto width, aligned left)
    • add a thicker border above and below the table
    • add a thin border below the header/above the footer
    • add table numbering
    • add two more example tables
    • fix semantic heading of "Contents" from h3 to h2

    TODO

    • [x] decrease line-height
    • [x] figure out a way to make an x-overflow scroll when the table is larger than 100%
    • [ ] unbold header/footer (?)
  • 8

    fix counter-reset in style.css

    Multiple counter-reset assignments for the same element overwrite each other and prevent some of the counters from being reset properly; this was fixed with this commit;

  • 9

    Added smooth scrolling media query

    This is just to make the CSS library more accessible to those who have vestibular motion disorders.

    See the MDN page for the prefers-reduced-motion media query.

  • 10

    chore: wrap embed stylesheet code in `
    `

    The pull request name is pretty self-descriptive... but here's the story:

    I was using this repo the other day and I missed your embed code for style.css but instead embedded prism.css as it is wrapped in <pre> and therefore stands out more (you can see this scene in this video).

    so... committed a minor change to make the embed code also stands out more.

    I mean, after all,

    this
    

    stands out way more than this.

  • 11

    How to use latex-css locally?

    Hi I am trying to use the style.css locally, but the export results are different. I copied the content from https://latex.now.sh/style.css in an plain text file and renamed to latex.css but the appearence is quite worse.

    image

    Left: <link rel="stylesheet" href="https://latex.now.sh/style.css"> Right: <link rel="stylesheet" type="text/css" href="latex.css" />

  • 12

    Printing sidenotes

    Hello to you all!

    This is more of a question than a issue. Is there a possibility to have the sidenotes/marginnotes appear when printing? I have no idea how to enable this.

    Thank you very much!

  • 13

    Not properly typeset

    Great idea, I love it! However the most important feature of LaTeX is proper typesetting, IOW, variable spaces, etc... Any way this can be implemented? I'm not sure how HTML would really support this. Perhaps that is an upstream browser issue that someone can fix first?

    Cheers!