Math tag support

mathjax3-ts/output/chtml/Wrapper.ts

@@ -105,6 +105,10 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
         'mjx-chtml [size="hg"]': {'font-size': '207%'},
         'mjx-chtml [size="HG"]': {'font-size': '249%'},
 
+        'mjx-chtml [width="full"]': {
+            width: '100%'
+        },
+
         'mjx-box': {display: 'inline-block'},
         'mjx-block': {display: 'block'},
         'mjx-itable': {display: 'inline-table'},
@@ -123,15 +127,7 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
             'background-color': 'yellow'
         },
 
-        'mjx-mphantom': {visibility: 'hidden'},
-
-        'mjx-math': {
-            //
-            //  There will be more here when the math wrapper is written
-            //
-            display: 'inline-block',
-            'line-height': '0px'
-        }
+        'mjx-mphantom': {visibility: 'hidden'}
 
     };
 
@@ -521,7 +517,7 @@ export class CHTMLWrapper extends AbstractWrapper<MmlNode, CHTMLWrapper> {
      * @param{number} rscale      The relatie scale to apply
      * @return{HTMLElement}       The HTML node (for chaining)
      */
-    setScale(chtml: HTMLElement, rscale: number) {
+    protected setScale(chtml: HTMLElement, rscale: number) {
         const scale = (Math.abs(rscale - 1) < .001 ? 1 : rscale);
         if (chtml && scale !== 1) {
             const size = this.percent(scale);

mathjax3-ts/output/chtml/Wrappers.ts

@@ -22,6 +22,7 @@
  */
 
 import {CHTMLWrapper} from './Wrapper.js';
+import {CHTMLmath} from './Wrappers/math.js';
 import {CHTMLmo} from './Wrappers/mo.js';
 import {CHTMLms} from './Wrappers/ms.js';
 import {CHTMLmspace} from './Wrappers/mspace.js';
@@ -40,6 +41,7 @@ import {CHTMLTeXAtom} from './Wrappers/TeXAtom.js';
 import {CHTMLTextNode} from './Wrappers/TextNode.js';
 
 export const CHTMLWrappers: {[kind: string]: typeof CHTMLWrapper}  = {
+    [CHTMLmath.kind]: CHTMLmath,
     [CHTMLmrow.kind]: CHTMLmrow,
     [CHTMLinferredMrow.kind]: CHTMLinferredMrow,
     [CHTMLmo.kind]: CHTMLmo,

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

@@ -0,0 +1,75 @@
+/*************************************************************
+ *
+ *  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 CHTMLmath wrapper for the MmlMath object
+ *
+ * @author dpvc@mathjax.org (Davide Cervone)
+ */
+
+import {CHTMLWrapper} from '../Wrapper.js';
+import {CHTMLWrapperFactory} from '../WrapperFactory.js';
+import {MmlMath} from '../../../core/MmlTree/MmlNodes/math.js';
+import {MmlNode} from '../../../core/MmlTree/MmlNode.js';
+import {StyleList} from '../CssStyles.js';
+
+/*****************************************************************/
+/*
+ *  The CHTMLmath wrapper for the MmlMath object
+ */
+
+export class CHTMLmath extends CHTMLWrapper {
+    public static kind = MmlMath.prototype.kind;
+
+    public static styles: StyleList = {
+        'mjx-math': {
+            'line-height': 0,
+            'text-align': 'left',
+            'text-indent': 0,
+            'font-style': 'normal',
+            'font-weight': 'normal',
+            'font-size': '100%',
+            'font-size-adjust': 'none',
+            'letter-spacing': 'normal',
+            'word-wrap': 'normal',
+            'word-spacing': 'normal',
+            'white-space': 'nowrap',
+            'direction': 'ltr',
+            'padding': '1px 0'
+        },
+        'mjx-chtml.MJX-DISPLAY': {
+            display: 'block',
+            'text-align': 'center',
+            margin: '1em 0'
+        },
+        'mjx-chtml.MJX-DISPLAY mjx-math': {
+            padding: 0
+        }
+    };
+
+    /*
+     * @override
+     */
+    public toCHTML(parent: HTMLElement) {
+        super.toCHTML(parent);
+        if (this.node.attributes.get('display') === 'block') {
+            this.chtml.setAttribute('display', 'true');
+            parent.classList.add('MJX-DISPLAY');
+        }
+    }
+
+}

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

@@ -49,16 +49,19 @@ export class CHTMLmrow extends CHTMLWrapper {
      * @override
      */
     public toCHTML(parent: HTMLElement) {
-        let chtml = parent;
+        let chtml = this.chtml = parent;
         if (!this.node.isInferred) {
             chtml = this.standardCHTMLnode(parent);
         }
         let hasNegative = false;
         for (const child of this.childNodes) {
             child.toCHTML(chtml);
-            if (child.bbox && child.bbox.w < 0) {
+            if (child.bbox.w < 0) {
                 hasNegative = true;
             }
+            if (child.bbox.pwidth) {
+                this.makeFullWidth();
+            }
         }
         // FIXME:  handle line breaks
         if (hasNegative) {
@@ -68,6 +71,15 @@ export class CHTMLmrow extends CHTMLWrapper {
         }
     }
 
+    /*
+     * Handle the case where a child has a percentage width by
+     * marking the parent as 100% width.
+     */
+    protected makeFullWidth() {
+        this.bbox.pwidth = '100%';
+        this.chtml.setAttribute('width', 'full');
+    }
+
     /*
      * Handle vertical stretching of children to match height of
      *  other nodes in the row.

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

@@ -39,10 +39,15 @@ export class CHTMLmtable extends CHTMLWrapper {
 
     public static styles: StyleList = {
         'mjx-mtable': {
-            'vertical-align': '.25em'
+            'vertical-align': '.25em',
+            'text-align': 'center'
         },
         'mjx-mtable > mjx-itable': {
-            'vertical-align': 'middle'
+            'vertical-align': 'middle',
+            'text-align': 'left'
+        },
+        'mjx-mtable[width="%"] > mjx-itable': {
+            width: '100%'
         }
     };
 
@@ -102,6 +107,7 @@ export class CHTMLmtable extends CHTMLWrapper {
         this.handleRowSpacing(lines, fspacing[1]);
         this.handleRowLines();
         this.handleFrame(frame);
+        this.handleWidth();
     }
 
     /******************************************************************/
@@ -147,7 +153,7 @@ export class CHTMLmtable extends CHTMLWrapper {
      * Pad any short rows with extra cells
      */
     protected padRows() {
-        for (const row of Array.from(this.chtml.childNodes)) {
+        for (const row of Array.from((this.chtml.firstChild as HTMLElement).childNodes)) {
             while (row.childNodes.length < this.numCols) {
                 row.appendChild(this.html('mjx-mtd'));
             }
@@ -326,6 +332,21 @@ export class CHTMLmtable extends CHTMLWrapper {
         }
     }
 
+    /*
+     * Handle percentage widths and fixed widths
+     */
+    protected handleWidth() {
+        let w = this.node.attributes.get('width') as string;
+        if (w === 'auto') return;
+        if (w.match(/%$/)) {
+            this.bbox.pwidth = w;
+            this.chtml.setAttribute('width','%');
+        } else {
+            w = this.em(this.length2em(w));
+        }
+        this.chtml.style.width = w;
+    }
+
     /******************************************************************/
 
     /*