Merge pull request #446 from mathjax/issue2360

Fix mglyph attribute from offset to align. (mathjax/MathJax#2360)
mathjax · Mar 30, 2020 · 38f692d · 38f692d
2 parents ac52a71 + 2151834
commit 38f692d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/ts/output/chtml/Wrappers/mglyph.ts b/ts/output/chtml/Wrappers/mglyph.ts
@@ -56,8 +56,8 @@ export class CHTMLmglyph<N, T, D> extends CommonMglyphMixin<CHTMLConstructor<any
             width: this.em(this.width),
             height: this.em(this.height)
         };
-        if (this.voffset) {
-            styles.verticalAlign = this.em(-this.voffset);
+        if (this.valign) {
+            styles.verticalAlign = this.em(this.valign);
         }
         const img = this.html('img', {src: src, style: styles, alt: alt, title: alt});
         this.adaptor.append(chtml, img);

diff --git a/ts/output/common/Wrappers/mglyph.ts b/ts/output/common/Wrappers/mglyph.ts
@@ -33,14 +33,14 @@ import {StyleList, StyleData} from '../../common/CssStyles.js';
  */
 export interface CommonMglyph extends AnyWrapper {
     /**
-     * The image's width, height, and voffset values converted to em's
+     * The image's width, height, and valign values converted to em's
      */
     width: number;
     height: number;
-    voffset: number;
+    valign: number;
 
     /**
-     * Obtain the width, height, and voffset.
+     * Obtain the width, height, and valign.
      */
     getParameters(): void;
 }
@@ -60,11 +60,11 @@ export function CommonMglyphMixin<T extends WrapperConstructor>(Base: T): Mglyph
     return class extends Base {
 
         /**
-         * The image's width, height, and voffset values converted to em's
+         * The image's width, height, and valign values converted to em's
          */
         public width: number;
         public height: number;
-        public voffset: number;
+        public valign: number;
 
         /**
          * @override
@@ -76,26 +76,26 @@ export function CommonMglyphMixin<T extends WrapperConstructor>(Base: T): Mglyph
         }
 
         /**
-         * Obtain the width, height, and voffset.
+         * Obtain the width, height, and valign.
          * Note:  Currently, the width and height must be specified explicitly, or they default to 1em
          *   Since loading the image may be asynchronous, it would require a restart.
          *   A future extension could implement this either by subclassing this object, or
          *   perhaps as a post-filter on the MathML input jax that adds the needed dimensions
          */
         public getParameters() {
-            const {width, height, voffset} = this.node.attributes.getList('width', 'height', 'voffset');
+            const {width, height, valign} = this.node.attributes.getList('width', 'height', 'valign');
             this.width = (width === 'auto' ? 1 : this.length2em(width));
             this.height = (height === 'auto' ? 1 : this.length2em(height));
-            this.voffset = this.length2em(voffset || '0');
+            this.valign = this.length2em(valign || '0');
         }
 
         /**
          * @override
          */
         public computeBBox(bbox: BBox, recompute: boolean = false) {
             bbox.w = this.width;
-            bbox.h = this.height - this.voffset;
-            bbox.d = this.voffset;
+            bbox.h = this.height + this.valign;
+            bbox.d = -this.valign;
         }
 
     };

diff --git a/ts/output/svg/Wrappers/mglyph.ts b/ts/output/svg/Wrappers/mglyph.ts
@@ -46,16 +46,14 @@ export class SVGmglyph<N, T, D> extends CommonMglyphMixin<SVGConstructor<any, an
         const {src, alt} = this.node.attributes.getList('src', 'alt');
         const h = this.fixed(this.height);
         const w = this.fixed(this.width);
+        const y = this.fixed(this.height + (this.valign || 0));
         const properties: OptionList = {
             width: w, height: h,
-            transform: 'translate(0 ' +h + ') matrix(1 0 0 -1 0 0)',
+            transform: 'translate(0 ' + y + ') matrix(1 0 0 -1 0 0)',
             preserveAspectRatio: 'none',
             alt: alt, title: alt,
             href: src
         };
-        if (this.voffset) {
-            properties.verticalAlign = this.fixed(-this.voffset);
-        }
         const img = this.svg('image', properties);
         this.adaptor.append(svg, img);
     }