fix: Implement \pmb via CSS text-shadow (#3505)

* Fix: Implement \pmb via CSS text-shadow

* Update screen shots

Co-authored-by: ylemkimon <y@ylem.kim>

contrib/render-a11y-string/render-a11y-string.js

@@ -392,6 +392,11 @@ const handleObject = (
             break;
         }
 
+        case "pmb": {
+            a11yStrings.push("bold");
+            break;
+        }
+
         case "phantom": {
             a11yStrings.push("empty space");
             break;

src/domTree.js

@@ -153,6 +153,7 @@ export type CssStyle = $Shape<{
     minWidth: string,
     paddingLeft: string,
     position: string,
+    textShadow: string,
     top: string,
     width: string,
     verticalAlign: string,

src/functions.js

@@ -10,6 +10,7 @@ export default functions;
 import "./functions/accent";
 import "./functions/accentunder";
 import "./functions/arrow";
+import "./functions/pmb";
 import "./environments/cd";
 import "./functions/char";
 import "./functions/color";

src/functions/pmb.js

@@ -0,0 +1,44 @@
+// @flow
+import defineFunction, {ordargument} from "../defineFunction";
+import buildCommon from "../buildCommon";
+import mathMLTree from "../mathMLTree";
+import * as html from "../buildHTML";
+import * as mml from "../buildMathML";
+import {binrelClass} from "./mclass";
+
+import type {ParseNode} from "../parseNode";
+
+// \pmb is a simulation of bold font.
+// The version of \pmb in ambsy.sty works by typesetting three copies
+// with small offsets. We use CSS text-shadow.
+// It's a hack. Not as good as a real bold font. Better than nothing.
+
+defineFunction({
+    type: "pmb",
+    names: ["\\pmb"],
+    props: {
+        numArgs: 1,
+        allowedInText: true,
+    },
+    handler({parser}, args) {
+        return {
+            type: "pmb",
+            mode: parser.mode,
+            mclass: binrelClass(args[0]),
+            body: ordargument(args[0]),
+        };
+    },
+    htmlBuilder(group: ParseNode<"pmb">, options) {
+        const elements = html.buildExpression(group.body, options, true);
+        const node = buildCommon.makeSpan([group.mclass], elements, options);
+        node.style.textShadow = "0.02em 0.01em 0.04px";
+        return node;
+    },
+    mathmlBuilder(group: ParseNode<"pmb">, style) {
+        const inner = mml.buildExpression(group.body, style);
+        // Wrap with an <mstyle> element.
+        const node = new mathMLTree.MathNode("mstyle", inner);
+        node.setAttribute("style", "text-shadow: 0.02em 0.01em 0.04px");
+        return node;
+    },
+});

src/macros.js

@@ -597,14 +597,6 @@ defineMacro("\\mod", "\\allowbreak" +
     "\\mathchoice{\\mkern18mu}{\\mkern12mu}{\\mkern12mu}{\\mkern12mu}" +
     "{\\rm mod}\\,\\,#1");
 
-// \pmb    --   A simulation of bold.
-// The version in ambsy.sty works by typesetting three copies of the argument
-// with small offsets. We use two copies. We omit the vertical offset because
-// of rendering problems that makeVList encounters in Safari.
-defineMacro("\\pmb", "\\html@mathml{" +
-    "\\@binrel{#1}{\\mathrlap{#1}\\kern0.5px#1}}" +
-    "{\\mathbf{#1}}");
-
 //////////////////////////////////////////////////////////////////////
 // LaTeX source2e
 

src/parseNode.js

@@ -414,6 +414,13 @@ type ParseNodeTypes = {
         loc?: ?SourceLocation,
         body: AnyParseNode,
     |},
+    "pmb": {|
+        type: "pmb",
+        mode: Mode,
+        loc?: ?SourceLocation,
+        mclass: string,
+        body: AnyParseNode[],
+    |},
     "raisebox": {|
         type: "raisebox",
         mode: Mode,