vector-js · balthild · Aug 1, 2020
diff --git a/source/elements/graph/node.ts b/source/elements/graph/node.ts
@@ -41,7 +41,7 @@ export default class Node extends Group {
 
    this.nodeName = new Text(cx, cy, text);
    this.nodeName.style.textAnchor = "middle";
-   this.nodeName.root.setAttribute("alignment-baseline", "middle");
+   this.nodeName.root.setAttribute('dominant-baseline', 'central');
    this.nodeEllipse = new Ellipse(cx, cy, rx, ry);
    this.nodeEllipse.fill = '#f8f8f8';
    this.children = [];

diff --git a/source/elements/input/button.ts b/source/elements/input/button.ts
@@ -45,7 +45,7 @@ export default class Button extends Input {
 
     // Create a text element
     this.label = new Text( 0, 1, str);
-    this.label.root.setAttribute('alignment-baseline','middle');
+    this.label.root.setAttribute('dominant-baseline', 'middle');
     this.label.root.style.textAnchor = 'middle';
 
     // TODO: why is this.text.root.textLength returning zero?

diff --git a/source/elements/input/check-box.ts b/source/elements/input/check-box.ts
@@ -35,7 +35,7 @@ export default class CheckBox extends Input {
     this.box = new Rectangle( -6.5, -6.5, 13, 13);
     this.box.root.setAttribute('rx', '2px');
     this.label = new Text( 18, 1, text);
-    this.label.root.setAttribute('alignment-baseline','middle');
+    this.label.root.setAttribute('dominant-baseline', 'middle');
     this.root.appendChild(this.box.root);
     this.root.appendChild(this.label.root);
 

diff --git a/source/elements/input/dropdown-control.ts b/source/elements/input/dropdown-control.ts
@@ -56,7 +56,7 @@ export default class DropdownControl extends Input {
       this.currSelection.root.classList.add('dropdown-control-curr-selection-box');
 
       this.currSelectionText = new Text(0, 1, this.optionLabels[this.currentIndex]);
-      this.currSelectionText.root.setAttribute('alignment-baseline','middle');
+      this.currSelectionText.root.setAttribute('dominant-baseline', 'middle');
       this.currSelectionText.style.textAnchor = 'middle';
 
       this.currSelectionBox = new Rectangle(0, -16, this.textWidth*3+16, 32);
@@ -112,7 +112,7 @@ export default class DropdownControl extends Input {
       currSelection.root.classList.add('dropdown-control-menu-option');
 
       let currSelectionText = new Text(0, 1, this.optionLabels[this.currentIndex]);
-      currSelectionText.root.setAttribute('alignment-baseline','middle');
+      currSelectionText.root.setAttribute('dominant-baseline', 'middle');
       currSelectionText.style.textAnchor = 'middle';
 
       let currSelectionBox = new Rectangle(0, -16, this.textWidth*3+16, 32);
@@ -133,7 +133,7 @@ export default class DropdownControl extends Input {
         menuOption.root.classList.add('dropdown-control-menu-option');
 
         let optionText = new Text(0, 1 + rectY, label);
-        optionText.root.setAttribute('alignment-baseline','middle');
+        optionText.root.setAttribute('dominant-baseline', 'middle');
         optionText.style.textAnchor = 'middle';
 
         let optionBox = new Rectangle(0, -16 + rectY, this.textWidth*3+16, 32);

diff --git a/source/elements/input/hover-box.ts b/source/elements/input/hover-box.ts
@@ -24,7 +24,7 @@ export default class HoverBox extends Input {
         super();
         // Create a text element
         this.label = new Text(0, 1, str);
-        this.label.root.setAttribute('alignment-baseline','middle');
+        this.label.root.setAttribute('dominant-baseline', 'middle');
         this.label.root.style.textAnchor = 'middle';
 
         this.box = this.rectangle( 0, -16, this.label.length*2 + 16, 32);

diff --git a/source/elements/math/plot.ts b/source/elements/math/plot.ts
@@ -406,21 +406,21 @@ export default class Plot extends SVG {
       } else {
         title = group.text( this.width/2, 25, config.title);
       }
-      title.setAttribute('alignment-baseline', 'middle');
+      title.setAttribute('dominant-baseline', 'middle');
       title.setAttribute('text-anchor', 'middle');
 
       let xPoints = this.getXLabelPoints();
       let yPoints = this.getYLabelPoints();
       for( let p of xPoints) {
         let point = this.internalToAbsolute(p);
         let text = group.text( point.x + config.margin, config.margin + this._height + config.margin/2, `${p.x.toFixed(1)}`);
-        text.setAttribute('alignment-baseline', 'middle');
+        text.setAttribute('dominant-baseline', 'middle');
         text.setAttribute('text-anchor', 'middle');
       }
       for( let p of yPoints) {
         let point = this.internalToAbsolute(p);
         let text = group.text( point.x + config.margin/2, point.y + config.margin, `${p.y.toFixed(1)}`);
-        text.setAttribute('alignment-baseline', 'middle');
+        text.setAttribute('dominant-baseline', 'middle');
         text.setAttribute('text-anchor', 'middle');
       }
     }

diff --git a/source/elements/svg/text.ts b/source/elements/svg/text.ts
@@ -5,7 +5,7 @@ import { Typography } from './content-model.js';
 /**
 * These attributes control the text position.
 */
-export type TextAttributes = 'baseline-shift' | 'text-anchor' | 'alignment-baseline';
+export type TextAttributes = 'baseline-shift' | 'text-anchor' | 'dominant-baseline';
 
 /**
 * Text is a basic element containing string contents

diff --git a/source/examples/interaction/key-board-input.ts b/source/examples/interaction/key-board-input.ts
@@ -18,7 +18,7 @@ for( let i = 0; i < 5; i++ ) {
   let rectangle = interactive.rectangle( x, y, 64, 64);
   rectangle.root.setAttribute('rx', '3px');12341
   let text = interactive.text( x + 32, y + 32, (i + 1).toString());
-  text.root.setAttribute('alignment-baseline','middle');
+  text.root.setAttribute('dominant-baseline', 'middle');
   text.root.setAttribute('text-anchor','middle');
 
   keys.push(rectangle);

diff --git a/source/examples/math/cartesian-coordinate-system-continuous.ts b/source/examples/math/cartesian-coordinate-system-continuous.ts
@@ -48,7 +48,7 @@ export default function main(id:string) {
   yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
   let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-  xAxisLabel.setAttribute('alignment-baseline','middle');
+  xAxisLabel.setAttribute('dominant-baseline', 'middle');
   let yAxisLabel = interactive.text( yAxis.x1, yAxis.y1 - 16, 'y');
   yAxisLabel.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/cartesian-coordinate-system-first-quadrant.ts b/source/examples/math/cartesian-coordinate-system-first-quadrant.ts
@@ -65,7 +65,7 @@ xAxis.setAttribute('marker-end', `url(#${marker.id})`);
 yAxis.setAttribute('marker-end', `url(#${marker.id})`);
 
 let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-xAxisLabel.setAttribute('alignment-baseline','middle');
+xAxisLabel.setAttribute('dominant-baseline', 'middle');
 let yAxisLabel = interactive.text( yAxis.x1, yAxis.y2 - 16, 'y');
 yAxisLabel.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/cartesian-coordinate-system-test.ts b/source/examples/math/cartesian-coordinate-system-test.ts
@@ -65,7 +65,7 @@ xAxis.setAttribute('marker-end', `url(#${marker.id})`);
 yAxis.setAttribute('marker-end', `url(#${marker.id})`);
 
 let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-xAxisLabel.setAttribute('alignment-baseline','middle');
+xAxisLabel.setAttribute('dominant-baseline', 'middle');
 let yAxisLabel = interactive.text( yAxis.x1, yAxis.y2 - 16, 'y');
 yAxisLabel.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/cartesian-coordinate-system.ts b/source/examples/math/cartesian-coordinate-system.ts
@@ -59,7 +59,7 @@ export default function main(id:string) {
   yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
   let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-  xAxisLabel.setAttribute('alignment-baseline','middle');
+  xAxisLabel.setAttribute('dominant-baseline', 'middle');
   let yAxisLabel = interactive.text( yAxis.x1, yAxis.y1 - 16, 'y');
   yAxisLabel.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/modular-arithmetic-wheel.ts b/source/examples/math/modular-arithmetic-wheel.ts
@@ -4,6 +4,7 @@
 
 import {Interactive, Path, Text, Group, isPrime} from '../../index.js';
 import {TAU} from '../../util/constants.js';
+// @ts-ignore
 import katex from '/katex/katex.module.js';
 
 /**

diff --git a/source/examples/math/number-line.ts b/source/examples/math/number-line.ts
@@ -60,7 +60,7 @@ xAxis.setAttribute('marker-end', `url(#${marker.id})`);
 xAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
 let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-xAxisLabel.setAttribute('alignment-baseline','middle');
+xAxisLabel.setAttribute('dominant-baseline', 'middle');
 
 let xPosition = interactive.line( 0, 0, 0, 0);
 xPosition.style.stroke = 'cornflowerblue';

diff --git a/source/examples/math/polar-coordinate-system-pi.ts b/source/examples/math/polar-coordinate-system-pi.ts
@@ -52,11 +52,11 @@ yAxis.setAttribute('marker-end', `url(#${marker.id})`);
 yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
 let right = interactive.text( xAxis.x2 + 16, xAxis.y2, '0, 2π');
-right.setAttribute('alignment-baseline','middle');
+right.setAttribute('dominant-baseline', 'middle');
 let top = interactive.text( yAxis.x1, yAxis.y1 - 16, 'π/2');
 top.setAttribute('text-anchor','middle');
 let left = interactive.text( xAxis.x1 - 20, xAxis.y2, 'π');
-left.setAttribute('alignment-baseline','middle');
+left.setAttribute('dominant-baseline', 'middle');
 let bottom = interactive.text( yAxis.x1, yAxis.y2 + 32, '3π/2');
 bottom.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/polar-coordinate-system.ts b/source/examples/math/polar-coordinate-system.ts
@@ -59,11 +59,11 @@ export default function main( id:string ) {
   yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
   let right = interactive.text( xAxis.x2 + 16, xAxis.y2, '0, τ');
-  right.setAttribute('alignment-baseline','middle');
+  right.setAttribute('dominant-baseline', 'middle');
   let top = interactive.text( yAxis.x1, yAxis.y1 - 16, 'τ/4');
   top.setAttribute('text-anchor','middle');
   let left = interactive.text( xAxis.x1 - 32, xAxis.y2, 'τ/2');
-  left.setAttribute('alignment-baseline','middle');
+  left.setAttribute('dominant-baseline', 'middle');
   let bottom = interactive.text( yAxis.x1, yAxis.y2 + 32, '3/4τ');
   bottom.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/math/unit-circle-angle.ts b/source/examples/math/unit-circle-angle.ts
@@ -7,6 +7,7 @@
 */
 
 import {Interactive} from '../../index.js';
+// @ts-ignore
 import katex from '/katex/katex.module.js';
 
 export default function main(id:string) {

diff --git a/source/examples/math/unit-circle-cosine.ts b/source/examples/math/unit-circle-cosine.ts
@@ -10,6 +10,7 @@ import {Interactive} from '../../index.js';
 import Group from '../../elements/svg/group.js';
 import Point from '../../elements/math/point.js';
 import Line from '../../elements/svg/line.js';
+// @ts-ignore
 import katex from '/katex/katex.module.js';
 
 export default function main(id:string) {

diff --git a/source/examples/math/unit-circle-right-triangle.ts b/source/examples/math/unit-circle-right-triangle.ts
@@ -7,6 +7,7 @@
 */
 
 import {Interactive} from '../../index.js';
+// @ts-ignore
 import katex from '/katex/katex.module.js';
 
 export default function main(id) {
@@ -39,7 +40,7 @@ export default function main(id) {
   yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
   let xAxisLabel = interactive.text( xAxis.x2 + margin/3, xAxis.y2, 'x');
-  xAxisLabel.setAttribute('alignment-baseline','middle');
+  xAxisLabel.setAttribute('dominant-baseline', 'middle');
   xAxisLabel.style.fontFamily = 'KaTeX_Math';
   xAxisLabel.style.fontSize = '22px';
   let yAxisLabel = interactive.text( yAxis.x1, yAxis.y1 - margin/2, 'y');

diff --git a/source/examples/math/unit-circle-sine.ts b/source/examples/math/unit-circle-sine.ts
@@ -10,6 +10,7 @@ import {Interactive} from '../../index.js';
 import Group from '../../elements/svg/group.js';
 import Point from '../../elements/math/point.js';
 import Line from '../../elements/svg/line.js';
+// @ts-ignore
 import katex from '/katex/katex.module.js';
 
 export default function main(id:string) {

diff --git a/source/examples/math/vector.ts b/source/examples/math/vector.ts
@@ -30,7 +30,7 @@ yAxis.setAttribute('marker-end', `url(#${marker.id})`);
 yAxis.setAttribute('marker-start', `url(#${marker.id})`);
 
 let xAxisLabel = interactive.text( xAxis.x2 + 16, xAxis.y2, 'x');
-xAxisLabel.setAttribute('alignment-baseline','middle');
+xAxisLabel.setAttribute('dominant-baseline', 'middle');
 let yAxisLabel = interactive.text( yAxis.x1, yAxis.y1 - 16, 'y');
 yAxisLabel.setAttribute('text-anchor','middle');
 

diff --git a/source/examples/svg/svg-rotate.ts b/source/examples/svg/svg-rotate.ts
@@ -37,7 +37,7 @@ rotateText.addDependency(control);
 rotateText.update = function() {
   rotateText.contents = `rotate(${getAngle()})`;
 };
-rotateText.root.setAttribute('alignment-baseline', 'middle');
+rotateText.root.setAttribute('dominant-baseline', 'middle');
 rotateText.root.setAttribute('text-anchor', 'middle');
 rotateText.update();
 

diff --git a/source/examples/svg/svg-scale.ts b/source/examples/svg/svg-scale.ts
@@ -39,7 +39,7 @@ scaleText.update = function() {
   let scaleY = control.y/(2*w);
   scaleText.contents = `scale(${scaleX.toFixed(2)}, ${scaleY.toFixed(2)})`;
 };
-scaleText.root.setAttribute('alignment-baseline', 'middle');
+scaleText.root.setAttribute('dominant-baseline', 'middle');
 scaleText.root.setAttribute('text-anchor', 'middle');
 scaleText.update();
 

diff --git a/source/examples/svg/svg-transform-test.ts b/source/examples/svg/svg-transform-test.ts
@@ -66,7 +66,7 @@ scale.update = function() {
 //   transformText.contents += `rotate(${getAngle()}) `;
 //
 // };
-// transformText.root.setAttribute('alignment-baseline', 'middle');
+// transformText.root.setAttribute('dominant-baseline', 'middle');
 // transformText.root.setAttribute('text-anchor', 'middle');
 // transformText.update();
 

diff --git a/source/examples/svg/svg-translate.ts b/source/examples/svg/svg-translate.ts
@@ -34,7 +34,7 @@ translateText.addDependency(control);
 translateText.update = function() {
   translateText.contents = `translate(${control.x}, ${control.y})`;
 };
-translateText.root.setAttribute('alignment-baseline', 'middle');
+translateText.root.setAttribute('dominant-baseline', 'middle');
 translateText.root.setAttribute('text-anchor', 'middle');
 translateText.update();
 

diff --git a/source/tests/elements/geometry.test.ts b/source/tests/elements/geometry.test.ts
@@ -132,7 +132,7 @@ describe('Geometry', function () {
 		});
 		it('text vertically centered', function() {
 			let text = interactive.text(0,0, 'Typography');
-			text.setAttribute('alignment-baseline', 'middle');
+			text.setAttribute('dominant-baseline', 'middle');
 			element = text;
 		});
 		it('group', function() {

diff --git a/source/tests/elements/math/plot.test.ts b/source/tests/elements/math/plot.test.ts
@@ -26,10 +26,10 @@ describe('Plot', function () {
       let title =  new Text(interactive.width/2, 25, 'sin(');
       let span = title.tspan('x');
       span.setAttribute('text-anchor', 'middle');
-      span.setAttribute('alignment-baseline', 'middle');
+      span.setAttribute('dominant-baseline', 'middle');
       span.style.fontFamily = 'KaTeX_Math';
       title.contents += ')';
-      title.setAttribute('alignment-baseline', 'middle');
+      title.setAttribute('dominant-baseline', 'middle');
       title.setAttribute('text-anchor', 'middle');
 
       plot = interactive.plot(Math.sin, {