From 986b0bcae0d352c9afd516c45a0c3fcbdd903669 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Fri, 2 Oct 2026 20:03:22 +0000 Subject: [PATCH] fix(markup): use installed math fonts for MathML in Chromium (#39491) On Linux and ChromeOS, Chromium resolves the `math` font family to Latin Modern Math, which neither installs, so MathML renders with a text font and brackets and large operators don't stretch, see https://issues.chromium.org/issues/40069293. The new `--fonts-math` variable keeps `math` first, so browsers that always resolve it keep their font. Only Chromium falls through to the math fonts Linux and ChromeOS install by default: - `STIX Two Math`: Fedora, and `fonts-stix` on Ubuntu 26.04 - `DejaVu Math TeX Gyre`: Debian 13 and openSUSE - `Noto Sans Math`: Fedora and ChromeOS, last because Debian and Ubuntu ship an older version without a `MATH` table Math fonts also have smaller x-heights than UI fonts, so MathML rendered smaller than KaTeX and the surrounding text in every browser, see https://github.com/w3c/mathml-core/issues/41. `font-size-adjust: ex-height 0.52` scales whichever math font is used to KaTeX's x-height. KaTeX output is unchanged. Fixes: https://github.com/go-gitea/gitea/issues/39489 Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bircni <75789103+bircni@users.noreply.github.com> Co-authored-by: silverwind --- web_src/css/base.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web_src/css/base.css b/web_src/css/base.css index 3df9cea3691..c7d84444fbd 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2,6 +2,8 @@ /* fonts */ --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial; --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji); + /* Chromium's "math" is a font Linux and ChromeOS don't ship, so fall back to the math fonts they do, https://issues.chromium.org/issues/40069293 */ + --fonts-math: math, "STIX Two Math", "DejaVu Math TeX Gyre", "Noto Sans Math"; /* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font. So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */ @@ -107,6 +109,11 @@ samp, font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */ } +math { + font-family: var(--fonts-math); + font-size-adjust: ex-height 0.52; /* match KaTeX's x-height (0.431 × 1.21em) regardless of math font, https://github.com/w3c/mathml-core/issues/41 */ +} + /* there are many blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc, so we need to make have default global styles, ".markup code" has its own styles and these styles sometimes conflict. TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */