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(FxGx), i.e., &forall;<em>x</em>(<em>Fx</em> &rarr; <em>Gx</em>),

but not

x(Fx → Gx), i.e., not &forall;<em>x(Fx &rarr; Gx)</em>

Quantifiers should not use dot notation:

x(FxGx)

not

x.FxGx
• To stop a linebreak, place the material in the following environment:
<span class="nw"> </span>
• To produce numbered equations, use:
<dl class="hangindent">
<dt>(#)</dt><dd>equation</dd> </dl>

to produce

(#)
equation

or if you don't want the numbers indented, use "hang" instead of "hangindent" to produce

(#)
equation

Note that the dl "hang" class can also be used in bibliographies for primary sources organized by year or abbreviation.

• To produce Quine corner quotes, use:
<sup>&#8988;</sup>some text<sup>&#8989;</sup>
to produce:
some text
• 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
<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:
A, a, B, b, etc.
• 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">&circ;</span></span>
<span class="overstrike">ε<span class="up">&rsquo;</span></span>
to produce:
vˆ, ε, etc.
For upper case characters, use
<span class="overstrike">U<span class="hi">&circ;</span></span>
<span class="overstrike">Γ<span class="hi">&rsquo;</span></span>

to produce:

Uˆ, Γ;, etc.

To put a mark above italic characters, use:

<i class="overstrike">x<span class="up">&uml;</span></i>
<i class="overstrike">v<span class="hi">&middot;</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">&oline;</span></i>

to produce:

A.
• Example of logical and se-theoretical formatting, from https://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,û) → ∀wvr(rv ≡ ∃s(sw & φ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)nm
rm (1−r)nm
·
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
• numerator/denominator with double line in between:
W[((X,Y),Z)]⇒C
W[(X,(Y,Z))]⇒C
• To produce a large left brace for an equation given with conditions, we use a table with one row per part and construct the brace out of unicode curly-brace drawing symbols. NOTE: the brace should be in its own mini-table and needs only style="line-height:1.0":
Z(h, e|k) = 






 
P(h|ek)−P(h|k)
1−P(h|k)
if P(h|ek) ≥ P(h|k)
P(h|ek)−P(h|k)
P(h|k)
if P(h|ek) < P(h|k)
• 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">&Pi;</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=1

Note 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"> &nbsp;&nbsp; &infin;</span><br />
<font size="+2">&int;</font><br />
<span style="font-size:.8em; line-height: 100%;">0</span> </td>

to produce

    ∞

0

or use:

<td align="center">
<span style="font-size:.8em; line-height:100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>x</em></span><br />
<font size="+2">&int;</font><br />
<span style="font-size:.8em; line-height: 100%;">&minus;&infin;</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,
&Pi;<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 : AM : B  ⊸I
Γ ⊢ λx.M : AB
Γ ⊢ M : AB       Δ ⊢ 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: