Font that can be used for validating baseline alignments.
sajidanwar.com/misc/baseline-diagnostic-font/
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="./baseline-diagnostic-font.css">
7 <style>
8 body {
9 width: 80ch;
10 margin: auto;
11 font: 16px/1.5 sans-serif;
12 padding: 0;
13 box-sizing: border-box;
14 }
15
16 code {
17 background: #f8f8f8;
18 border: 1px dotted #ccc;
19 border-radius: 0.25em;
20 padding: 0.25em;
21 font-weight: bold;
22 font-size: smaller;
23 }
24
25 dfn {
26 text-decoration: 2px dotted underline;
27 cursor: help;
28 }
29
30 #preview, #embox-preview {
31 display: flex;
32 justify-content: space-evenly;
33 text-align: center;
34 }
35
36 table {
37 text-align: center;
38 font-family: monospace;
39 border-collapse: collapse;
40 margin: 1em auto;
41 }
42
43 table td, table th {
44 padding: 0.25em 0.5em;
45 vertical-align: middle;
46 }
47
48 th {
49 background: #f8f8f8;
50 }
51
52 #baselines-table {
53 text-align: left;
54 }
55
56 #baselines-table td:nth-child(2) {
57 text-align: right;
58 }
59
60 .pair-cell {
61 text-align: center;
62 }
63
64 .glyph-render {
65 background: #fff;
66 display: inline-block;
67 margin-bottom: 10px;
68 }
69
70 .glyph-render.layout {
71 background: repeating-conic-gradient(#eee 0 25%, #0000 0 50%) 50% / 20px 20px;
72 }
73
74 .pair-name {
75 display: inline-flex;
76 flex-direction: column;
77 gap: 1px;
78 background: black;
79 }
80
81 .pair-name span {
82 background: white;
83 padding: 4px;
84 }
85
86 .font-switch {
87 display: flex;
88 margin-bottom: 0.75em;
89 font-family: monospace;
90 font-size: 0.75em;
91 justify-content: center;
92 }
93
94 .font-switch input[type="radio"] {
95 display: none;
96 }
97
98 .font-switch label span {
99 display: block;
100 padding: 0.3em 0.75em;
101 border: 1px solid #ccc;
102 cursor: pointer;
103 background: #f8f8f8;
104 user-select: none;
105 }
106
107 .font-switch label:first-child span {
108 border-radius: 4px 0 0 4px;
109 }
110
111 .font-switch label:last-child span {
112 border-radius: 0 4px 4px 0;
113 margin-left: -1px;
114 }
115
116 .font-switch input[type="radio"]:checked + span {
117 font-weight: bold;
118 border-color: #000;
119 background: white;
120 position: relative;
121 }
122
123 .font-switch input[type="radio"]:checked + span:after {
124 content: ' ✔';
125 font-weight: 900;
126 }
127
128 #pair-section:has([value="BaselineDiagnostic"]:checked) .glyph-render {
129 font-family: "BaselineDiagnostic";
130 }
131
132 #pair-section:has([value="BaselineDiagnosticAlphabeticZero"]:checked) .glyph-render {
133 font-family: "BaselineDiagnosticAlphabeticZero";
134 }
135 </style>
136</head>
137<body>
138 <h1>Baseline Diagnostic Font</h1>
139
140 <h2>Overview</h2>
141 <p>
142 Font that can be used for validating baseline alignments. Given the embedded
143 text in the font, this should be used with very large font sizes.
144 </p>
145
146 <h2>Baselines and Metrics</h2>
147 <table id="baselines-table" border="1">
148 <thead>
149 <tr>
150 <th>Baseline/Metric</th>
151 <th>Coordinate</th>
152 <th><code>BASE</code> Value</th>
153 <th><code>OS/2</code> Value</th>
154 <th><code>hhea</code> Value</th>
155 </tr>
156 </thead>
157 <tr>
158 <td>ascent</td>
159 <td>800</td>
160 <td></td>
161 <td>sTypoAscender</td>
162 <td>ascent</td>
163 </tr>
164 <tr>
165 <td>ideographic-over</td>
166 <td>750</td>
167 <td>idtp</td>
168 <td></td>
169 <td></td>
170 </tr>
171 <tr>
172 <td>hanging</td>
173 <td>650</td>
174 <td>hang</td>
175 <td></td>
176 <td></td>
177 </tr>
178 <tr>
179 <td>ideographic-face-over</td>
180 <td>650</td>
181 <td>icft</td>
182 <td></td>
183 <td></td>
184 </tr>
185 <tr>
186 <td>cap-height</td>
187 <td>550</td>
188 <td></td>
189 <td>sCapHeight</td>
190 <td></td>
191 </tr>
192 <tr>
193 <td>math</td>
194 <td>450</td>
195 <td>math</td>
196 <td></td>
197 <td></td>
198 </tr>
199 <tr>
200 <td><dfn title="Computed at halfway between ideographic-under and ideographic-over">central</dfn></td>
201 <td>350</td>
202 <td></td>
203 <td></td>
204 <td></td>
205 </tr>
206 <tr>
207 <td><dfn title="Computed at halfway between ascent and descent">em-middle</dfn></td>
208 <td>300</td>
209 <td></td>
210 <td></td>
211 <td></td>
212 </tr>
213 <tr>
214 <td>x-height</td>
215 <td>250</td>
216 <td></td>
217 <td>sxHeight</td>
218 <td></td>
219 </tr>
220 <tr>
221 <td><dfn title="Computed at halfway between alphabetic and x-height">x-middle</dfn></td>
222 <td>150</td>
223 <td></td>
224 <td></td>
225 <td></td>
226 </tr>
227 <tr>
228 <td>alphabetic</td>
229 <td>50</td>
230 <td>romn</td>
231 <td></td>
232 <td></td>
233 </tr>
234 <tr>
235 <td>ideographic-face-under</td>
236 <td>50</td>
237 <td>icfb</td>
238 <td></td>
239 <td></td>
240 </tr>
241 <tr>
242 <td><dfn title="Zero coordinate">zero</dfn></td>
243 <td>0</td>
244 <td></td>
245 <td></td>
246 <td></td>
247 </tr>
248 <tr>
249 <td>ideographic-under</td>
250 <td>-50</td>
251 <td>ideo</td>
252 <td></td>
253 <td></td>
254 </tr>
255 <tr>
256 <td>descent</td>
257 <td>-200</td>
258 <td></td>
259 <td>sTypoDescender</td>
260 <td>descent</td>
261 </tr>
262 </table>
263 <p>
264 The <code>BaselineDiagnosticAlphabeticZero</code> variant is the same as
265 <code>BaselineDiagnostic</code>, except
266<code>alphabetic</code> moves to 0; <code>x-middle</code> moves to 125.
267 </p>
268
269 <h2>Glyphs</h2>
270
271 <h3>Diagnostic glyph</h3>
272 <p>
273 <code>X</code> (U+0058) draws all baselines with labels. Use at large font sizes.
274 </p>
275 <div id="preview">
276 <div>
277 <p><span class="glyph-render" style="font: 250px/1 'BaselineDiagnostic'">X</span></p>
278 <em><code>BaselineDiagnostic</code> at 250px</em>
279 </div>
280 <div>
281 <p><span class="glyph-render" style="font: 250px/1 'BaselineDiagnosticAlphabeticZero'">X</span></p>
282 <em><code>BaselineDiagnosticAlphabeticZero</code> at 250px</em>
283 </div>
284 </div>
285
286 <h3>Baseline pair glyphs</h3>
287 <p>
288 Each pair has a <strong>layout</strong> variant (opaque fill between the two
289 baselines) and a <strong>labeled</strong> variant (lines with labels, like
290 <code>X</code>). Labeled variants also show dashed reference lines for
291 <dfn title="Zero coordinate">zero</dfn> and
292 <dfn title="Computed at halfway between ascent and descent">em-middle</dfn>.
293 </p>
294 <div id="pair-section">
295 <div class="font-switch">
296 <label><input type="radio" name="pair-font" value="BaselineDiagnostic" checked><span>BaselineDiagnostic</span></label>
297 <label><input type="radio" name="pair-font" value="BaselineDiagnosticAlphabeticZero"><span>BaselineDiagnosticAlphabeticZero</span></label>
298 </div>
299 <table id="pair-table" border="1">
300 <thead>
301 <tr><th>Pair</th><th>Layout</th><th>Labeled</th></tr>
302 </thead>
303 <tr>
304 <td>
305 <div class="pair-name">
306<span>x-height</span><span>alphabetic</span> </div>
307 </td>
308 <td class="pair-cell">
309 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">x</span>
310 <br><code>x</code> (U+0078)
311 </td>
312 <td class="pair-cell">
313 <span class="glyph-render" style="font-size: 150px; line-height: 1">χ</span>
314 <br><code>χ</code> (U+03C7)
315 </td>
316 </tr>
317 <tr>
318 <td>
319 <div class="pair-name">
320<span>cap-height</span><span>alphabetic</span> </div>
321 </td>
322 <td class="pair-cell">
323 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">B</span>
324 <br><code>B</code> (U+0042)
325 </td>
326 <td class="pair-cell">
327 <span class="glyph-render" style="font-size: 150px; line-height: 1">β</span>
328 <br><code>β</code> (U+03B2)
329 </td>
330 </tr>
331 <tr>
332 <td>
333 <div class="pair-name">
334<span>ideographic-over</span><span>ideographic-under</span> </div>
335 </td>
336 <td class="pair-cell">
337 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">口</span>
338 <br><code>口</code> (U+53E3)
339 </td>
340 <td class="pair-cell">
341 <span class="glyph-render" style="font-size: 150px; line-height: 1">日</span>
342 <br><code>日</code> (U+65E5)
343 </td>
344 </tr>
345 <tr>
346 <td>
347 <div class="pair-name">
348<span>ideographic-face-over</span><span>ideographic-face-under</span> </div>
349 </td>
350 <td class="pair-cell">
351 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">中</span>
352 <br><code>中</code> (U+4E2D)
353 </td>
354 <td class="pair-cell">
355 <span class="glyph-render" style="font-size: 150px; line-height: 1">田</span>
356 <br><code>田</code> (U+7530)
357 </td>
358 </tr>
359 <tr>
360 <td>
361 <div class="pair-name">
362<span>hanging</span><span>alphabetic</span> </div>
363 </td>
364 <td class="pair-cell">
365 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">अ</span>
366 <br><code>अ</code> (U+0905)
367 </td>
368 <td class="pair-cell">
369 <span class="glyph-render" style="font-size: 150px; line-height: 1">आ</span>
370 <br><code>आ</code> (U+0906)
371 </td>
372 </tr>
373 <tr>
374 <td>
375 <div class="pair-name">
376<span>math</span><span>alphabetic</span> </div>
377 </td>
378 <td class="pair-cell">
379 <span class="glyph-render layout" style="font-size: 150px; line-height: 1">+</span>
380 <br><code>+</code> (U+002B)
381 </td>
382 <td class="pair-cell">
383 <span class="glyph-render" style="font-size: 150px; line-height: 1">±</span>
384 <br><code>±</code> (U+00B1)
385 </td>
386 </tr>
387 </table>
388 </div>
389
390 <h3>Em-box glyphs</h3>
391 <p>
392 Reference glyphs spanning the full em-box from ascent to descent.
393 Use them as solid or outlined background blocks without any baseline markings.
394 </p>
395 <div id="embox-preview">
396 <div>
397 <p><span class="glyph-render" style="font: 150px/1 'BaselineDiagnostic'">█</span></p>
398 <em><code>█</code> (U+2588) — Filled</em>
399 </div>
400 <div>
401 <p><span class="glyph-render" style="font: 150px/1 'BaselineDiagnostic'">□</span></p>
402 <em><code>□</code> (U+25A1) — Outline</em>
403 </div>
404 </div>
405
406 <h2>Source and Downloads</h2>
407 <p>
408 Both the source code and built font files can be found in the
409 <a href="https://tangled.org/sajidanwar.com/baseline-diagnostic-font"><code>@sajidanwar.com/baseline-diagnostic-font</code></a>
410 repository on <a href="https://tangled.org">Tangled</a> or the
411 <a href="https://github.com/kbhomes/baseline-diagnostic-font"><code>kbhomes/baseline-diagnostic-font</code></a>
412 repository on <a href="https://github.com/">GitHub</a>.
413 </p>
414 <p>
415 This font is built using Python with the
416 <a href="https://fonttools.readthedocs.io/en/latest/">fonttools</a> library.
417 </p>
418
419 <h2>License</h2>
420 <p>
421 This font contains <a href="https://fonts.google.com/noto/specimen/Noto+Sans+Mono/license">Noto Sans Mono</a>
422 glyphs in the rendering of its baseline labels. Like that font, this font is
423 licensed under the
424 <a href="https://openfontlicense.org/open-font-license-official-text/">SIL Open Font License, Version 1.1</a>,
425 and is available in the
426 <a href="https://tangled.org/sajidanwar.com/baseline-diagnostic-font/blob/main/dist/LICENSE.md">source repository</a>.
427 </p>
428</body>
429</html>