fix: fixed layout of \placeholder and \sqrt when a mathstyle is a…

…pplied
timedgqb · Apr 25, 2021 · 8704ef7 · 8704ef7
1 parent 256cf62
commit 8704ef7
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@
 - Correctly apply TeX inter-atom spacing rules as per TeXBook p. 270. The
   spacing of two consecutive binary atoms (e.g. `+-`) was incorrect, as well as
   some other combinations.
+- Fixed layout of `\sqrt` when a style is applied
+- Fixed display of `\placeholder` when a style is applied
 
 ## 0.63.1 (2021-04-24)
 

diff --git a/examples/test-cases/static.html b/examples/test-cases/static.html
@@ -98,6 +98,11 @@ <h1>MathLive Static Test Cases</h1>
                 comment: 'Reduced size of 2. 3 and 4 are even smaller. No spacing betwen - and 3/4 fraction.',
                 latex: `-1-\\frac56-1-x^{2-\\frac34}`,
             },
+            {
+              title: 'Surd and placeholder ',
+                comment: 'Root is in scriptstyle (or smaller), scriptstyle affects root layout',
+              latex: '\\sqrt[\\placeholder{}]{x}\\scriptstyle \\sqrt[\\placeholder{}]{x}',
+            },
             {
                 title: 'Spacing',
                 latex: `\\begin{gathered}

diff --git a/src/core-atoms/placeholder.ts b/src/core-atoms/placeholder.ts
@@ -18,7 +18,9 @@ export class PlaceholderAtom extends Atom {
       return context.renderPlaceholder(context);
     }
     return this.makeSpan(context, '⬚', {
-      classes: this.caret ? 'ML__placeholder-selected' : '',
+      classes:
+        context.parentMathstyle.adjustTo(context.mathstyle) +
+        (this.caret ? 'ML__placeholder-selected' : ''),
     });
   }
 

diff --git a/src/core-atoms/surd.ts b/src/core-atoms/surd.ts
@@ -103,7 +103,8 @@ export class SurdAtom extends Atom {
 
     if (!this.above) {
       const result = new Span([delim, body], {
-        classes: className,
+        classes:
+          className + context.parentMathstyle.adjustTo(context.mathstyle),
         type: 'mord',
       });
       if (this.caret) result.caret = this.caret;
@@ -112,10 +113,12 @@ export class SurdAtom extends Atom {
 
     // Handle the optional root index
     // The index is always in scriptscript style
-    const newcontext = context.clone({
-      mathstyle: MATHSTYLES.scriptscriptstyle,
-    });
-    const root = Atom.render(newcontext, this.above);
+    const root = Atom.render(
+      context.clone({
+        mathstyle: MATHSTYLES.scriptscriptstyle,
+      }),
+      this.above
+    );
     // Figure out the height and depth of the inner part
     const innerRootHeight = Math.max(delim.height, body.height);
     const innerRootDepth = Math.max(delim.depth, body.depth);
@@ -133,7 +136,8 @@ export class SurdAtom extends Atom {
     const result = new Span(
       [new Span(rootVlist, { classes: 'root' }), delim, body],
       {
-        classes: className,
+        classes:
+          className + context.parentMathstyle.adjustTo(context.mathstyle),
         type: 'mord',
       }
     );

diff --git a/src/editor/virtual-keyboard-utils.ts b/src/editor/virtual-keyboard-utils.ts
@@ -1279,15 +1279,15 @@ export function makeKeycap(
     if (element.getAttribute('data-latex')) {
       html = latexToMarkup(
         element.getAttribute('data-latex').replace(/&quot;/g, '"'),
-        { '?': '{\\color{#555}{\\scriptstyle \\char"2B1A}}' }
+        { '?': '\\placeholder{}' }
       );
     } else if (
       element.getAttribute('data-insert') &&
       element.innerHTML === ''
     ) {
       html = latexToMarkup(
         element.getAttribute('data-insert').replace(/&quot;/g, '"'),
-        { '?': '{\\color{#555}{\\scriptstyle \\char"2B1A}}' }
+        { '?': '\\placeholder{}' }
       );
     } else if (element.getAttribute('data-content')) {
       html = element.getAttribute('data-content').replace(/&quot;/g, '"');

diff --git a/test/__snapshots__/markup.test.ts.snap b/test/__snapshots__/markup.test.ts.snap
@@ -1326,6 +1326,13 @@ Array [
 ]
 `;
 
+exports[`SPACING AND KERN 5/ \\sqrt[\\placeholder{}]{x}\\scriptstyle \\sqrt[\\placeholder{}]{x} renders correctly 1`] = `
+Array [
+  "<span class=\\"ML__mathlive\\"><span class=\\"ML__strut\\" style=\\"height:0.91em\\"></span><span class=\\"ML__strut--bottom\\" style=\\"height:1.21em;vertical-align:-0.29em\\"></span><span class=\\"ML__base\\"><span class=\\"sqrt\\"><span class=\\"root\\"><span class=\\"vlist\\"><span style=\\"top:-0.39em\\"><span aria-hidden=\\"true\\" style=\\"font-size:0.5em\\"></span></span></span></span><span class=\\"sqrt-sign\\" style=\\"top:-0.05em\\"><span class=\\"style-wrap\\"><span class=\\"delimsizing size1\\">√</span></span></span><span class=\\"vlist\\"><span><span><span><span class=\\"ML__mathit\\">x</span></span></span></span><span style=\\"top:-0.86em\\"><span class=\\"sqrt-line\\"></span></span></span></span><span><span class=\\"sqrt sz-10-7\\"><span class=\\"root\\"><span class=\\"vlist\\"><span style=\\"top:-0.36em\\"><span aria-hidden=\\"true\\" style=\\"font-size:0.72em\\"></span></span></span></span><span class=\\"sqrt-sign\\" style=\\"top:0.03em\\"><span class=\\"ML__small-delim style-wrap\\"><span>√</span></span></span><span class=\\"vlist\\"><span><span aria-hidden=\\"true\\" style=\\"font-size:1.43em\\"></span><span><span><span class=\\"ML__mathit\\">x</span></span></span></span><span style=\\"top:-0.72em\\"><span aria-hidden=\\"true\\" style=\\"font-size:1.43em\\"></span><span class=\\"sz-7-10 sqrt-line\\"></span></span></span></span></span></span></span>",
+  "no-error",
+]
+`;
+
 exports[`SUPERSCRIPT/SUBSCRIPT -1-\\frac56-1-x^{2-\\frac34} 1`] = `
 Array [
   "<span class=\\"ML__mathlive\\"><span class=\\"ML__strut\\" style=\\"height:1.62em\\"></span><span class=\\"ML__strut--bottom\\" style=\\"height:2.31em;vertical-align:-0.68em\\"></span><span class=\\"ML__base\\"><span class=\\"ML__cmr\\">−</span><span class=\\"ML__cmr\\">1</span><span class=\\"ML__cmr\\" style=\\"margin-left:0.23em\\">−</span><span style=\\"margin-left:0.23em\\"><span class=\\"vlist mfrac\\"><span style=\\"top:0.69em\\"><span><span class=\\"ML__cmr\\">6</span></span></span><span style=\\"top:-0.22em\\"><span class=\\"frac-line\\"></span></span><span style=\\"top:-0.67em\\"><span><span class=\\"ML__cmr\\">5</span></span></span></span></span><span class=\\"ML__cmr\\" style=\\"margin-left:0.23em\\">−</span><span class=\\"ML__cmr\\" style=\\"margin-left:0.23em\\">1</span><span class=\\"ML__cmr\\" style=\\"margin-left:0.23em\\">−</span><span class=\\"ML__mathit\\" style=\\"margin-left:0.23em\\">x</span><span><span class=\\"msubsup\\"><span class=\\"vlist\\"><span style=\\"top:-0.58em;margin-right:0.05em\\"><span><span class=\\"sz-10-7 ML__cmr\\">2</span><span class=\\"sz-10-7 ML__cmr\\">−</span><span><span class=\\"vlist mfrac sz-10-7\\"><span style=\\"top:0.49em\\"><span aria-hidden=\\"true\\" style=\\"font-size:1.43em\\"></span><span><span class=\\"sz-7-5 ML__cmr\\">4</span></span></span><span style=\\"top:-0.22em\\"><span aria-hidden=\\"true\\" style=\\"font-size:1.43em\\"></span><span class=\\"frac-line\\"></span></span><span style=\\"top:-0.38em\\"><span aria-hidden=\\"true\\" style=\\"font-size:1.43em\\"></span><span><span class=\\"sz-7-5 ML__cmr\\">3</span></span></span></span></span></span></span></span></span></span></span></span>",

diff --git a/test/markup.test.ts b/test/markup.test.ts
@@ -131,6 +131,7 @@ describe('SPACING AND KERN', () => {
     'a\\hspace{3em} b',
     'a\\hskip 3em b',
     '+-a+b=c+-d=x^{2-\\frac{1}{2}}',
+    '\\sqrt[\\placeholder{}]{x}\\scriptstyle \\sqrt[\\placeholder{}]{x}',
   ])('%#/ %s renders correctly', (x) => {
     expect(markupAndError(x)).toMatchSnapshot();
   });