Italic correction

mathjax3-ts/output/chtml/BBox.ts

@@ -65,6 +65,7 @@ export class BBox {
     public L: number;      // extra space on the left
     public R: number;      // extra space on the right
     public pwidth: string; // percentage width (for tables)
+    public ic: number;
 
     /*
      * @return{BBox}  A BBox initialized to zeros
@@ -91,7 +92,7 @@ export class BBox {
         this.w = def.w || 0;
         this.h = ('h' in def ? def.h : -BIGDIMEN);
         this.d = ('d' in def ? def.d : -BIGDIMEN);
-        this.x = this.y = this.L = this.R = 0;
+        this.x = this.y = this.L = this.R = this.ic = 0;
         this.scale = this.rscale = 1;
         this.pwidth = '';
     }

mathjax3-ts/output/chtml/Wrapper.ts

@@ -118,7 +118,6 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
         //
         //  These don't have Wrapper subclasses, so add their styles here
         //
-        'mjx-mi': {display: 'inline-block'},
         'mjx-mn': {display: 'inline-block'},
         'mjx-mtext': {display: 'inline-block'},
         'mjx-merror': {

mathjax3-ts/output/chtml/Wrappers.ts

@@ -23,6 +23,7 @@
 
 import {CHTMLWrapper} from './Wrapper.js';
 import {CHTMLmath} from './Wrappers/math.js';
+import {CHTMLmi} from './Wrappers/mi.js';
 import {CHTMLmo} from './Wrappers/mo.js';
 import {CHTMLms} from './Wrappers/ms.js';
 import {CHTMLmspace} from './Wrappers/mspace.js';
@@ -44,6 +45,7 @@ export const CHTMLWrappers: {[kind: string]: typeof CHTMLWrapper}  = {
     [CHTMLmath.kind]: CHTMLmath,
     [CHTMLmrow.kind]: CHTMLmrow,
     [CHTMLinferredMrow.kind]: CHTMLinferredMrow,
+    [CHTMLmi.kind]: CHTMLmi,
     [CHTMLmo.kind]: CHTMLmo,
     [CHTMLms.kind]: CHTMLms,
     [CHTMLmspace.kind]: CHTMLmspace,

mathjax3-ts/output/chtml/Wrappers/TeXAtom.ts

@@ -56,6 +56,9 @@ export class CHTMLTeXAtom extends CHTMLWrapper {
      */
     public computeBBox(bbox: BBox) {
         super.computeBBox(bbox);
+        if (this.childNodes[0] && this.childNodes[0].bbox.ic) {
+            bbox.ic = this.childNodes[0].bbox.ic;
+        }
         //
         // Center VCENTER atoms vertically
         //

mathjax3-ts/output/chtml/Wrappers/TextNode.ts

@@ -24,6 +24,7 @@
 import {CHTMLWrapper} from '../Wrapper.js';
 import {BBox} from '../BBox.js';
 import {TextNode} from '../../../core/MmlTree/MmlNode.js';
+import {CharOptions} from '../FontData.js';
 
 /*****************************************************************/
 /*
@@ -63,19 +64,31 @@ export class CHTMLTextNode extends CHTMLWrapper {
             // FIXME:  measure this using DOM, if possible
         } else {
             const chars = this.unicodeChars((this.node as TextNode).getText());
-            let [h, d, w] = this.font.getChar(variant, chars[0]) || [0, 0, 0];
+            let [h, d, w, data] = this.getChar(variant, chars[0]);
             bbox.h = h;
             bbox.d = d;
             bbox.w = w;
+            bbox.ic = data.ic || 0;
             for (let i = 1, m = chars.length; i < m; i++) {
-                [h, d, w] = this.font.getChar(variant, chars[i]) || [0, 0, 0];
+                [h, d, w, data] = this.getChar(variant, chars[i]);
                 bbox.w += w;
                 if (h > bbox.h) bbox.h = h;
                 if (d > bbox.d) bbox.d = d;
+                bbox.ic = data.ic || 0;
             }
         }
     }
 
+    /*
+     * @param{string} variant   The variant in which to look for the character
+     * @param{number} n         The number of the character to look up
+     * @return{CharData}        The full CharData object, with CharOptions guaranteed to be defined
+     */
+    protected getChar(variant: string, n: number) {
+        const char = this.font.getChar(variant, n) || [0, 0, 0, null];
+        return [char[0], char[1], char[2], char[3] || {}] as [number, number, number, CharOptions];
+    }
+
     /******************************************************/
     /*
      * TextNodes don't need these, since these properties

mathjax3-ts/output/chtml/Wrappers/mi.ts

@@ -0,0 +1,62 @@
+/*************************************************************
+ *
+ *  Copyright (c) 2017 The MathJax Consortium
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/**
+ * @fileoverview  Implements the CHTMLmi wrapper for the MmlMi object
+ *
+ * @author dpvc@mathjax.org (Davide Cervone)
+ */
+
+import {CHTMLWrapper} from '../Wrapper.js';
+import {MmlMi} from '../../../core/MmlTree/MmlNodes/mi.js';
+import {BBox} from '../BBox.js';
+
+/*****************************************************************/
+/*
+ *  The CHTMLmi wrapper for the MmlMi object
+ */
+export class CHTMLmi extends CHTMLWrapper {
+    public static kind = MmlMi.prototype.kind;
+
+    /*
+     * True if no italic correction should be used
+     */
+    public noIC: boolean = false;
+
+    /*
+     * @override
+     */
+    public toCHTML(parent: HTMLElement) {
+        super.toCHTML(parent);
+        if (this.noIC) {
+            this.chtml.setAttribute('noIC', 'true');
+        }
+    }
+
+    /*
+     * @override
+     */
+    public computeBBox(bbox: BBox) {
+        super.computeBBox(bbox);
+        const child = this.childNodes[this.childNodes.length-1];
+        if (child && child.bbox.ic) {
+            bbox.ic = child.bbox.ic;
+            bbox.w += bbox.ic;
+        }
+    }
+
+}

mathjax3-ts/output/chtml/Wrappers/mo.ts

@@ -22,6 +22,7 @@
  */
 
 import {CHTMLWrapper, StringMap} from '../Wrapper.js';
+import {CHTMLWrapperFactory} from '../WrapperFactory.js';
 import {MmlMo} from '../../../core/MmlTree/MmlNodes/mo.js';
 import {MmlNode} from '../../../core/MmlTree/MmlNode.js';
 import {BBox} from '../BBox.js';
@@ -104,12 +105,18 @@ export class CHTMLmo extends CHTMLWrapper {
 
     };
 
+    /*
+     * True if no italic correction should be used
+     */
+    public noIC: boolean = false;
+
     /*
      * The font size that a stretched operator uses.
      * If -1, then stretch arbitrarily, and bbox gives the actual height, depth, width
      */
     public size: number = null;
 
+
     /*
      * @override
      */
@@ -121,6 +128,9 @@ export class CHTMLmo extends CHTMLWrapper {
             this.getStretchedVariant([]);
         }
         let chtml = this.standardCHTMLnode(parent);
+        if (this.noIC) {
+            chtml.setAttribute('noIC', 'true');
+        }
         if (this.stretch && this.size < 0) {
             this.stretchHTML(chtml, symmetric);
         } else {
@@ -196,6 +206,11 @@ export class CHTMLmo extends CHTMLWrapper {
         }
         if (this.stretch && this.size < 0) return;
         super.computeBBox(bbox);
+        const child = this.childNodes[this.childNodes.length-1];
+        if (child && child.bbox.ic) {
+            bbox.ic = child.bbox.ic;
+            if (!this.noIC) bbox.w += bbox.ic;
+        }
         if (symmetric) {
             const d = ((bbox.h + bbox.d) / 2 + this.font.params.axis_height) - bbox.h;
             bbox.h += d;

mathjax3-ts/output/chtml/Wrappers/msqrt.ts

@@ -53,6 +53,10 @@ export class CHTMLmsqrt extends CHTMLWrapper {
         },
         'mjx-sqrt > mjx-box': {
             'border-top': '.07em solid'
+        },
+        'mjx-sqrt.mjx-tall > mjx-box': {
+            'padding-left': '.3em',
+            'margin-left': '-.3em'
         }
     };
 
@@ -126,7 +130,7 @@ export class CHTMLmsqrt extends CHTMLWrapper {
      * @override
      */
     public toCHTML(parent: HTMLElement) {
-        const surd = this.childNodes[this.surd];
+        const surd = this.childNodes[this.surd] as CHTMLmo;
         const base = this.childNodes[this.base];
         //
         //  Get the parameters for the spacing of the parts
@@ -153,6 +157,14 @@ export class CHTMLmsqrt extends CHTMLWrapper {
         this.addRoot(ROOT, root, sbox);
         surd.toCHTML(SURD);
         base.toCHTML(BASE);
+        if (surd.size < 0) {
+            //
+            // size < 0 means surd is multi-character.  The angle glyph at the
+            // top is hard to align with the horizontal line, so overlap them
+            // using CSS.
+            //
+            SQRT.classList.add('mjx-tall');
+        }
     }
 
     /*

mathjax3-ts/output/chtml/Wrappers/msubsup.ts

@@ -50,7 +50,7 @@ export class CHTMLmsub extends CHTMLscriptbase {
      * @override
      */
     protected getOffset(bbox: BBox, sbox: BBox) {
-        return -this.getV(bbox, sbox);
+        return [0, -this.getV(bbox, sbox)];
     }
 
 }
@@ -63,6 +63,8 @@ export class CHTMLmsub extends CHTMLscriptbase {
 export class CHTMLmsup extends CHTMLscriptbase {
     public static kind = MmlMsup.prototype.kind;
 
+    public static useIC: boolean = true;
+
     /*
      * @override
      */
@@ -76,7 +78,8 @@ export class CHTMLmsup extends CHTMLscriptbase {
      * @override
      */
     public getOffset(bbox: BBox, sbox: BBox) {
-        return this.getU(bbox, sbox);
+        const x = (this.baseCore.bbox.ic ? .2 * this.baseCore.bbox.ic + .05 : 0);
+        return [x, this.getU(bbox, sbox)];
     }
 
 }
@@ -99,6 +102,8 @@ export class CHTMLmsubsup extends CHTMLscriptbase {
         }
     };
 
+    public static noIC: boolean = true;
+
     /*
      *  Cached values for the script offsets and separation (so if they are
      *  computed in computeBBox(), they don't have to be recomputed for toCHTML())
@@ -131,6 +136,10 @@ export class CHTMLmsubsup extends CHTMLscriptbase {
         this.sup.toCHTML(stack);
         stack.appendChild(this.html('mjx-spacer', {style: {'margin-top': this.em(q)}}));
         this.sub.toCHTML(stack);
+        const corebox = this.baseCore.bbox;
+        if (corebox.ic) {
+            this.sup.chtml.style.marginLeft = this.em((1.2 * corebox.ic + .05) / this.sup.bbox.rscale);
+        }
     }
 
     /*
@@ -162,8 +171,21 @@ export class CHTMLmsubsup extends CHTMLscriptbase {
         if (this.UVQ) return this.UVQ;
         const tex = this.font.params;
         const t = 3 * tex.rule_thickness;
-        let [u, v] = (this.isCharBase() ? [0, 0] : [this.getU(basebox, supbox),
-                       Math.max(basebox.d + tex.sub_drop * subbox.rscale, tex.sub2)]);
+        const subscriptshift = this.length2em(this.node.attributes.get('subscriptshift'), tex.sub2);
+        const drop = (this.isCharBase() ? 0 : basebox.d + tex.sub_drop * subbox.rscale);
+        //
+        // u and v are the veritcal shifts of the scripts, initially set to minimum values and then adjusted
+        //
+        let [u, v] = [this.getU(basebox, supbox), Math.max(drop, subscriptshift)];
+        //
+        // q is the space currently between the super- and subscripts.
+        // If it is less than 3 rule thicknesses,
+        //   increase the subscript offset to make the space 3 rule thicknesses
+        //   If the bottom of the superscript is below 4/5 of the x-height
+        //     raise both the super- and subscripts by the difference
+        //     (make the bottom of the superscript be at 4/5 the x-height, and the
+        //      subscript 3 rule thickness below that).
+        //
         let q = (u - supbox.d * supbox.rscale) - (subbox.h * subbox.rscale - v);
         if (q < t) {
             v += t - q;
@@ -173,6 +195,10 @@ export class CHTMLmsubsup extends CHTMLscriptbase {
                 v -= p;
             }
         }
+        //
+        // Make sure the shifts are at least the minimum amounts and
+        // return the shifts and the space between the scripts
+        //
         u = Math.max(this.length2em(this.node.attributes.get('superscriptshift'), u), u);
         v = Math.max(this.length2em(this.node.attributes.get('subscriptshift'), v), v);
         q = (u - supbox.d * supbox.rscale) - (subbox.h * subbox.rscale - v);