Merge pull request #73 from mathjax/ie-stretchy-braces

Improve CSS for stretchy braces in IE and Edge
mathjax · Mar 5, 2018 · bd1d2ca · bd1d2ca
2 parents cc0214c + a439df8
commit bd1d2ca
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/mathjax3-ts/output/chtml/Wrappers/mo.ts b/mathjax3-ts/output/chtml/Wrappers/mo.ts
@@ -80,17 +80,18 @@ export class CHTMLmo extends CHTMLWrapper {
         'mjx-stretchy-v': {
             display: 'inline-block'
         },
+        'mjx-stretchy-v > *': {
+            display: 'block'
+        },
         'mjx-stretchy-v > mjx-beg': {
-            display: 'block',
             height: 0
         },
-        'mjx-stretchy-v > mjx-end': {
-            display: 'block'
-        },
         'mjx-stretchy-v > mjx-end > mjx-c': {
             display: 'block'
         },
-        'mjx-stretchy-v > mjx-beg > mjx-c, mjx-stretchy-v > mjx-end > mjx-c': {
+        'mjx-stretchy-v > * > mjx-c': {
+            transform: 'scale(1)',   // improves Firefox positioning
+            'transform-origin': 'left center',
             overflow: 'hidden'
         },
         'mjx-stretchy-v > mjx-ext': {
@@ -101,7 +102,8 @@ export class CHTMLmo extends CHTMLWrapper {
             overflow: 'hidden'
         },
         'mjx-stretchy-v > mjx-ext > mjx-c': {
-            transform: 'scaleY(500) translateY(.1em)'
+            transform: 'scaleY(500) translateY(.1em)',
+            overflow: 'visible'
         },
         'mjx-mark': {
             display: 'inline-block',

diff --git a/mathjax3-ts/output/chtml/Wrappers/mtable.ts b/mathjax3-ts/output/chtml/Wrappers/mtable.ts
@@ -70,7 +70,8 @@ export class CHTMLmtable extends CHTMLWrapper {
         //
         // Determine the number of columns and rows
         //
-        this.numCols = this.childNodes.map(row => (row as CHTMLmtr).numCells).reduce((a, b) => Math.max(a, b));
+        this.numCols = this.childNodes.map(row => (row as CHTMLmtr).numCells)
+                                      .reduce((a, b) => Math.max(a, b), 0);
         this.numRows = this.childNodes.length;
         //
         // Stretch the columns (rows are already taken care of in the CHTMLmtr wrapper)
@@ -192,12 +193,17 @@ export class CHTMLmtable extends CHTMLWrapper {
         const cLines = this.getColumnAttributes('columnlines').slice(0, cMax).map(x => (x === 'none' ? 0 : .07));
         const rLines = this.getColumnAttributes('rowlines').slice(0, cMax).map(x => (x === 'none' ? 0 : .07));
         const a = this.font.params.axis_height;
-        const h = H.concat(D, rLines).reduce((a, b) => a + b) + (frame ? .14 : 0) +
-            rSpace.map(x => parseFloat(x)).reduce((a, b) => a + b) + 2 * parseFloat(fSpace[1]);
+        const h = H.concat(D, rLines).reduce((a, b) => a + b, 0)
+                + (frame ? .14 : 0)
+                + rSpace.map(x => parseFloat(x))
+                        .reduce((a, b) => a + b, 0)
+                + 2 * parseFloat(fSpace[1]);
         bbox.h = h / 2 + a;
         bbox.d = h / 2 - a;
-        bbox.w = W.concat(cLines).reduce((a, b) => a + b) +
-            cSpace.map(x => parseFloat(x)).reduce((a, b) => a + b) + 2 * parseFloat(fSpace[1]);
+        bbox.w = W.concat(cLines).reduce((a, b) => a + b, 0)
+               + cSpace.map(x => parseFloat(x))
+                       .reduce((a, b) => a + b, 0)
+               + 2 * parseFloat(fSpace[1]);
     }
 
     /******************************************************************/

diff --git a/mathjax3-ts/output/chtml/fonts/tex.ts b/mathjax3-ts/output/chtml/fonts/tex.ts
@@ -404,25 +404,24 @@ export class TeXFont extends FontData {
         const Hb = this.addDelimiterVPart(styles, c, 'beg', beg);
         this.addDelimiterVPart(styles, c, 'ext', ext);
         const He = this.addDelimiterVPart(styles, c, 'end', end);
+        const css: StyleData = {};
         if (mid) {
-            this.addDelimiterVPart(styles, c, 'mid', mid);
-            styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] > mjx-ext'] = {height: '50%'}
+            const Hm = this.addDelimiterVPart(styles, c, 'mid', mid);
+            css.height = '50%';
+            styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] > mjx-mid'] = {
+                'margin-top': this.em(-Hm/2),
+                'margin-bottom': this.em(-Hm/2)
+            };
         }
-        const css: StyleData = {};
         if (Hb) {
             css['border-top-width'] = this.em0(Hb - .03);
         }
         if (He) {
             css['border-bottom-width'] = this.em0(He - .03);
-            css['margin-bottom'] = this.em(-He);
-            if (mid) {
-                styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] > mjx-ext:last-of-type'] = {
-                    'margin-top': this.em(-He)
-                };
-            }
+            styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] > mjx-end'] = {'margin-top': this.em(-He)};
         }
         if (Object.keys(css).length) {
-            styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] mjx-ext'] = css;
+            styles['.MJX-TEX mjx-stretchy-v[c="' + c + '"] > mjx-ext'] = css;
         }
     }