Zero-CDN HTML Mathematical Typography Cheatsheet
Why Offline Semantic HTML Math Beats CDN Scripts
Standalone HTML experiment records are frequently opened directly via file://, attached to emails or patent disclosures, or viewed in air-gapped environments where external CDNs (KaTeX, MathJax) are blocked or cause layout shift.
When an agent synthesizes content from Markdown .md files into .html, the #1 failure mode is Markdown-to-HTML bleed: raw $...$ LaTeX macros (\tilde{H}_m, \ln|\mathcal{V}_m|, \implies, \ge, \tau) or inline Markdown backticks (`code`) left unparsed inside HTML paragraphs.
Mandate: Always style inline formulas with <span class="math">...</span> and display equations inside <pre class="code">... using Unicode combining marks, <i>, <sub>, <sup>, and HTML entities.
CSS Rule for .math
.math { font-family: "STIX Two Math", "Cambria Math", "Times New Roman", Georgia, serif; font-size: 1.03em; white-space: nowrap; color: var(--slate);}.math i { font-style: italic; }.math sub { font-size: 0.76em; vertical-align: -0.18em; }.math sup { font-size: 0.76em; vertical-align: 0.35em; }LaTeX-to-HTML Lookup Table
| LaTeX Expression | Offline Semantic HTML (.math) |
Visual Output |
|---|---|---|
$\tilde{H}_m$ |
<span class="math"><i>H̃</i><sub><i>m</i></sub></span> |
H̃m |
$\tilde{H}_m = H_m / \ln|\mathcal{V}_m|$ |
<span class="math"><i>H̃</i><sub><i>m</i></sub> = <i>H</i><sub><i>m</i></sub> / ln|<i>V</i><sub><i>m</i></sub>|</span> |
H̃m = Hm / ln|Vm| |
$\hat{y}_m$ |
<span class="math"><i>ŷ</i><sub><i>m</i></sub></span> |
ŷm |
$p_{m,k}$ |
<span class="math"><i>p</i><sub><i>m,k</i></sub></span> |
pm,k |
$z_{m,k}$ |
<span class="math"><i>z</i><sub><i>m,k</i></sub></span> |
zm,k |
$|\mathcal{V}_m| = K_m$ |
<span class="math">|<i>V</i><sub><i>m</i></sub>| = <i>K</i><sub><i>m</i></sub></span> |
|Vm| = Km |
$\tau = 0.16$ |
<span class="math">τ = 0.16</span> |
τ = 0.16 |
$H_m \ge 0.35\text{ nats}$ |
<span class="math"><i>H</i><sub><i>m</i></sub> ≥ 0.35 nats</span> |
Hm ≥ 0.35 nats |
$\tilde{H}_m < 0.160$ |
<span class="math"><i>H̃</i><sub><i>m</i></sub> < 0.160</span> |
H̃m < 0.160 |
$\in [0, 1]$ |
<span class="math">∈ [0, 1]</span> |
∈ [0, 1] |
$\implies$ |
<span class="math">⇒</span> |
⇒ |
$\to$ |
<span class="math">→</span> |
→ |
$O(1)$ / $O(L)$ |
<span class="math"><i>O</i>(1)</span> / <span class="math"><i>O</i>(<i>L</i>)</span> |
O(1) / O(L) |
$\mathbb{E}[v] = \sum_k v_k \cdot p_k$ |
<span class="math">E[<i>v</i>] = Σ<sub><i>k</i></sub> <i>v</i><sub><i>k</i></sub> · <i>p</i><sub><i>k</i></sub></span> |
E[v] = Σk vk · pk |
$\Delta H$ |
<span class="math">Δ<i>H</i></span> |
ΔH |
Combining Diacritical Marks for Mathematical Accents
- Tilde (
\tilde{x}): Append̃(U+0303) immediately after the base character inside<i>:<i>H̃</i>→ H̃ - Hat (
\hat{x}): Append̂(U+0302) immediately after the base character inside<i>:<i>ŷ</i>→ ŷ - Bar / Mean (
\bar{x}): Append̄(U+0304) immediately after the base character inside<i>:<i>x̄</i>→ x̄