Handle rowalign through attribute and CSS rather than direct style.

Author: dpvc

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

@@ -66,21 +66,6 @@ export class CHTMLmtable<N, T, D> extends CHTMLWrapper<N, T, D> {
         },
         'mjx-mtable[width] > mjx-itable': {
             width: '100%'
-        },
-        'mjx-mtr[rowalign="top"] > mjx-mtd, mjx-mlabeledtr[rowalign="top"] > mjx-mtd': {
-            'vertical-align': 'top'
-        },
-        'mjx-mtr[rowalign="center"] > mjx-mtd, mjx-mlabeledtr[rowalign="center"] > mjx-mtd': {
-            'vertical-align': 'middle'
-        },
-        'mjx-mtr[rowalign="bottom"] > mjx-mtd, mjx-mlabeledtr[rowalign="bottom"] > mjx-mtd': {
-            'vertical-align': 'bottom'
-        },
-        'mjx-mtr[rowalign="baseline"] > mjx-mtd, mjx-mlabeledtr[rowalign="baseline"] > mjx-mtd': {
-            'vertical-align': 'baseline'
-        },
-        'mjx-mtr[rowalign="axis"] > mjx-mtd, mjx-mlabeledtr[rowalign="axis"] > mjx-mtd': {
-            'vertical-align': '.25em'
         }
     };
 

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

@@ -60,6 +60,21 @@ export class CHTMLmtd<N, T, D> extends CHTMLWrapper<N, T, D> {
             display: 'inline-block',
             height: '1em',
             'vertical-align': '-.25em'
+        },
+        'mjx-mtr mjx-mtd[rowalign="top"], mjx-mlabeledtr mjx-mtd[rowalign="top"]': {
+            'vertical-align': 'top'
+        },
+        'mjx-mtr mjx-mtd[rowalign="center"], mjx-mlabeledtr mjx-mtd[rowalign="center"]': {
+            'vertical-align': 'middle'
+        },
+        'mjx-mtr mjx-mtd[rowalign="bottom"], mjx-mlabeledtr mjx-mtd[rowalign="bottom"]': {
+            'vertical-align': 'bottom'
+        },
+        'mjx-mtr mjx-mtd[rowalign="baseline"], mjx-mlabeledtr mjx-mtd[rowalign="baseline"]': {
+            'vertical-align': 'baseline'
+        },
+        'mjx-mtr mjx-mtd[rowalign="axis"], mjx-mlabeledtr mjx-mtd[rowalign="axis"]': {
+            'vertical-align': '.25em'
         }
     };
 
@@ -70,8 +85,9 @@ export class CHTMLmtd<N, T, D> extends CHTMLWrapper<N, T, D> {
         super.toCHTML(parent);
         const ralign = this.node.attributes.get('rowalign') as string;
         const calign = this.node.attributes.get('columnalign') as string;
-        if (ralign !== 'baseline' && ralign !== 'axis') {
-            this.adaptor.setStyle(this.chtml, 'verticalAlign', (ralign === 'center' ? 'middle' : ralign));
+        const palign = this.parent.node.attributes.get('rowalign') as string;
+        if (ralign !== palign) {
+            this.adaptor.setAttribute(this.chtml, 'rowalign', ralign);
         }
         if (calign !== 'center') {
             this.adaptor.setStyle(this.chtml, 'textAlign', calign);

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

@@ -44,6 +44,21 @@ export class CHTMLmtr<N, T, D> extends CHTMLWrapper<N, T, D> {
     public static styles: StyleList = {
         'mjx-mtr': {
             display: 'table-row',
+        },
+        'mjx-mtr[rowalign="top"] > mjx-mtd, mjx-mlabeledtr[rowalign="top"] > mjx-mtd': {
+            'vertical-align': 'top'
+        },
+        'mjx-mtr[rowalign="center"] > mjx-mtd, mjx-mlabeledtr[rowalign="center"] > mjx-mtd': {
+            'vertical-align': 'middle'
+        },
+        'mjx-mtr[rowalign="bottom"] > mjx-mtd, mjx-mlabeledtr[rowalign="bottom"] > mjx-mtd': {
+            'vertical-align': 'bottom'
+        },
+        'mjx-mtr[rowalign="baseline"] > mjx-mtd, mjx-mlabeledtr[rowalign="baseline"] > mjx-mtd': {
+            'vertical-align': 'baseline'
+        },
+        'mjx-mtr[rowalign="axis"] > mjx-mtd, mjx-mlabeledtr[rowalign="axis"] > mjx-mtd': {
+            'vertical-align': '.25em'
         }
     };
 
@@ -83,9 +98,7 @@ export class CHTMLmtr<N, T, D> extends CHTMLWrapper<N, T, D> {
     public toCHTML(parent: N) {
         super.toCHTML(parent);
         const align = this.node.attributes.get('rowalign') as string;
-        if (align !== 'baseline' && align !== 'axis') {
-            this.adaptor.setStyle(this.chtml, 'verticalAlign', (align === 'center' ? 'middle' : align));
-        }
+        this.adaptor.setAttribute(this.chtml, 'rowalign', align);
     }
 
     /*