Mathematics HTML Sampler
- Check Widely Supported HTML and Unicode Characters, to see whether the symbol you might need is there. If not, and it also can't be found on the page Special Symbols (Not Widely Supported), then we have to create new graphics.
- All standalone letters used as symbols should be in italic. For
italics, you can use either <em>…</em> or
<i>…</i>. The former are preferred, but the latter
are acceptable.
Mathematical symbols with subscripts or superscripts that are also letters can be formatted using either separate tags for each italicized letter or, if there are no intervening characters that shouldn't be italicized, using a global pair of <em>…</em> tags. So,
xi
can be formatted as either
<em>x</em><sub><em>i</em></sub>
or
<em>x<sub>i</sub></em>
- Parenthesis should not be in italics:
∀x(Fx → Gx), i.e., ∀<em>x</em>(<em>Fx</em> → <em>Gx</em>),
but not
∀x(Fx → Gx), i.e., not ∀<em>x(Fx → Gx)</em>
Quantifiers should not use dot notation:
∀x(Fx → Gx)
not
∀x.Fx → Gx
- To stop a linebreak, place the material in the following environment:
<span class="nw"> </span>
- To produce an overbar over an uppercase letter or letters, use:
<span class="oline">EQI</span>
to produce:
EQI.
Note that this doesn't work as well with lower case letters: α.
- To produce a sans serif font, use
<font face="Arial">Cong</font>
or<span style="font-family:Arial">Cong</span>
to produce
Cong
- To produce small-caps, use:
<span class="sc">This is in small-caps</span>
to produce:
This is in small-caps.
- To use LaTeX-like script letters for upper-case, use
<span class="scriptuc">…</span>
to produce
A, B, C, D, etc.
When the browser sees the HTML code, it will first try to call up the font cmsy10.ttf, if it is installed, and failing that it will call for Script MT, or any "cursive" font.
- To use underbars that are lower than underlines, use
<span class="ubar">…</span>
to produce
- There are new span (and italic) classes, "overstrike",
"up", and "hi", to put a mark above an arbitrary
character. Here are some examples. Use
<span class="overstrike">v<span class="up">ˆ</span></span>
<span class="overstrike">ε<span class="up">’</span></span>to produce:
vˆ, ε’, etc.
For upper case characters, use<span class="overstrike">U<span class="hi">ˆ</span></span>
<span class="overstrike">Γ<span class="hi">’</span></span>to produce:
Uˆ, Γ;’, etc.
To put a mark above italic characters, use:
<i class="overstrike">x<span class="up">¨</span></i>
<i class="overstrike">v<span class="hi">·</span></i>
etc.to produce:
x¨, v·, a˜, gˆ, etc.
For upper case italic characters, use some combination of the above, e.g., as in
<i class="overstrike">A<span class="hi">‾</span></i>
to produce:
A‾.
- Example of logical and se-theoretical formatting, from
http://plato.stanford.edu/entries/set-theory/ZF.html:
Suppose that φ(x,y,û) is a formula with x and y free, and let û represent variables u1,…,uk, which may or may not be free in φ. Furthermore, let φx,y,û[s,r,û] be the result of substituting s and r for x and y, respectively, in φ(x,y,û). Then every instance of the following schema is an axiom:
Replacement Schema:
∀u1…∀uk[∀x∃!yφ(x,y,û) → ∀w∃v∀r(r∈v ≡ ∃s(s∈w & φx,y,û[s,r,û]))] - To produce a numerator/denominator in a mathematical
expression, use:
<table style="border-spacing:0px;">
<tr>
<td style="padding:0px;border-bottom:1px solid black; text-align:center;">numerator</td>
</tr>
<tr>
<td style="padding:0px; text-align:center;">denominator</td>
</tr>
</table>to produce
numerator denominator However, we may have to tweak the "padding" values to get some complex numerators/denominators, such as the following, to look good in Firefox:
Pα[h[q] | b·cn·en] Pα[h[r] | b·cn·en] = qm (1−q)n−m rm (1−r)n−m · Pα[h[q] | b] Pα[h[r] | b] In the above, we increased the padding for the cell for the numerator (which has a solid black border-bottom of 1px) to 4px:
<td style="padding:4px;border-bottom:1px solid black; text-align:center;">
However, if you tweak the padding in the denominator to get the following to look good in Firefox, then the long division lines will rise up above the minus sign:
1 − 1 n · (log γ)2 EQI[cn | hi/hj | hi·b] + (log ε)/n )2 - To produce a summation or intersection with upper and lower
indices, use the following table parameters:
<td align="center">
<span class="index"><em>n</em></span><br />
<font size="+2">Π</font><br />
<span class="index"><em>k</em>=1</span>
</td>to produce a large product sign with a centered index "k=1" below and a centered index "n":
n
Π
k=1Note that the index class is defined with CSS
.index { font-size:.8em; line-height: 80%; }
So, if local adjustments are needed in a particular entry, the line
<span class="index"><em>n</em></span><br />
can be replaced with the following line in which the values .8em and 80% have been altered:
<span style="font-size:.8em; line-height: 80%;"><em>n</em></span><br />
Thus, for integrals, we might use:
<td align="center"> <span class="index"> ∞</span><br />
<font size="+2">∫</font><br />
<span style="font-size:.8em; line-height: 100%;">0</span> </td>to produce
∞
∫
0or use:
<td align="center">
<span style="font-size:.8em; line-height:100%;"> <em>x</em></span><br />
<font size="+2">∫</font><br />
<span style="font-size:.8em; line-height: 100%;">−∞</span>
</td>to produce
x
∫
−∞ - To produce a superscript directly above a subscript in an inline
context (where you cannot use a table), use a nested pair of span tags
with the superscript first, in the outer (“supsub”) span
tag and the subscript after it—within the nested
(“lower”) span tag. For example,
Π<span class="supsub">1<span class="lower">0</span></span>
produces
Π10
which works within the middle of a paragraph. For example, the code will be repeated within this paragraph to show the inline usage of the superscript over subscript. Here is the repeat of the code: Π10. This shows the usage of the HTML code within a paragraph.
- To produce a thinner, blacker line than the usual <hr/> tag, use:
<hr size="2" noshade="noshade" />
to produce
- To produce a border around a table without a border around
each cell, use
<table style="border:1px solid black;">
to produce:
row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 instead of of the default table border:
row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 Additionally, to put some padding within the table border, use
<table style="border:1px solid black; border-spacing: 0.5em 1em;">
to produce:
row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 Finally, to produce a border around every cell which is thinner than the default border="1", use:
<table border="1" cellspacing="0">
to produce
row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 - An example for type-logical-grammar:
Γ, x : A ⊢ M : B ⊸I Γ ⊢ λx.M : A ⊸ B Γ ⊢ M : A ⊸ B Δ ⊢ N : A ⊸E Γ, Δ ⊢ (M N) : B - The entry on definitions needed both numbered equations and non-numbered equations with the same amount of indent. This was done by using a paragraph style to control the amount of indent and a corresponding table with 0 padding and a first column that matched the width of the indent.
- The following entries have lots of useful examples:
- axiom-choice
- common-knowledge
- computability
- conservation-biology
- ecology
- frege-logic
- logic-ai
- logic-combinatory
- logic-conditionals
- logic-fuzzy
- logic-inductive
- mathematics-constructive
- paradox-simpson
- qm-manyworlds
- quantum-field-theory
- reasoning-automated
- set-theory/primer.html
- type-theory-church
- wittgenstein-mathematics