DrZ.ac

misplaced, punctuation

LaTeX Theorem-like Environments for the Web

permalink

Although MathJax offers LaTeX-like mathematical typesetting for the web, there are some other constructs from LaTeX that would be useful for a mathematical blog. For instance, the amsthm package allows you to define environments for theorems, proofs, lemmas, definitions, and so on. However, MathJax doesn’t implement these higher-level formatting features. And rightly so; any formatting on the web should be done with CSS.

Looking to see if anyone has attacked this problem, I came across Samuel Coskey’s post where he suggests using custom HTML tags as a solution. However, it seems to be a bad idea to use custom HTML tags. A more robust solution would be to use custom CSS classes instead.

The CSS I’m using is in theorems.css below. If you prefer an open Halmos / QED symbol versus the closed symbol, use \25FB in place of \25FC.

Theorem-like Environments (theorems.css)view raw
.theorem {
    display: block;
    margin: 12px 0;
    font-style: italic;
}
.theorem:before {
    content: "Theorem.";
    font-weight: bold;
    font-style: normal;
}
.lemma {
    display: block;
    margin: 12px 0;
    font-style: italic;
}
.lemma:before {
    content: "Lemma.";
    font-weight: bold;
    font-style: normal;
}
.proof {
    display: block;
    margin: 12px 0;
    font-style: normal;
}
.proof:before {
    content: "Proof.";
    font-style: italic;
}
.proof:after {
    content: "\25FC";
    float:right;
}
.definition {
    display: block;
    margin: 12px 0;
    font-style: normal;
}
.definition:before {
    content: "Definition.";
    font-weight: bold;
    font-style: normal;
}

If you happen to be using Octopress, which uses Sass, this code can be appended to /sass/custom/_styles.scss.

And now to see this in action. The markdown (with inline HTML)

Definition Example (theoremsexample.md)view raw
<div class="definition">
A set $C$ is *convex* if for all
$x,y \in C$ and for all
$\alpha \in [0,1]$ the point
$\alpha x + (1-\alpha) y \in C$.
</div>
<div class="theorem">
There are no natural numbers
$\naturals = (1, 2, 3, \ldots)$
$x$, $y$, and $z$ such that
$x^n + y^n = z^n$, in which $n$
is a natural number greater than 2.
</div>

will produce the following:

A set \(C\) is convex if for all \(x,y \in C\) and for all \(\alpha \in [0,1]\) the point \(\alpha x + (1-\alpha) y \in C\).
There are no natural numbers \(\naturals = (1, 2, 3, \ldots)\) \(x\), \(y\), and \(z\) such that \(x^n + y^n = z^n\), in which \(n\) is a natural number greater than 2.

One improvement would be to allow theorem names and numbering (with subsequent referencing), but I think for now this is a nice solution.

Comments