Fix \vec (#1018)

* Fix \vec

In accent \vec, replace the combining font glyph with an SVG.

* Fix lint error

* update screenshots containing vectors

* update HorizontalBraces

src/buildCommon.js

@@ -719,6 +719,30 @@ const fontMap: {[string]: {| variant: string, fontName: string |}} = {
     },
 };
 
+const svgData: {
+    [string]: ([string, number, number])
+} = {
+     //   path, width, height
+    vec: ["vec", 0.471, 0.714],  // values from the font glyph
+};
+
+const staticSvg = function(value: string, options: Options): domTree.span {
+    // Create a span with inline SVG for the element.
+    const [pathName, width, height] = svgData[value];
+    const path = new domTree.pathNode(pathName);
+    const svgNode = new domTree.svgNode([path], {
+        "width": width + "em",
+        "height": height + "em",
+        "viewBox": "0 0 " + 1000 * width + " " + 1000 * height,
+        "preserveAspectRatio": "xMinYMin",
+    });
+    const span = makeSpan(["overlay"], [svgNode], options);
+    span.height = height;
+    span.style.height = height + "em";
+    span.style.width = width + "em";
+    return span;
+};
+
 export default {
     fontMap,
     makeSymbol,
@@ -730,6 +754,7 @@ export default {
     makeVList,
     makeOrd,
     makeVerb,
+    staticSvg,
     tryCombineChars,
     prependChildren,
     spacingFunctions,

src/buildHTML.js

@@ -680,22 +680,28 @@ groupTypes.accent = function(group, options) {
     // Build the accent
     let accentBody;
     if (!group.value.isStretchy) {
-        const accent = buildCommon.makeSymbol(
+        let accent;
-            group.value.label, "Main-Regular", group.mode, options);
+        if (group.value.label === "\\vec") {
+            // Before version 0.9, \vec used the combining font glyph U+20D7.
+            // But browsers, especially Safari, are not consistent in how they
+            // render combining characters when not preceded by a character.
+            // So now we use an SVG.
+            // If Safari reforms, we should consider reverting to the glyph.
+            accent = buildCommon.staticSvg("vec", options);
+        } else {
+            accent = buildCommon.makeSymbol(
+                group.value.label, "Main-Regular", group.mode, options);
+        }
         // Remove the italic correction of the accent, because it only serves to
         // shift the accent over to a place we don't want.
         accent.italic = 0;
 
-        // The \vec character that the fonts use is a combining character, and
+        // The \H character that the fonts use is a combining character, and
         // thus shows up much too far to the left. To account for this, we add a
         // specific class which shifts the accent over to where we want it.
         // TODO(emily): Fix this in a better way, like by changing the font
-        // Similarly, text accent \H is a combining character and
-        // requires a different adjustment.
         let accentClass = null;
-        if (group.value.label === "\\vec") {
+        if (group.value.label === '\\H') {
-            accentClass = "accent-vec";
-        } else if (group.value.label === '\\H') {
             accentClass = "accent-hungarian";
         }
 

src/svgGeometry.js

@@ -251,6 +251,15 @@ c1 2.14 1 3.21 1 4.28 0 5.347-3 9.626-7 10.696l-22.3 12.622C852.6 158.372 751
  14.495l-20.7 5.574c-366.85 99.79-607.3 139.372-776.3 139.372-338 0-409
  -175.236-744-175.236z`,
 
+    // vec is from glyph U+20D7 in font KaTeX Main
+    vec: `M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
+3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
+10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
+-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
+-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
+H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
+c-16-25.333-24-45-24-59z`,
+
     // widehat1 is a modified version of a glyph from the MnSymbol package
     widehat1: `M529 0h5l519 115c5 1 9 5 9 10 0 1-1 2-1 3l-4 22
 c-1 5-5 9-11 9h-2L532 67 19 159h-2c-5 0-9-4-11-9l-5-22c-1-6 2-12 8-13z`,

static/katex.less

@@ -558,19 +558,16 @@
             width: 0;
         }
 
-        .accent-body.accent-vec > span {
-            position: relative;
-            // This value is half of the value that the MathJax's makeFF shifts
-            // it left. We center it by shifting it half way right again.
-            left: 0.326em;
-        }
-
         .accent-body.accent-hungarian > span {
             position: relative;
             left: 0.250em; // width of space
         }
     }
 
+    .overlay {
+        display: block;
+    }
+
     .mtable {
         .vertical-separator {
             display: inline-block;