Text Baseline in SVG Backend

[dan-fritchman]

https://codepen.io/jonobr1/pen/MWvVBdx

import Two from 'https://cdn.skypack.dev/two.js@latest';

const two = new Two({
  type: Two.Types.webgl,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

// Create one text of each `baseline` value
const t1 = two.makeText("TOP", two.width / 2, two.height / 2, {size:100});
t1.baseline="top";
const t2 = two.makeText("MID", two.width / 2, two.height / 2,{size:100});
t2.baseline="middle";
const t3 = two.makeText("BOT", two.width / 2, two.height / 2,{size:100});
t3.baseline="bottom";

That code snippet, with the WebGL backend, looks like so:

Change it to canvas, and it looks like so:

Which are not, like, identical, but for purposes of this, close enough.
But change to Two.Types.svg, and it looks like so:

Is that the expected behavior?
I.e. does the baseline attribute not work with the SVG back-end?

[jonobr1]

You're right. It looks like SVG interprets this stuff differently: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

Based on that document then it would map as follows:		Two.js	SVG
1.	text.baseline = "top";	dominant-baseline="hanging"
2.	text-baseline = "middle";	dominant-baseline="middle"
3.	text-baseline = "bottom";	dominant-baseline="auto"

[dan-fritchman]

Thanks for jumping on this. And agree that looks right. Particularly Mozilla’s featured example.

And I think I understand enough to get you an effective PR here. If you’ve got advice, preferences, or things to know, appreciate sharing.

[jonobr1]

Oop, thanks for this but I beat you to it 😅

[jonobr1]

This will be published on npm in the next week or so. I have a couple of other PRs that need tending to. Thanks for posting!

[dan-fritchman]

Awesome thanks!