Writing math on the web II

This is the first follow-up to my previous post on the subject.

In this post, I will make last time’s question into a slightly more specific proposal. I will continue to take the naive approach of working within the confines of html and css. I simply haven’t had time to investigate the more advanced internet document authoring technologies that seem to be available.

Here is the current status of my vision. One would write something like this:

<html>
<script type="text/javascript" src="sam's-magic-file.js">
</script>
<body>


The script, sam's-magic-file.js will load MathJax, style sheets, and parse any “preamble” commands (discussed below). Lastly, the script will perform one key operation: convert double-newlines into paragraphs, much the way WordPress does. Other than that, I do not want the script to interfere. I would prefer it if as much of the heavy lifting as possible was handled with styles.

Next, the user can begin hacking away in the pseudo-LaTeX that I discussed last time. Here is the start of one of my sample documents (the output is shown at the end of the post).

<section>Ergodic components of Grassmann space</section>

In this section we examine the ergodic components for the homogeneous
space $Gr_k\QQ_p^n$ more thoroughly.  We begin by considering the
following simplified statement of Theorem A:

<theorem id="thm_novi">
Suppose that $n\geq3$ and let $k,l\leq n$.  Let $\Gamma\actson X$ be
an ergodic component for $SL_n(\ZZ)\actson Gr_k\QQ_p^n$, and let
$\Lambda\actson Y$ be an ergodic component for $SL_n(\ZZ)\actson Gr_l\QQ_p^n$.  If there exists a permutation group isomorphism
$\Gamma\actson X\longrightarrow\Lambda\actson Y$, then $l=k$ or
$l=n-k$.
</theorem>
...


As you can see, the word <html> at the top of the document was a misnomer, because <theorem> is not valid HTML. But the simple fact is that no browser cares. Thus, in this world you are free to use standard HTML directives such as <em>, <ul>, styles, and so on.

My stylesheet does everything it can to typeset this code. Theorems are numbered and preceded with the word “Theorem”, proofs are supplemented with a QED symbol, and so on. There really isn’t much to it!

It is also easy to use the same code as a plug-in. Just load the same script at the top of your file, and specify <div class="the-latex-code-is-here">...</div> to apply the styles and scripts to just a part of your document.

We also have to allow the user to extend the command-set like LaTeX does. For formulas, this is easy because MathJax allows you to specify a preamble:

<script type="math/tex">
\newcommand{\NN}{\mathbb N}
\newcommand{\ZZ}{\mathbb Z}
...
</script>


I would augment this by allowing the user to specify new theorem environments and a variety of style choices (AMS article vs. book) in a similar environment:

<script type="text/x-latex-config">
... ?
</script>


But I haven’t yet decided exactly how these directives should be formatted.

Finally, I must remark that CSS stylesheets aren’t quite “there” yet. For instance, it has been proposed that styles should let you specify printing directives including margins, running headers, and page numbers. But many of these features are not yet available. Here, I would grudgingly allow the use of scripts to fill in the gaps until the W3 finally gets its ideas finalized and implemented (this will be a while). This is another area where there is much to be gained by using XML and its more powerful stylesheets, XSL. However, as far as I know the trade-off would be seamless coexistence with other html content, and that seems like a big loss to me.

Have a look at the sample source and printed output of my current experiments. I haven’t handled references yet. I promise to post the code sometime soon!

1. Posted January 11, 2012 at 9:08 am | Permalink

If you could stand to use a little templating system, such as handlebars, that would allow you to define new environments and other kinds of macros, and also avoids non-standard tags, which some browsers do intermittently complain about.

I notice that your sample source contains inline macros like \emph{text}. Do you intend to keep those, or will they be replaced by the relevant HTML tags?

2. Samuel Coskey
Posted January 11, 2012 at 10:10 am | Permalink

Handlebars is interesting! I certainly accept that with something like that, I would suddenly have a LOT more power. For the moment, I’m trying to avoid itroducing “new” syntax. But this is certainly something that could be used when I run into a wall.

And yes, you are right that I would just replace \emph with <em> and so on.

Thank you for the comment!

3. Victoria Gitman
Posted January 13, 2012 at 6:34 pm | Permalink

I really love this idea! It answers pretty much every complaint I have every time I write a math post (theorem environments, extended command set, and sections). As long as there are references you are pretty much done. I want your code!

4. Rob G.
Posted August 12, 2012 at 10:02 am | Permalink

I am a math prof considering instructional value of html+css instead of latex. I was investigating techniques and found your site. Nice. Please post your code!