22
MathJax just runs in the background, looking for something on the web page to convert into an equation.
MathJax supports different types of mathematical notation, the main ones being:
TeX and LaTeX
MathML
AsciiMath
I was not familiar with any of these three forms of notation, but I had a quick look; TeX, LaTeX and MathML are notational mechanisms for writing equations and they seem to be quite complicated to understand (I may be doing them a disservice here), but they seem to be part of something bigger in the case of TeX and LaTeX a whole form of typesetting and with MathML a whole language.
AsciiMath on the other hand seemed fairly straight forward. So I’m using AsciiMath.
MathJax decides which notation is being used by delimiters that surround the equation. The delimiter for AsciiMath is the back-tick character (`). On an English keyboard it is the leftmost key immediately above the tab key (on the numbers row); it can also be entered (on a Windows system) by holding the alt key and typing 96 on the numeric keypad (), note must be active for this to work.
To see it in action, add the following to the 99-00-typicals page:
`x=(-b +- sqrt(b^2 — 4ac))/(2a)`
Just stick it on a blank line in a section (like you would a paragraph). Make sure the MathJax loading script is in the header (Code 22.1) and preview the page.
You should get something like this:
`x=(-b +- sqrt(b^2 — 4ac))/(2a)`
It really is as simple as that. MathJax even loads the fonts. The only thing you have to do is learn the AsciiMath notation, but it’s not that complicated (I include a primer in § 22.3).
There is just a little bit more too it; on the template website I’ve added some classes of my own to surround the equation (just like I did with figures and code fragments), they allow for a heading and caption &c.
Let’s look at the HTML for the equation structure:
<div class="formulae" id="js--e99-01"> <div class="formulae-header">Equation Header</div> <div class="formulae-container"> <div class="formulae-equ"> `sum_(i=1)^n i^3=((n(n+1))/2)^2` </div> <div class="formulae-num">(99.1) </div> <div class="formulae-caption">Equation caption</div> </div>
This particular example looks like this (I’ve shown it with preceding text):
The CSS behind this is:
.formulae { /* formulae box (90% width) */
width: 90%;
margin: 0 auto
}
.formulae-header { /* formulae header (title) */
font-family: "conc-c3-r";
font-feature-settings: "ss02";
text-align: center;
padding: 0.1rem 0.2rem 0.2rem 0.2rem;
border-top: 1px solid #e8e8e8;
}
.formulae-container { /* formula caption area */
padding: 0.2rem 0;
text-align: center;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
.formulae-equ { /* equation column */
display:inline-block;
width:89%;
}
.formulae-num { /* number column */
display:inline-block;
width:10%;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.7rem;
color: #404030;
vertical-align: middle;
}
.formulae-caption { /* formulae caption area */
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.6rem;
color: #404030;
text-align: left;
padding-top: 0.2rem;
margin-bottom: 2rem;
}
.formulae-bkgd { /* optional background shading */
background-color: #fbfbfb;
}
There are absolutely no surprises here, it is all fonts, spacing and widths, just like the code fragments, tables and figures.
I’ll run through it quickly for the sake of completeness.
The whole equation (heading, equation number, caption and the equation itself) is contained in a div with the class formulae:
<div class="formulae" id="js--e99-01">
It also has an ID for use as a slow scrolling link if needed.
The CSS is straight forward:
.formulae { /* formulae box (90% width) */
width: 90%;
margin: 0 auto
}
It sets the equation block to be 90% of the central column area and positions the block in the centre by applying auto to the left and right margins.
The next line of the HTML is the heading; this is where it says in the above equation.
<div class="formulae-header">Equation Header</div>
This is another div with the class formulae-header:
.formulae-header { /* formulae header (title) */
font-family: "conc-c3-r";
font-feature-settings: "ss02";
text-align: center;
padding: 0.1rem 0.2rem 0.2rem 0.2rem;
border-top: 1px solid #e8e8e8;
}
It is the usual type of font settings, Concourse small caps in this case. The text is centre aligned with some padding on all sides. There is also a top border in grey.
This heading is optional, if it is not required, just delete the whole line.
Now we get to the div that holds the equation row, this row contains the equation itself and any number that may be assigned to it:
<div class="formulae-container">
This div has the class formulae-container:
.formulae-container { /* formula caption area */
padding: 0.2rem 0;
text-align: center;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
The most important thing here is the centre alignment; it ensures that the equation itself and the equation number are both centred in their respective areas.
The class also applies a top and bottom border to the equation area; this is the same style as that used for the heading.
This is followed by the div for the equation itself:
<div class="formulae-equ"> `sum_(i=1)^n i^3=((n(n+1))/2)^2` </div>
This again has its own div with class formulae-equ:
.formulae-equ { /* equation column */
display:inline-block;
width:89%;
}
This div is an inline-block, I want the equation number to stack up next to it, I’ve also set it to be 89% of the formulae div, which in itself was 90% of the central column area. The reason it is 89% is the rounding error thing again, you’ll see when I get to the equation number.
The div is followed by the equation itself. I discuss the AsciiMath syntax in the next section, the important thing here is that the equation must be surrounded by the ` delimiter character, one at the start of the equation, one at the end.
The equation is followed by the equation number:
<div class="formulae-num">(99.1)</div>
This just holds a number, usually in brackets, that indicates an equation number (on the right hand side). The ID at the start should be set to reflect this number.
The equation number is again in its own div (can’t have too many divs when you are dealing with equations), this time with class formulae-num:
.formulae-num { /* number column */
display:inline-block;
width:10%;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.7rem;
color: #404030;
vertical-align: middle;
}
This is another inline block, butting up to the left of the equation div. The width is 10%, the equation block width is 89%, leaving a 1% gap by my reckoning. If I set the width of the equation to be 90% (what it should be), I found that the number block sometimes wrapped on to the next line (as if it were too wide). It did this as I narrowed the browser window and I think it is rounding errors, anyway setting the width to be slightly less (89%) fixed it.
The rest is font stuff (Concourse, British settings, 0.7 rem and the usual colour). The only slightly odd thing is the vertical alignment of middle; this just makes sure the equation number is vertically centred, keeping it in line with the middle of the equation itself.
The last thing is the caption; this is in yet another div with class formulae-caption.
<div class="formulae-caption">Equation caption</div>
The class is straight forward:
.formulae-caption { /* formulae caption area */
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.6rem;
color: #404030;
text-align: left;
padding-top: 0.2rem;
margin-bottom: 2rem;
}
Just text settings (Concourse, British settings, 0.6 rem, the usual colour and left justified). There is a whitespace margin at the bottom to give a gap after the equation and a bit of padding to move the caption away from the bottom border of the equation.
Finally, there is a class we haven’t used, formulae-bkgd:
.formulae-bkgd { /* optional background shading */
background-color: #fbfbfb;
}
This can be used to shade the equation heading and container, it looks like this:
This is achieved by adding the class to the formulae-header and formulae-container classes:
<div class="formulae-header formulae-bkgd">Equation Header</div> <div class="formulae-container formulae-bkgd">
That just leaves the equation itself, read on: