developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

fix(site): hide the MathJax assistive-MathML twin (no duplicate formulas)
Build · Site / build (push) Successful in 8s
Details
Tests · Integration / integration (pull_request) Successful in 1m48s
Details
Build · Site / build (pull_request) Successful in 7s
Details
Tests · UI / test (pull_request) Successful in 3m20s
Details
Tests · Go / test (pull_request) Successful in 2m11s
Details

Browse Source 
markdown-it-mathjax3 renders each formula as a visible SVG plus a MathML
twin (<mjx-assistive-mml>) for screen readers, hidden via CSS scoped to a
per-container #mjx-<id> selector. In the static build the containers carry
no id, so that scoped rule matches nothing and the twin renders as a
second, oversized (theme-monospaced) copy of every formula, in every
browser. Add a global visually-hidden rule for mjx-assistive-mml in the
theme CSS: the twin stays in the DOM for assistive tech but is removed
from view and from layout.
This commit is contained in:
Ilia Denisov
2026-05-31 16:32:43 +02:00
parent 2a3f31a32b
commit 9b689b2885
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/.vitepress/theme/custom.css
+23
View File
@@ -8,3 +8,26 @@
"Fira Code", "DejaVu Sans Mono", Menlo, Consolas, monospace; "Fira Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
--vp-font-family-mono: var(--vp-font-family-base); --vp-font-family-mono: var(--vp-font-family-base);
} }
/*
* markdown-it-mathjax3 renders each formula as a visible SVG plus a MathML
* twin (<mjx-assistive-mml>) for screen readers, and hides the twin with CSS
* scoped to a per-container `#mjx-<id>` selector. In the static build the
* containers carry no `id`, so that scoped rule matches nothing and the twin
* shows up as a second, oversized (theme-monospaced) copy of every formula.
* Hide it globally with the standard visually-hidden pattern: it stays in the
* DOM for assistive tech but is removed from view and from layout.
*/
mjx-assistive-mml {
position: absolute !important;
top: 0;
left: 0;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}