Merge pull request #118 from mathjax/align-shift

Add support for indentalign and indentshift

Author: dpvc

mathjax3-ts/core/MmlTree/MmlNode.ts

@@ -26,7 +26,7 @@ import {Property, PropertyList, Node, AbstractNode, AbstractEmptyNode, NodeClass
 import {MmlFactory} from './MmlFactory.js';
 
 /*
- *  Used in setInheritedAttrbutes() to pass originating node kind as well as property value
+ *  Used in setInheritedAttributes() to pass originating node kind as well as property value
  */
 export type AttributeList = {[attribute: string]: [string, Property]};
 
@@ -67,6 +67,14 @@ const TEXSPACE = [
     [ 1, -1,  2,  3,  1,  0,  1,  1]  // INNER
 ];
 
+/*
+ * Attributes used to determine indentation and shifting
+ */
+export const indentAttributes = [
+    'indentalign', 'indentalignfirst',
+    'indentshift', 'indentshiftfirst'
+];
+
 
 /*****************************************************************/
 /*

mathjax3-ts/core/MmlTree/MmlNodes/mtable.ts

@@ -22,7 +22,7 @@
  */
 
 import {PropertyList, Node} from '../../Tree/Node.js';
-import {MmlNode, AbstractMmlNode, AttributeList, TEXCLASS} from '../MmlNode.js';
+import {MmlNode, AbstractMmlNode, AttributeList, TEXCLASS, indentAttributes} from '../MmlNode.js';
 import {split} from '../../../util/string.js';
 
 /*****************************************************************/
@@ -71,6 +71,25 @@ export class MmlMtable extends AbstractMmlNode {
         return true;
     }
 
+    /*
+     * @override
+     */
+    setInheritedAttributes(attributes: AttributeList, display: boolean, level: number, prime: boolean) {
+        //
+        // Force inheritance of shift and align values (since they are needed to output tables with labels)
+        //   but make sure they are not given explicitly on the <mtable> tag.
+        //
+        for (const name of indentAttributes) {
+            if (attributes[name]) {
+                this.attributes.setInherited(name, attributes[name][1]);
+            }
+            if (this.attributes.getExplicit(name) !== undefined) {
+                delete (this.attributes.getAllAttributes())[name];
+            }
+        }
+        super.setInheritedAttributes(attributes, display, level, prime);
+    };
+
     /*
      * Make sure all children are mtr or mlabeledtr nodes
      * Inherit the table attributes, and set the display attribute based on the table's displaystyle attribute

mathjax3-ts/output/chtml/BBox.ts

@@ -52,6 +52,11 @@ export type BBoxData = {
  */
 
 export class BBox {
+    /*
+     * Constant for pwidth of full width box
+     */
+    public static fullWidth = '100%';
+
     /*
      *  These are the data stored for a bounding box
      */

mathjax3-ts/output/chtml/Wrapper.ts

@@ -23,7 +23,7 @@
 
 import {AbstractWrapper} from '../../core/Tree/Wrapper.js';
 import {Node, PropertyList} from '../../core/Tree/Node.js';
-import {MmlNode, TextNode, AbstractMmlNode, AttributeList} from '../../core/MmlTree/MmlNode.js';
+import {MmlNode, TextNode, AbstractMmlNode, AttributeList, indentAttributes} from '../../core/MmlTree/MmlNode.js';
 import {Property} from '../../core/Tree/Node.js';
 import {OptionList} from '../../util/Options.js';
 import {unicodeChars} from '../../util/string.js';
@@ -277,7 +277,11 @@ export class CHTMLWrapper<N, T, D> extends AbstractWrapper<MmlNode, CHTMLWrapper
         this.getScale();
         this.getSpace();
         this.childNodes = node.childNodes.map((child: Node) => {
-            return this.wrap(child as MmlNode);
+            const wrapped = this.wrap(child as MmlNode);
+            if (wrapped.bbox.pwidth) {
+                this.bbox.pwidth = BBox.fullWidth;
+            }
+            return wrapped;
         });
     }
 
@@ -494,6 +498,7 @@ export class CHTMLWrapper<N, T, D> extends AbstractWrapper<MmlNode, CHTMLWrapper
         this.handleColor();
         this.handleSpace();
         this.handleAttributes();
+        this.handlePWidth();
         return chtml;
     }
 
@@ -602,7 +607,8 @@ export class CHTMLWrapper<N, T, D> extends AbstractWrapper<MmlNode, CHTMLWrapper
         const defaults = attributes.getAllDefaults();
         const skip = CHTMLWrapper.skipAttributes;
         for (const name of attributes.getExplicitNames()) {
-            if (skip[name] === false || (!(name in defaults) && !skip[name] && !this.adaptor.hasAttribute(this.chtml, name))) {
+            if (skip[name] === false || (!(name in defaults) && !skip[name] &&
+                                         !this.adaptor.hasAttribute(this.chtml, name))) {
                 this.adaptor.setAttribute(this.chtml, name, attributes.getExplicit(name) as string);
             }
         }
@@ -611,6 +617,19 @@ export class CHTMLWrapper<N, T, D> extends AbstractWrapper<MmlNode, CHTMLWrapper
         }
     }
 
+    /*
+     * Handle the attributes needed for percentage widths
+     */
+    protected handlePWidth() {
+        if (this.bbox.pwidth) {
+            if (this.bbox.pwidth === BBox.fullWidth) {
+                this.adaptor.setAttribute(this.chtml, 'width', 'full');
+            } else {
+                this.adaptor.setStyle(this.chtml, 'width', this.bbox.pwidth);
+            }
+        }
+    }
+
     /*******************************************************************/
 
     /*
@@ -659,6 +678,42 @@ export class CHTMLWrapper<N, T, D> extends AbstractWrapper<MmlNode, CHTMLWrapper
         return this.stretch.dir !== DIRECTION.None;
     }
 
+    /*
+     * @return{[string, number]}  The alignment and indentation shift for the expression
+     */
+    protected getAlignShift() {
+        let {indentalign, indentshift, indentalignfirst, indentshiftfirst} =
+            this.node.attributes.getList(...indentAttributes) as StringMap;
+        if (indentalignfirst !== 'indentalign') {
+            indentalign = indentalignfirst;
+        }
+        if (indentalign === 'auto') {
+            indentalign = 'center';
+        }
+        if (indentshiftfirst !== 'indentshift') {
+            indentshift = indentshiftfirst;
+        }
+        if (indentshift === 'auto') {
+            indentshift = '0';
+        }
+        const shift = this.length2em(indentshift, this.metrics.containerWidth);
+        return [indentalign, shift] as [string, number];
+    }
+
+    /*
+     * @param{N} chtml       The HTML node whose indentation is to be adjusted
+     * @param{string} align  The alignment for the node
+     * @param{number} shift  The indent (positive or negative) for the node
+     */
+    protected setIndent(chtml: N, align: string, shift: number) {
+        if (align === 'center' || align === 'left') {
+            this.adaptor.setStyle(chtml, 'margin-left', this.em(shift));
+        }
+        if (align === 'center' || align === 'right') {
+            this.adaptor.setStyle(chtml, 'margin-right', this.em(-shift));
+        }
+    }
+
     /*******************************************************************/
     /*
      * For debugging

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

@@ -61,6 +61,12 @@ export class CHTMLmath<N, T, D> extends CHTMLWrapper<N, T, D> {
         },
         'mjx-chtml.MJX-DISPLAY mjx-math': {
             padding: 0
+        },
+        'mjx-chtml[justify="left"]': {
+            'text-align': 'left'
+        },
+        'mjx-chtml[justify="right"]': {
+            'text-align': 'right'
         }
     };
 
@@ -69,9 +75,20 @@ export class CHTMLmath<N, T, D> extends CHTMLWrapper<N, T, D> {
      */
     public toCHTML(parent: N) {
         super.toCHTML(parent);
-        if (this.node.attributes.get('display') === 'block') {
-            this.adaptor.setAttribute(this.chtml, 'display', 'true');
-            this.adaptor.addClass(parent, 'MJX-DISPLAY');
+        const chtml = this.chtml;
+        const adaptor = this.adaptor;
+        const attributes = this.node.attributes;
+        const display = (attributes.get('display') === 'block');
+        if (display) {
+            adaptor.setAttribute(chtml, 'display', 'true');
+            adaptor.addClass(parent, 'MJX-DISPLAY');
+        }
+        const [align, shift] = this.getAlignShift();
+        if (align !== 'center') {
+            adaptor.setAttribute(parent, 'justify', align);
+        }
+        if (display && shift && !adaptor.hasAttribute(chtml, 'width')) {
+            this.setIndent(chtml, align, shift);
         }
     }
 

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

@@ -46,6 +46,12 @@ export class CHTMLmrow<N, T, D> extends CHTMLWrapper<N, T, D> {
     constructor(factory: CHTMLWrapperFactory<N, T, D>, node: MmlNode, parent: CHTMLWrapper<N, T, D> = null) {
         super(factory, node, parent);
         this.stretchChildren();
+        for (const child of this.childNodes) {
+            if (child.bbox.pwidth) {
+                this.bbox.pwidth = BBox.fullWidth;
+                break;
+            }
+        }
     }
 
     /*
@@ -59,9 +65,6 @@ export class CHTMLmrow<N, T, D> extends CHTMLWrapper<N, T, D> {
             if (child.bbox.w < 0) {
                 hasNegative = true;
             }
-            if (child.bbox.pwidth) {
-                this.makeFullWidth();
-            }
         }
         // FIXME:  handle line breaks
         if (hasNegative) {
@@ -75,15 +78,6 @@ export class CHTMLmrow<N, T, D> extends CHTMLWrapper<N, T, D> {
         }
     }
 
-    /*
-     * Handle the case where a child has a percentage width by
-     * marking the parent as 100% width.
-     */
-    protected makeFullWidth() {
-        this.bbox.pwidth = '100%';
-        this.adaptor.setAttribute(this.chtml, 'width', 'full');
-    }
-
     /*
      * Handle vertical stretching of children to match height of
      *  other nodes in the row.