feat: italic sans-serif in math mode via \mathsfit command (#3998)

olavhaugen · Olav Haugen · edemaine · web-flow · commit 22189018b63c · 2024-12-09T14:25:06.000-05:00
* Add support for \mathsfit command

* Fixes after commens in PR

* Re-organize supported docs to put `\mathscr` on the right

* Add screenshots

---------

Co-authored-by: Olav Haugen &lt;olav.haugen@sintef.no&gt;
Co-authored-by: Erik Demaine &lt;edemaine@mit.edu&gt;
diff --git a/docs/supported.md b/docs/supported.md
@@ -595,18 +595,18 @@ For color definition, KaTeX color functions will accept the standard HTML [pred
 **Font**
 
 ||||
-|:------------------------------|:------------------------------|:-----
-|$\mathrm{Ab0}$ `\mathrm{Ab0}`  |$\mathbf{Ab0}$ `\mathbf{Ab0}`  |$\mathsf{Ab0}$ `\mathsf{Ab0}`
-|$\mathnormal{Ab0}$ `\mathnormal{Ab0}`|$\textbf{Ab0}$ `\textbf{Ab0}`  |$\textsf{Ab0}$ `\textsf{Ab0}`
-|$\textrm{Ab0}$ `\textrm{Ab0}`  |$\bf Ab0$ `\bf Ab0`            |$\sf Ab0$ `\sf Ab0`
-|$\rm Ab0$ `\rm Ab0`            |$\bold{Ab0}$ `\bold{Ab0}`      |$\Bbb{AB}$ `\Bbb{AB}`
-|$\textnormal{Ab0}$ `\textnormal{Ab0}`|$\boldsymbol{Ab0}$ `\boldsymbol{Ab}`|$\mathbb{AB}$ `\mathbb{AB}`
-|$\text{Ab0}$ `\text{Ab0}`      |$\bm{Ab0}$ `\bm{Ab0}`          |$\frak{Ab0}$ `\frak{Ab0}`
-|$\textup{Ab0}$ `\textup{Ab0}`  |$\textmd{Ab0}$ `\textmd{Ab0}`  |$\mathfrak{Ab0}$ `\mathfrak{Ab0}`
-|$\mathit{Ab0}$ `\mathit{Ab0}`  |$\mathtt{Ab0}$ `\mathtt{Ab0}`  |$\mathcal{AB0}$ `\mathcal{AB0}`
-|$\textit{Ab0}$ `\textit{Ab0}`  |$\texttt{Ab0}$ `\texttt{Ab0}`  |$\cal AB0$ `\cal AB0`
-|$\it Ab0$ `\it Ab0`            |$\tt Ab0$ `\tt Ab0`            |$\mathscr{AB}$ `\mathscr{AB}`
-|$\emph{Ab0}$ `\emph{Ab0}`      |                               ||
+|:------------------------------------|:-----------------------------------|:--------------------------------|
+|$\mathrm{Ab0}$ `\mathrm{Ab0}`        |$\mathbf{Ab0}$ `\mathbf{Ab0}`       |$\mathsf{Ab0}$ `\mathsf{Ab0}`    |
+|$\mathnormal{Ab0}$ `\mathnormal{Ab0}`|$\textbf{Ab0}$ `\textbf{Ab0}`       |$\textsf{Ab0}$ `\textsf{Ab0}`    |
+|$\textrm{Ab0}$ `\textrm{Ab0}`        |$\bf Ab0$ `\bf Ab0`                 |$\sf Ab0$ `\sf Ab0`              |
+|$\rm Ab0$ `\rm Ab0`                  |$\bold{Ab0}$ `\bold{Ab0}`           |$\mathsfit{Ab0}$ `\mathsfit{Ab0}`|
+|$\textnormal{Ab0}$ `\textnormal{Ab0}`|$\boldsymbol{Ab0}$ `\boldsymbol{Ab}`|$\Bbb{AB}$ `\Bbb{AB}`            |
+|$\text{Ab0}$ `\text{Ab0}`            |$\bm{Ab0}$ `\bm{Ab0}`               |$\mathbb{AB}$ `\mathbb{AB}`      |
+|$\textup{Ab0}$ `\textup{Ab0}`        |$\textmd{Ab0}$ `\textmd{Ab0}`       |$\frak{Ab0}$ `\frak{Ab0}`        |
+|$\mathit{Ab0}$ `\mathit{Ab0}`        |$\mathtt{Ab0}$ `\mathtt{Ab0}`       |$\mathfrak{Ab0}$ `\mathfrak{Ab0}`|
+|$\textit{Ab0}$ `\textit{Ab0}`        |$\texttt{Ab0}$ `\texttt{Ab0}`       |$\mathcal{AB0}$ `\mathcal{AB0}`  |
+|$\it Ab0$ `\it Ab0`                  |$\tt Ab0$ `\tt Ab0`                 |$\cal AB0$ `\cal AB0`            |
+|$\emph{Ab0}$ `\emph{Ab0}`            |                                    |$\mathscr{AB}$ `\mathscr{AB}`    |
 
 One can stack font family, font weight, and font shape by using the `\textXX` versions of the font functions. So `\textsf{\textbf{H}}` will produce $\textsf{\textbf{H}}$. The other versions do not stack, e.g., `\mathsf{\mathbf{H}}` will produce $\mathsf{\mathbf{H}}$.
 
diff --git a/src/buildCommon.js b/src/buildCommon.js
@@ -700,7 +700,10 @@ const fontMap: {[string]: {| variant: FontVariant, fontName: string |}} = {
         variant: "italic",
         fontName: "Math-Italic",
     },
-
+    "mathsfit": {
+        variant: "sans-serif-italic",
+        fontName: "SansSerif-Italic",
+    },
     // "boldsymbol" is missing because they require the use of multiple fonts:
     // Math-BoldItalic and Main-Bold.  This is handled by a special case in
     // makeOrd which ends up calling boldsymbol.
diff --git a/src/buildMathML.js b/src/buildMathML.js
@@ -98,6 +98,8 @@ export const getVariant = function(
         return "bold";
     } else if (font === "mathbb") {
         return "double-struck";
+    } else if (font === "mathsfit") {
+        return "sans-serif-italic";
     } else if (font === "mathfrak") {
         return "fraktur";
     } else if (font === "mathscr" || font === "mathcal") {
diff --git a/src/functions/font.js b/src/functions/font.js
@@ -33,7 +33,7 @@ defineFunction({
     type: "font",
     names: [
         // styles, except \boldsymbol defined below
-        "\\mathrm", "\\mathit", "\\mathbf", "\\mathnormal",
+        "\\mathrm", "\\mathit", "\\mathbf", "\\mathnormal", "\\mathsfit",
 
         // families
         "\\mathbb", "\\mathcal", "\\mathfrak", "\\mathscr", "\\mathsf",
diff --git a/src/styles/katex.scss b/src/styles/katex.scss
@@ -158,6 +158,7 @@ $display-margin: 1em 0 !default;
         font-weight: bold;
     }
 
+    .mathsfit,
     .mathitsf,
     .textitsf {
         font-family: KaTeX_SansSerif;
diff --git a/test/katex-spec.js b/test/katex-spec.js
@@ -2048,6 +2048,19 @@ describe("A MathML font tree-builder", function() {
         expect(markup).toContain("<mo>+</mo>");
     });
 
+    it("should render \\mathsfit{" + contents + "} with the correct mathvariants", function() {
+        const tex = `\\mathsfit{${contents}}`;
+        const tree = getParsed(tex);
+        const markup = buildMathML(tree, tex, defaultOptions).toMarkup();
+        expect(markup).toContain("<mi mathvariant=\"sans-serif-italic\">A</mi>");
+        expect(markup).toContain("<mi mathvariant=\"sans-serif-italic\">x</mi>");
+        expect(markup).toContain("<mn mathvariant=\"sans-serif-italic\">2</mn>");
+        expect(markup).toContain("<mi mathvariant=\"sans-serif-italic\">\u03c9</mi>"); // \omega
+        expect(markup).toContain("<mi mathvariant=\"sans-serif-italic\">\u03A9</mi>"); // \Omega
+        expect(markup).toContain("<mi mathvariant=\"sans-serif-italic\">\u0131</mi>"); // \imath
+        expect(markup).toContain("<mo>+</mo>");
+    });
+
     it("should render a combination of font and color changes", function() {
         let tex = r`\textcolor{blue}{\mathbb R}`;
         let tree = getParsed(tex);
diff --git a/test/screenshotter/images/MathSfIt-chrome.png b/test/screenshotter/images/MathSfIt-chrome.png
diff --git a/test/screenshotter/images/MathSfIt-firefox.png b/test/screenshotter/images/MathSfIt-firefox.png
diff --git a/test/screenshotter/images/MathSfIt-safari.png b/test/screenshotter/images/MathSfIt-safari.png
diff --git a/test/screenshotter/ss_data.yaml b/test/screenshotter/ss_data.yaml
@@ -253,6 +253,7 @@ MathNormal: \mathnormal{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}
 MathOp: a\mathop+b\mathop:c\mathop{\delta}e\mathop{\textrm{and}}f\mathrel{\mathop{:}}=g\sin h
 MathRm: \mathrm{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}
 MathSf: \mathsf{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}
+MathSfIt: \mathsfit{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}
 MathScr: \mathscr{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}
 MathtoolsMatrix: \begin{matrix*}[l] a & -1 \\ -1 & d \end{matrix*} \; \begin{pmatrix*}[r] a & -1 \\ -1 & d \end{pmatrix*}
 MathTt: \mathtt{Ax2k\breve{a}\omega\Omega\imath+\KaTeX}

Original file line number	Diff line number	Diff line change
`@@ -158,6 +158,7 @@ $display-margin: 1em 0 !default;`
`158`	`158`	`font-weight: bold;`
`159`	`159`	`}`
`160`	`160`
	`161`	`+ .mathsfit,`
`161`	`162`	`.mathitsf,`
`162`	`163`	`.textitsf {`
`163`	`164`	`font-family: KaTeX_SansSerif;`