What is the best way to embed LaTeX in a webpage?
https://stackoverflow.com/questions/116054
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm not asking about converting a LaTeX document to html.
What I'd like to be able to do is have some way to use LaTeX math commands in an html document, and have it appear correctly in a browser. This could be done server or client side.
Solution
MediaWiki can do what you are looking for. It uses Texvc (http://en.wikipedia.org/wiki/Texvc) which "validates (AMS) LaTeX mathematical expressions and converts them to HTML, MathML, or PNG graphics." Sounds like what you are looking for.
Check out Wikipedia's article on how they handle math equations here: http://en.wikipedia.org/wiki/Help:Formula. They also have an extensive reference on LaTeX and pros/cons of the different rendering types (PNG/MathML/HTML).
MediaWiki uses a subset of TeX markup, including some extensions from LaTeX and AMS-LaTeX, for mathematical formulae. It generates either PNG images or simple HTML markup, depending on user preferences and the complexity of the expression. In the future, as more browsers are smarter, it will be able to generate enhanced HTML or even MathML in many cases. (See blahtex for information about current work on adding MathML support.)
More precisely, MediaWiki filters the markup through Texvc, which in turn passes the commands to TeX for the actual rendering. Thus, only a limited part of the full TeX language is supported; see below for details. ...
Pros of HTML
- In-line HTML formulae always align properly with the rest of the HTML text.
- The formula's background, font size and face match the rest of HTML contents and the appearance respects CSS and browser settings.
- Pages using HTML will load faster.
Pros of TeX
- TeX is semantically superior to HTML. In TeX, "x" means "mathematical variable x", whereas in HTML "x" could mean anything. Information has been irrevocably lost. This has multiple benefits:
- TeX can be transformed into HTML, but not vice-versa. This means that on the server side we can always transform a formula, based on its complexity and location within the text, user preferences, type of browser, etc. Therefore, where possible, all the benefits of HTML can be retained, together with the benefits of TeX. It's true that the current situation is not ideal, but that's not a good reason to drop information/contents. It's more a reason to help improve the situation.
- TeX can be converted to MathML for browsers which support it, thus keeping its semantics and allowing it to be rendered as a vector.
- TeX has been specifically designed for typesetting formulae, so input is easier and more natural, and output is more aesthetically pleasing.
- When writing in TeX, editors need not worry about browser support, since it is rendered into an image by the server. HTML formulae, on the other hand, can end up being rendered inconsistent of editor's intentions (or not at all), by some browsers or older versions of a browser.
OTHER TIPS
I prefer MathJax over solutions that choose to render images (which causes aliasing problems).
MathJax is an open source Javascript render engine for mathematics. It uses CSS and Webfonts instead of images or flash and can render LaTeX or MathML. That way you don't have problems with zoom and it's even screenreader compatible.
I once developed a jQuery plugin that does in fact this: jsLaTeX
Here's the simplest example of how it can be used:
$(".latex").latex();
<div class="latex">
\int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi
</div>
The above will generate the following LaTeX equation on your page:
The Demo Page of the plugin contains more code examples and demos.
Historically, rendering the LaTeX and extracting an image has been your best bet for cross-platform, cross-browser math stuff. More and more, MathML is becoming a reasonable alternative. Here's an online converter that will emit MathML from Tex markup, which you can then embed in your webpage. I know Gecko-based browsers like Firefox and Camino play nice with MathML, as does Opera. IE doesn't work out of the box, but there are plugins available (like this one).
Texvc is a great find! The vanilla HTML output should work well if you're mostly interested in superscripts/subscripts/italics/common symbols, but for more complex things, be aware that the most popular math-oriented sites out there (e.g. Wolfram) generate images, so there may be only so much you can do if you're interested in cross-browser compatibility :-(
I read all the answers here, and I'm surprised no one mentioned the convertion from PDF to HTML. If you use pdf2htmlEX it will create perfect webpages from a pdf. You just have to compile your latex to pdf (pdflatex).
By default it generates a single html file, with the contents of your PDF made out of CSS, javascript and html. I tried a lot of tools to convert latex to html and this is by far the best and easiest solution I found.
You could try LaTexRenderer. I don't know if it's the best, but it does work.
I'm starting to look into this myself and it seems things have evolved. I have come across this comparison demo of KaTeX and MathJax.
Long story short (as of this writing):
- Fractions inside a matrix run into each other in KaTeX, but not MathJax (see "cross product")
- Inside the square (or nth) root symbol, exponents and nested square roots seem to run up against the horizontal top line (see "Repeating Fractions" and "nth root".)
- MathJax has slightly bolder and larger font, KaTeX is slightly leaner.
But perhaps most decisive of all, I found that the total MathJax processing for the page averaged to 1674 ms for three runs. In contrast, KaTeX averaged 128 ms, which is an order of magnitude better!
There are some other points of comparison to consider when looking through their respective websites:
- The KaTeX main website claims to support most, but not all, of LaTeX. They list their supported functions here. MathJax expresses some of its limitations as well. Though it's hard knowing from a quick skim of these who in the end has "better" support. Some blogs I've run across say KaTeX has less support, but others have said that KaTeX has improved support significantly in recent years.
- The MathJax website advertises support of MathML for both input and output. Some KaTeX issues on its github site here and here indicate that they support MathML for output, but not for input (I don't know much about MathML, but it at least seems important if you want to help out users with visual disabilities).
- KaTeX renders synchronously, so it doesn't reflow the page (part of what makes it faster). But in exchange it temporarily locks the browser.
- StackOverflow is a partner of MathJax (see here). It's used on some StackExchange sites, though not on StackOverflow itself due to page load time performance. In contrast, KaTeX was developed by Kahn Academy.
I would definitely encourage you to look at MathML if that fits what you're looking for but a little work with JsTeX could give you everything you need.
