Converting ConTeXt document to HTML

Question

For LaTeX, I used to rely on htlatex, latex2html, or more rarely tth. I know that we can use XML with ConTeXt, although I have no experience with this, and that Pandoc let us use Markdown syntax and provides several output formats (including ConTeXt and (X)HTML), as well as templates facilities.

However, does there exist a 'tex->html' converter for ConTeXt working out of the box, i.e. one that would accept a raw ConTeXt file (that can produce a PDF file) and transform it to HTML (single or multi-page)?

Answer 1

ConTeXt does not directly output XHTML, it outputs XML. However the current browsers (at least Opera, Firefox and Chromium) are able to display XML correctly. The XML can be styled using CSS.

When you want real XHTML, you have to transform the XML to XHTML using external tools. ConTeXt standalone ships with an example file: texmf-context/tex/context/base/export-example.{tex,css}. Here is a modified and shortened version of this file for demonstration.

% file example.tex

\setupexport      [width=470pt, hyphen=yes]
\setupbackend     [export=example.xml, css=example.css]
\setupbodyfont    [dejavu]
\setupinteraction [state=start]
\setuplayout      [width=middle]
\setupwhitespace  [big]

\definedescription   [description] [width=broad, alternative=hanging]
\definemathalignment [gather]      [n=1,align={middle}]

\starttext

\startchapter [title=Example]

  \startparagraph
    \input ward
  \stopparagraph

  \startparagraph
    You'll find more information on the ConTeXt garden.
      \startfootnote
        The ConTeXt garden is the ConTeXt wiki.
      \stopfootnote
    Another option is to contact the mailing list.
  \stopparagraph

  \startplacefigure [title=Some cows]
    \startcombination[3*1]
      {\externalfigure[cow.png][width=3cm]} {medium}
      {\externalfigure[cow.png][width=4cm]} {large}
      {\externalfigure[cow.png][width=2cm]} {small}
     \stopcombination
  \stopplacefigure

  \startdescription {Ward}
    \input ward
  \stopdescription

  \startformula
    x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
  \stopformula

  \starttabulate [|l|r|p|]
    \NC And \NC here  \NC comes       \NC \NR
    \NC a   \NC table \NC \input ward \NC \NR
  \stoptabulate

\stopchapter

\stoptext

And here comes the corresponding CSS file, that is responsible for the styling in the browser.

/* file example.css */

document {
  font-family  : "DejaVu Serif", serif ;
  font-size    : 12pt ;
  line-height  : 18pt ;
  max-width    : 50em ;
  padding      : 1em ;
}

paragraph, p {
  display       : block ;
  margin-top    : 0.5em ;
  margin-bottom : 0.5em ;
}

section {
  display : block ;
}

sectioncontent {
  display       : block ;
  margin-top    : 1em ;
  margin-bottom : 1em ;
}

section[detail="chapter"], section[detail="title"] {
  margin-top    : 3em ;
  margin-bottom : 2em ;
}

section[detail="chapter"]>sectionnumber {
  display      : inline-block ;
  margin-right : 1em ;
  font-size    : 3em ;
  font-weight  : bold ;
}

section[detail="chapter"]>sectiontitle, section[detail="title"]>sectiontitle {
  font-size   : 3em ;
  font-weight : bold ;
}

description {
  display       : block ;
  margin-bottom : 1em ;
  margin-top    : 1em ;
}

descriptiontag {
  float        : left ;
  clear        : left ;
  margin-right : 1em ;
  text-align   : left ;
  font-weight  : bold ;
}

tabulate {
  display       : table ;
  margin-top    : 1em ;
  margin-bottom : 1em ;
  margin-left   : 2.5em ;
}

tabulaterow {
  display : table-row ;
}

tabulatecell[align="middle"] {
  display       : table-cell ;
  text-align    : center ;
  padding-right : 1em ;
}

tabulatecell[align="flushleft"] {
  display       : table-cell ;
  text-align    : left ;
  padding-right : 1em ;
}

tabulatecell[align="flushright"] {
  display       : table-cell ;
  text-align    : right ;
  padding-right : 1em ;
}

tabulatecell {
  display       : table-cell ;
  text-align    : left ;
  padding-right : 1em ;
}

combination {
  display       : table ;
  margin-top    : 0em ;
  margin-bottom : 0em ;
}

combinationpair {
  display       : table-cell ;
  padding-right : 1em ;
}

combinationcontent {
  display    : table-row ;
  text-align : center ;
}

combinationcaption {
  display     : table-row ;
  padding-top : 1ex ;
  text-align  : center ;
}

float {
  display       : block ;
  text-align    : center ;
  margin-top    : 1em ;
  margin-bottom : 1em ;
  margin-left   : 2.5em ;
}

floatcaption {
  display    : block ;
  margin-top : 0.5em ;
  color      : rgb(60%,60%,0%) ;
}

floatlabel {
  font-weight  : bold ;
  margin-right : 1em ;
}

floatnumber {
  font-weight : bold ;
}

formula {
  display       : block ;
  margin-top    : 1em ;
  margin-bottom : 1em ;
  margin-left   : 2.5em ;
}

sup {
  font-size      : xx-small ;
  line-height    : 0 ;
  vertical-align : top ;
}

Here is a screenshot from the PDF version:

And this is a screenshot from the browser:

As you can see, the style is pretty close. It can be further optimized through tweaking the CSS file. Included graphics, of course, have to be present in a format that the browser can handle.

Hyphenation is also present. ConTeXt inserts soft hyphen (0x00AD) characters where hyphenation is possible, which enables the browser to justify the paragraphs.

The resulting XML can be displayed by browsers and e-book readers. However, not all e-book reader are compatible, especially when it comes to math. Browsers also have their problems with displaying math.