49

I think that updating these converters would help TeX stay relevant as a document processing language. In these last few years, web development has really skyrocketed. CSS3 has brought along a lot of support for rich typography on the web as well as hyphenation using TeX algorithms. There are also a lot of APIs and tools for typography and math. The web is catching up with typesetting; it will never be the same as PDF, but it's worth updating these tools for better conversion of LaTeX to web documents.

There are many advantages to web pages

  • Loads faster than PDF
  • Available across devices and browsers (no need for a PDF reader), including mobile
  • By using the MathJax API, you can have high-quality typography for math expressions, with scaling and easy exporting of LaTeX and MathML
  • By embedding/popup/linking math expressions to WolframAlpha, equations retain their symantic encoding, and expressions/documents become interactive
  • You can link to specific parts of the document externally and internally (you could convert TeX tags to support this)
  • Tikz and metapost pictures can be translated to SVG, enabling adding good looking and scale-able diagrams and illustrations
  • Tool tips, alt-tags, hover-icons, animations, etc. which could potentially aid usability/accessibility

I'm new to TeX and StackExchange, and I don't have the programming chops to develop something like this, but maybe someone out there is interested in a project like this. Eitan Gurari's software is orphaned and needs someone to take on the challenge of continuing projects like this.

(The tag TtH might also belong here, but I couldn't add it. It's a single C file program to convert TeX to html)

Edit: Based on the current responses, I just want to clarify my question. TeX is for pretty-printing. I haven't seen a single example of converted TeX->HTML actually look good, and math is usually converted into ugly HTML or images. It's probably possible to bundle resources to take the output of the tools and style them, but I was hoping to at least see an example of this done attractively--or, better yet--a converter that actually pretty-prints a webpage similar to how LaTeX does to DVI/PDF.

Improve this question
3
  • 6
    I find this a very unclear question, despite the detailed list. There are lots of ways to use TeX/LaTeX to produce web pages. All of my posts on the TeX-SX blog (see link at bottom of page) were written in LaTeX and then converted. This article: ncatlab.org/publications/published/Leinster2011 was written in LaTeX and converted. There are lots of reasons why taking an arbitrary (La)TeX document, shoving it through an interpreter, and slapping it on the web will result in something looking awful. But it's not hard to produce something nice if you start out right.
    – Andrew Stacey
    Feb 8, 2012 at 20:43
  • 7
    it may be an unclear question, but the answer is simple: there are too many users generating demand, and not enough "doers". if you don't like the situation, examine your reasons for not getting involved with work on these things...
    – wasteofspace
    Feb 8, 2012 at 22:34
  • Thanks @AndrewStacey, the article you linked to is the best example I've seen so far. And it does use CSS and javascript. I guess I'm just curious if this whole implementation could be easily automated into a one step process, and where I could find out how to do that
    – MercurialMadnessMan
    Feb 8, 2012 at 22:55

7 Answers 7

Reset to default
21

Lot of the things that are on your list are already implemented:

  • tex4ht can produce xhtml with mathml
  • tex4ht can produce SVG figures from tikz/pgf figures
  • METAPOST already outputs SVG out of the box
  • Linking to parts of your documents is done by the hyperref package, for pdf and html/xhtml.

Connecting to Wolfram|Alpha is surely not a "web standard", and may be difficult, since math in TeX is mostly described in a "presentation", rather than semantic way. On the other hand, it should be possible to do it for each individual equation using the hyperref package. I do not really see any way to do it automatically.

I know it is possible to produce tooltips and include animations in a pdf document, I am not sure how would that work when converting to html.

Improve this answer
8
  • Sorry, I didn't mean to imply that Wolfram|Alpha is a standard by any means. But linking equations to it allows some interactivity, and further options for understanding the math and exporting the expression to other formats like mathematica and plain text. You describe several ways in which LaTeX could be pretty-printed online, but I'm sort of confused why I haven't seen it done anywhere, considering that TeX's purpose is pretty-printing.
    – MercurialMadnessMan
    Feb 8, 2012 at 19:49
  • 6
    I find it a bit simplistic to say that TeX's purpose is "pretty-printing".
    – Andrew Stacey
    Feb 8, 2012 at 20:44
  • 3
    Some of the algorithms you are talking about (kerning, ligatures, inter-letter and inter-word spacing, line breaking and paragraph formatting, hyphenation) are irrelevant on the web, since they are actually performed in the browser at the moment the document is displayed, so using a TeX engine to produce the html document would really have no effect on those. Also, the CSS model of layout is sufficiently different from the way LaTeX does it to make a direct translation very hard at best. The individual techniques (SVG, MathML, ...) are used, but are often hampered by browser incompatibility.
    – Jan Hlavacek
    Feb 9, 2012 at 4:43
  • 4
    How much has tex4ht been developed since Eitans death? The last stable release was done by him in 2008.
    – Martin Schröder
    Feb 14, 2012 at 20:54
  • 2
    @MartinSchröder it is updated regularly, you can see links to source repository and issue tracker at the project page
    – michal.h21
    Oct 22, 2016 at 19:00
15

Good question—I’m really not sure why not. I really do not like MathJax at all: it interferes with page loading and is vastly inferior (at least on the screen) to a carefully-constructed and aligned PNG image that’s been rendered by TeX.

I’ve had very positive experiences lately using the Latin Modern fonts via CSS’s @font-face for program listings. When regular text is interleaved with high-resolution PNG images (for formulas too complex to convert to straight text), the results are seamless.

I’m rendering the PNG images with Ghostscript using 4-bit anti-aliasing at 16x actual size, then resampling that down to 4x actual size, then specifying the height and width of the image to be 25% of the 4x version, making it pixel-perfect on the screen at the default size, as the web browser automatically scales the 4x version back down to 1x. When printed, the images are at 4x screen resolution or about 400 dpi.

The PNG images are then internally embedded in the HTML document itself, rather than being linked as externally embedded resources. This makes for extremely fast page loading with no jumping around as the page loads. For example, the following <img> tag represents \sqrt{\pi} embedded as a size of 88 × 64 pixels, but displayed at a size of 22 × 16 pixels. Modern browsers automatically scale this with the text and it looks beautiful at all sizes.

<img
width=22
height=16
style="vertical-align:-23.6%;"
title="\sqrt{\pi}"
src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAFgAAABACAAAAAC7e+8eAAADoUlEQVRYhbWYTUgbQRTH/4mp0UrVBjHW
fhukam2Lih/FVqmFisWCRWmR9lAR0YMIPRSRHooELyJF6EEoIhRBBBFEKIIXQQgUSkAQCgFBEAQPgrAg
5CBsZ/Yr2dnNOEOyc/G9lzc/Z2fy3vw3UOVG7CaERhiS4LAYVxr8C8gPi4wOSfAtYFUsUw68DlQIpsqB
q4CfXoC3gZBorhS4DpjzAvwHKBZOlgE3AlEvwPtAkXi2BLgdmPQCnACCF16Au4AJca44+MiHK+degHuB
IQmuMPjEjzzFC/Ag8EGGKwpW8uA/8QI8BLyV4gqCzwPwHXkBHgdeyXHFwBdB4MAL8CTQIckVAxcB/xzB
o7HqCvcbunJcEBwFWh3BYR9HVShi4GLgLxNKPuSpFb/YiueBx2ysnsctXhADlwE7TOgdWVX3Ku0dCsJ6
KI5HtpTLwYvAAyZEhFbTsW7+QJ9ufMNHSXAl8NseOQ2mGlIHlnSjE4uu4NlnSXcuUVX3mdBLdFl2EEb3
D2HfBay0AJ/dwfeBdXtkDyHr7tswtzgJ5tk1N1aCTFf7FnCDCcXr45bdbTa9NRQ6wVH9u/7dDVwDZu/s
I4hl3RhhZSjU8+coKadgN4G6C5RxuCuAcTRNuMeAEyG0K0vakjedMxuAeQ64FZWGVYpaBtzun9biZNQ5
JsaBEg5X8aFft8jZNTPgY+2bPq0teY+d+RSY4YCnYG7xJtDGgPU/tJUDL5iJiUtkYLm1xTNAoyuYnCoZ
PuYi7gS+crhE4JtbPOioexN85qdke7kf+lDAk4FtwHvD7En9DwasvqbggK2ue/ky8IR8/dcM+4lj0yzw
gXZ8U+kT/XwZOEz2znygajLX/nCpCm+m4GtpH5GmO8LhqoXAXdOOOMogBd7Rlrxg+Wd5CPBk4CzJHjad
WuKMZgDTt0PgtuV+Ys+SGfR1PWY6rcSJZALrdb1teEoA/lMOd4PkFljeAJ1qS0/votfpp+a9SVRVP2/B
5GUyTcXQfcGXTGC9rhOanQzyZeAeTU39ELBPXVt/Swfrda2rP6KqengLJqVma+1XbefDgNVRTW2cGomH
PDB99llm6nJGsF7X9B2G7Eonj6uqc302jjoxELP59ivwDQXnX2iqyikDpYYdrNf1tDrnaK9ZgtUWCi4l
IsEhA7ME72pLJjvSkCXXIbEihmLczTV4RefWZMt1isKQBt7KPThKuVVZc11kbAEcMjA34DHgTvZcF7AS
qdjJAfg/gMLtzD7H7dsAAAAASUVORK5CYII="/>

Here below is another example at various text sizes. The \sqrt{a^2+b^2} is an image; the rest is text. To my eyes, it is impossible to tell the difference between the embedded high-resolution images and the text (other than the spacing clues, of course; TeX does kerning much better). These are screen captures at actual size from an HTML document:

Size -2

size -2

Size -1

size -1

Normal Size

size +0

Size +1

size +1

Size +3

size +3

Size +6

size +6

So anyway, things can be made to look great on a webpage—and images certainly don’t have to be ugly or slow to load. I don’t know why embedded high-resolution images are not commonplace by now.

The secret is (1) to oversample by a large amount and then (2) to darken the rendered text after downsampling (I use a gamma adjustment factor of 0.3 for this).

I really wish Wikipedia would do this. Due to the use of low-resolution images, math formulas on Wikipedia look pixellated when the font size is englarged or when pages are printed:

wikipedia

Improve this answer
8
  • I'll admit, those look fantastic! Do these PNG images you're using contain alpha (transparency)? And it almost sounds as if you did much of this manually. Any tips for converting LaTeX to HTML and having these high-res PNG images embedded?
    – MercurialMadnessMan
    Feb 13, 2012 at 4:34
  • 1
    Not transparent as I'm using these on white “paper” background, although I imagine PNG transparency isn’t difficult to achieve with this type of rendering. None of this is manual; it's all automatically generated, including the calculation of the vertical alignment for the <img> tag.
    – Todd Lehman
    Feb 13, 2012 at 6:34
  • 1
    @ToddLedhman: Is your tool available somewhere?
    – adl
    Feb 14, 2012 at 21:58
  • 1
    @adl: It's just a Perl script I threw together. It doesn't actually convert TeX to HTML; rather, it converts a custom markup into either TeX or HTML.
    – Todd Lehman
    Feb 15, 2012 at 2:16
  • 3
    @adl: I have posted a better solution here: [tex.stackexchange.com/questions/44486/…, and it includes a simple Perl program (source) for doing all of this correctly.
    – Todd Lehman
    Feb 24, 2012 at 12:15
13

You might want to look at NIST's LaTeXML, That does a particularly nice job of getting mathml out of LaTeX

http://dlmf.nist.gov/

is generated from (highly stylised) latex source.

Improve this answer
1
  • Impressive! I'll look into it and see how difficult the customization is.
    – MercurialMadnessMan
    Feb 8, 2012 at 23:03
12

LuaTeX may well offer some real potential here because you can access the deepest internal structures of TeX: node lists. I'm not 100% sure, but once a mathematical object has been turned into a set of hlists and vlists inside LuaTeX you may not have access to sufficient information to generate MathML, but you do have enough positional and font information to create SVG (I posted a brief outline on my blog). However, LuaTeX also lets you hook into TeX at an earlier stage of math processing through a LuaTeX callback called mlist_to_hlist. I have not personally explored this at all BUT it may provide sufficient information from which MathML could be generated: best to ask the LuaTeX developers on that one.

Improve this answer
9

plasTeX is a python-based framework for converting LaTeX to other markup languages (xhtml, epub, docbook xml). I use it daily. By default it uses dvipng to render math and picture environments. However, it is not very difficult to render to mathml using an external tool of your choice + plasTeX.

Some items on your list such as tool-tips can be automated using the built-in SimpleTal template language that plasTeX uses.

As you mention, mathjax can display either mathml or LaTeX math in browsers; there's no conversion necessary to display LaTeX math.

Improve this answer
1

If you can run it on Chrome (since it uses the streaming fetch API), https://people.math.osu.edu/fowler.291/latex/ is a dynamic example of the output of dvi2html. A static example with some TikZ is at https://people.math.osu.edu/fowler.291/dvi2html/

The main pain point with rendering DVI in HTML is positioning text at the baseline. dvi2svg is another approach.

Improve this answer
0

It seems to me that tools, which only use a subset of LaTeX, are generally better in generating modern style HTML. Have a look at

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .