Improve \cancel (#1398)

* Fix \cancel

Fixes #1080.

Improve `\cancel` in three ways:

1. Better lateral spacing.
2. Steeper `\cancel` lines on single characters.
3. Treat height and depth to match the `cancel` package behavior, not its documentation.

* Update screenshots

src/functions/enclose.js

@@ -19,6 +19,13 @@ const htmlBuilder = (group, options) => {
     let img;
     let imgShift = 0;
 
+    // In the LaTeX cancel package, line geometry is slightly different
+    // depending on whether the subject is wider than it is tall, or vice versa.
+    // We don't know the width of a group, so as a proxy, we test if
+    // the subject is a single character. This captures most of the
+    // subjects that should get the "tall" treatment.
+    const isSingleChar = utils.isCharacterBox(group.value.body);
+
     if (label === "sout") {
         img = buildCommon.makeSpan(["stretchy", "sout"]);
         img.height = options.fontMetrics().defaultRuleThickness / scale;
@@ -26,7 +33,13 @@ const htmlBuilder = (group, options) => {
 
     } else {
         // Add horizontal padding
-        inner.classes.push(/cancel/.test(label) ? "cancel-pad" : "boxpad");
+        if (/cancel/.test(label)) {
+            if (!isSingleChar) {
+                inner.classes.push("cancel-pad");
+            }
+        } else {
+            inner.classes.push("boxpad");
+        }
 
         // Add vertical padding
         let vertPad = 0;
@@ -35,7 +48,7 @@ const htmlBuilder = (group, options) => {
         if (/box/.test(label)) {
             vertPad = label === "colorbox" ? 0.3 : 0.34;
         } else {
-            vertPad = utils.isCharacterBox(group.value.body) ? 0.2 : 0;
+            vertPad = isSingleChar ? 0.2 : 0;
         }
 
         img = stretchy.encloseSpan(inner, label, vertPad, options);
@@ -80,8 +93,14 @@ const htmlBuilder = (group, options) => {
     }
 
     if (/cancel/.test(label)) {
+        // The cancel package documentation says that cancel lines add their height
+        // to the expression, but tests show that isn't how it actually works.
+        vlist.height = inner.height;
+        vlist.depth = inner.depth;
+    }
+
+    if (/cancel/.test(label) && !isSingleChar) {
         // cancel does not create horiz space for its line extension.
-        // That is, not when adjacent to a mord.
         return buildCommon.makeSpan(["mord", "cancel-lap"], [vlist], options);
     } else {
         return buildCommon.makeSpan(["mord"], [vlist], options);

src/katex.less

@@ -538,15 +538,10 @@
     .cancel-pad {
         padding: 0 0.2em 0 0.2em;    // ref: cancel package  \advance\dimen@ 2\p@ %  "+2"
     }
-    .mord + .cancel-lap,
-    .mbin + .cancel-lap {
-        margin-left: -0.2em;
-    }
-    .cancel-lap + .mord,
-    .cancel-lap + .mbin,
-    .cancel-lap + .msupsub {
-        margin-left: -0.2em;
-    }
+    .cancel-lap {
+        margin-left: -0.2em;    // \cancel does not affect horizontal spacing.
+        margin-right: -0.2em;   // Apply negative margin to correct for 0.2em padding
+    }                           // inside the \cancel group.
     .sout {
         border-bottom-style: solid;
         border-bottom-width: 0.08em;

test/screenshotter/ss_data.yaml

@@ -305,8 +305,8 @@ StretchyAccentColor: |
 StrikeThrough: |
     \begin{array}{l}
         \cancel x \quad \cancel{2B} + \bcancel 5 +\bcancel{5ay} \\
-        \sout{5ab} + \sout{5ABC} + \xcancel{\oint_S{\vec E\cdot\hat n\,\mathrm d a}} \\
-        \frac{x+\cancel B}{x+\cancel x} + \frac{x+\cancel y}{x} + \cancel{B}_1^2 + \cancel{B^2} \\
+        \sout{5ab} + \sout{5ABC} + \xcancel{\oint_S{\vec E\cdot\hat n\,\mathrm d a}} \\[0.3em]
+        \frac{x+\cancel B}{x+\cancel x} + \frac{x+\cancel y}{x} + \cancel{B}_1^2 + \cancel{B^2} \\[0.2em]
         \left\lvert\cancel{ac}\right\rvert
     \end{array}
 StrikeThroughColor: |