Draft: Add mathjax v3 support by pelson · Pull Request #96 · ipython/xkcd-font

pelson · 2026-05-27T05:06:18Z

Closes #90. The new font-file is just the adapted characters from the original xkcd-script, rather than being a complete font by itself. We adapt the size of things like sigma, Pi, and the integration symbol.

… weight.

…ontal line join)

…workflow

pelson · 2026-05-27T05:14:20Z

The f diacritic here looks like it isn't well placed.

pelson · 2026-05-27T05:21:05Z

This is the core of the implementation - it is almost entirely generated.

pelson · 2026-05-27T05:22:11Z

Don't want to ship this.

pelson · 2026-05-27T05:22:21Z

Nor this - shouldn't be here.

pelson · 2026-05-27T05:22:32Z

I think we can remove this.

pelson · 2026-05-28T01:41:28Z

+    const SURD_BAR_NUDGE_SVG = 40;
+    const SURD_BAR_NUDGE_PX  = 2;
+
+    const SURD_PATH = `m 1320,3691 c -8,-6 -17,-8 -21,-6 -6,4 -140,-124 -164,-156 -5,-8 -23,-31 -38,-52 -32,-43 -46.3589,-214.6662 -67,-412 -21,-234 -89,-3429 -124,-3680 -30.43312,-217.37946 -45.22736,-513.5633 -54,-690 -34.12704,-184.7142 -42.94822,-375.7902 -82,-560 -5,-22 -16,-96 -26,-165 -9,-69 -20,-133 -23,-143 -5,-13 -19,12 -50,87 -24,58 -46,106 -50,108 -5,2 -25,48 -46,103 -51.37238,134.5467 -85,187.2366 -85,214 0,30 -132,155 -240,228 -76,51 -117,30 -215,-112 -40,-57 -44,-94 -16,-145 11,-19 28,-53 40,-76 36.056956,-72.1139 54.23868,-33.8922 165,-319 26,-66 59,-149 73,-185 33,-81 136,-281 173,-335 26,-39 94,-151 159,-265 98.64586,-208.7933 330.01201,-101.8829 368,-19 41,87 69,230 162,804 5,33 30,177 54,320 25,143 45,274 45,290 1,17 9,77 20,135 11,58 8,136 11,175 15,164 36,553 60,690 16,89 67,3152 76,3300 3,55 10,173 17,261 l 11,161 51,-13 c 124,-31 1699,-37 1882,-24 186,13 237,7 310,-15 37,-11 47,-10 85,7 24,10 46,22 49,26 3,5 26,21 52,37 34,21 52,42 63,69 16,38 15,41 -9,89 -14,27 -26,60 -26,73 0,28 -37,84 -56,84 -6,0 -31,9 -54,19 -39,17 -66,19 -359,16 -451,-4 -1904,7 -2091,79 -8,3 -22,2 -30,-3 z`;


The coordinates came from 2343_mathematical_symbol_fight_2x.png. I would like this to be part of the font...

The character we have in the handwriting sample is not as long as the one in https://xkcd.com/2343/

dummy-index · 2026-05-28T13:03:45Z

Great!

Please be sure to use the summation symbol found in handwriting_minimal.png.

…ad inject it at build time. Re-work the surd and vinculum

… is to try to remove the need for a dedicated mathjax font

…a separate font file for mathjax

Font: register ss01 under DFLT so browsers shaping the Common-script codepoints ∑/∏/∫ actually pick up the lookup. Rename the unencoded tall-surd glyph from uniE000 (PUA) to radical.tall; drop the U+E000 entry from gen_charmap. xkcd-mathjax3.js: prepend MJXZERO to the font-family stack so MathJax's explicit large-operator padding controls vertical positioning (xkcd-script's own ascent/descent was leaking into the line-box and pulling inline ∑/∏/∫ upward). Wait on the actual xkcd-script font (not the deleted xkcd-script-math) before initial typeset, and inject the font override before typeset so MathJax measures with our STACK + ss01 active. Add inline-container horizontal margin and extend the ∑/∏/∫ inline-margin fix; quote glyph keys in the spliced glyph-data block for the dotted radical.tall name. Samples: switch formulas.json to formulas.yaml so LaTeX strings are literal. Each top-level key now maps to an output PNG; multi-formula groups render in a fixed-cell CSS grid so editing one tex never shifts its siblings' pixel positions. Set per-cell tex via textContent — the previous HTML-entity escape route silently dropped operators like <, >, ≤ from \text{} segments in piecewise-big. Bundle the bare and in-sentence inline ∑/∏/∫ samples into a single inline-ops.png that exercises both size and surrounding-text spacing. Add pt8_derivatives.py (the orchestrator) and the regenerated font binaries + sample PNGs.

…s hard-coded widths

Add hooks to the mathjax rendering APIs to ensure that any direct rendering calls, such as MathJax.typesetPromise() are intercepted

…hat isn't yet complete

pelson

OK, this branch has served its purpose, and I've learned a lot in the process of getting mathjax3 working. My plan is to close off this PR as a historical record, and create a new PR with the targeted changes needed. This new PR will still be massive, but at least it takes the final path, rather than the exploratory path that I've followed here.

FWIW, this PR started out with the assumption that we would need a dedicated font (xkcd-script-mathjax.woff), but in the end, I simply create a js file (which I do inject certain paths into as part of the build process).

pelson · 2026-06-04T02:47:34Z

+    return dst
+
+
+def _import_math_centered(name, cp, target_top, weight_delta=0, dst_name=None):


Some type hints would be handy.

pelson · 2026-06-04T02:49:45Z

    c.addReference('comma', psMat.compose(psMat.scale(-1, -1), psMat.translate(dx, dy)))


+def _make_spacing_modifier(font, cp, mark_name, y_bottom=None, lsb=40, rsb=40):


pelson · 2026-06-04T03:10:30Z

+    MathJax = { loader: { load: ['[tex]/amscd'] },
+                tex:    { inlineMath:  [['$','$'], ['\\\\(','\\\\)']],
+                          displayMath: [['$$','$$'], ['\\\\[','\\\\]']],
+                          packages:    {'[+]': ['amscd']} } };


This should be enabled per-formula

pelson · 2026-06-04T03:11:02Z

Spacing on Sum is a bit much.

pelson · 2026-06-04T03:11:59Z

Personally find the brackets a bit "stale"/boring. Not obvious that they are supposed to be hand-drawn...

pelson · 2026-06-04T03:16:38Z

Too much whitespace here.

pelson · 2026-06-04T03:17:22Z

Something wrong here.

pelson · 2026-06-04T03:20:36Z

+        '2035': '̀',  // \grave     — reversed prime → combining grave
+    };
+
+    function _mathItalicCpToChar(hex) {


Does this mean we don't need the italics chars added to the font? (perhaps we reverted that already though)

pelson · 2026-06-04T03:21:16Z

pelson · 2026-06-04T03:21:58Z

We can remove this file.

pelson added 10 commits May 27, 2026 06:57

Add missing characters from dummy-index's adaptation, and adapt the z…

4a6d813

… weight.

Fine for the surd, not fine for the line (left cap problem).

01b130a

Add mathjax poc

74dc38a

Proof-of-concept for sqrt symbol

5595082

Working sqrt prototype

14554b6

Inline stuff for mathjax

7c8fc33

Add correct and programatic vinculum handling

87288fd

Pretty much perfect for the cases that I've tested (very slight horiz…

804fa26

…ontal line join)

Include a mathjax integration, and bring it into the normal pipeline …

634f352

…workflow

Add generated rendered math equations to the samples

128dfe1

pelson commented May 27, 2026

View reviewed changes

pelson commented May 28, 2026

View reviewed changes

Comment thread xkcd-script/samples/math/maxwell-free-space.png Outdated

pelson added 13 commits May 29, 2026 05:30

Avoid a manually generated path living in the mathjax font, and inste…

f46fe0f

…ad inject it at build time. Re-work the surd and vinculum

Review of the mathjax script

6f55bbe

Simplify the derivatives approach for the mathjax font. The next step…

9691e8e

… is to try to remove the need for a dedicated mathjax font

Use stylistic alternatives for larger versions of ∑/∏/∫. No need for …

a347044

…a separate font file for mathjax

Fix linlined math text rendering, which was previously using mathtex'…

1b5134d

…s hard-coded widths

Handle extending curly braces for piecewise equations

50c73d0

Handle brackets and parentheses, supporting stretched variants of them

aab366a

Fix the diacritics in the mathjax rendering

a3225f7

Support tables and vertical line drawing

3fdd9c5

Add hooks to the mathjax rendering APIs to ensure that any direct rendering calls, such as MathJax.typesetPromise() are intercepted

Add stretchy arrows, and use them for most non \\vec cases

39131ba

Add the ring and asterisk operators, and a zoo of symbols in a case t…

1643c6f

…hat isn't yet complete

Tidy up

bc0070a

pelson commented Jun 4, 2026

View reviewed changes

This was referenced Jun 4, 2026

Support mathjax (v3) math rendering #98

Closed

Add mathjax v3 support #99

Open

		return dst


		def _import_math_centered(name, cp, target_top, weight_delta=0, dst_name=None):

		c.addReference('comma', psMat.compose(psMat.scale(-1, -1), psMat.translate(dx, dy)))


		def _make_spacing_modifier(font, cp, mark_name, y_bottom=None, lsb=40, rsb=40):

Uh oh!

Conversation

pelson commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dummy-index commented May 28, 2026

Uh oh!

pelson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pelson commented May 27, 2026 •

edited

Loading