LaTeX.CSS
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
<link>
tag
Using the 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.
Support for dark mode
Colors are up for debate, I took the ones from https://github.com/kaisugi/HugoTeX as a starting point.
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.
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 removedTurkish 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; }
Wrong code for Danish
The ISO language code for the Danish language support is wrong. It should be
da
but isdk
.Reference: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
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?)
Improve table styles
This is an attempt to make the tables in this library to look more like tables we see in LaTeX.
Before
After
Same table in actual LaTeX
Add two new example tables
Detailed Changes
TODO
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;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.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 embeddedprism.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,
stands out way more than
this
.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.
Left:
<link rel="stylesheet" href="https://latex.now.sh/style.css">
Right:<link rel="stylesheet" type="text/css" href="latex.css" />
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!
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!