Find correct alignment between text and an SVG MathJax

Arián Jiménez

unread,

Sep 27, 2024, 6:05:10 AM9/27/24

to MathJax Users

Hi, I hope everyone is doing great! :-)

I'm working on an animation tool that can render different shapes, as well as text and LaTeX using MathJax v4.

Everything is rendered into a <canvas> element, and I'm using the Konva.js library for managing the canvas.

To get MathJax into the canvas I'm using MathJax.tex2svg, get the SVG, convert it to base64, then treat it as an image in the Konva library. I found this to be very fast and convenient.

A text object can contain a combination of plain text and MathJax, and I want to be able to automatically align them, but I can't figure out how to do that.

The difficult part is that since each MathJax and text piece are separate, I don't know how to automatically align them. Ex:

Captura de pantalla 2024-09-27 a las 12.01.43.png

In both lines I'd expect the MathJax to appear higher.

Is there anyway to figure out from the returned SVG how to align with the text? I'm thinking if there's a way to get the expected baseline for the MathJax, if I find that number, or calculate it, then I can move it to align with the text.

Other things that I tried is to simply render the text and MathJax in a DOM element, and use some library to take a "screenshot" of it. This was perfectly aligned, but too slow and wasn't scalable enough. Getting the SVG is much much faster so I'd like to keep that approach.

Does anyone have any ideas how to do this?

Thank you!,

Arián.

Murray

unread,

Sep 28, 2024, 7:43:55 PM9/28/24

to MathJax Users

Hello Arián

I needed to do exactly this for my SVGMath demo: https://bourne2learn.com/math/svgmath/svgmath-demo.php (There's an overview of what's going on here https://bourne2learn.com/math/svgmath/svgmath-overview.php)

It appears in your examples that the math is positioned such that it is evenly above and below the middle of the ordinary text.

To align things with SVGMath, I made use of the vertical-align value in the style attribute on the SVG produced by MathJax. For example, the MathJax SVG for the first math expression on my demo page has:

That's the amount you need to move your expression down from its baseline so that the text and math baselines line up.

Hope it works for you.

Regards

Murray

Jimenez Majidi, Arian -

unread,

Oct 4, 2024, 5:18:19 AM10/4/24

to mathja...@googlegroups.com

Thank you very much Murray. I had noticed the vertical align attribute and tried to use it. What I failed to get correctly was the actual value of the `ex` unit in pixels.

First I tried to figure it out by trial and error (try different values, see which one looks good), but this wasn’t perfect.

Then I rendered a MathJax `x` as an SVG into the browser, measured the height, and used that value. Still didn’t work, so I thought I was missing something.

Turns out the rendered MathJax `x` has a different size in the canvas. So I had to measure the height of that `x`, with that value now it all looks pretty good.

Another part of my previous approach that wasn’t working is that I was vertically centering the text and MathJax elements, then applying that vertical align value. But it doesn’t work like that, I have to align the values around a common baseline, then apply the vertical align.

Again, thank you for your help.

Arián.

De: mathja...@googlegroups.com <mathja...@googlegroups.com> en nombre de Murray <murray...@gmail.com>
Fecha: domingo, 29 de septiembre de 2024, 1:45
Para: MathJax Users <mathja...@googlegroups.com>
Asunto: [mathjax-users] Re: Find correct alignment between text and an SVG MathJax

⛔	This is an external email.

Hello Arián

I needed to do exactly this for my SVGMath demo: https://bourne2learn.com/math/svgmath/svgmath-demo.php (There's an overview of what's going on here https://bourne2learn.com/math/svgmath/svgmath-overview.php)

It appears in your examples that the math is positioned such that it is evenly above and below the middle of the ordinary text.

To align things with SVGMath, I made use of the vertical-align value in the style attribute on the SVG produced by MathJax. For example, the MathJax SVG for the first math expression on my demo page has:

That's the amount you need to move your expression down from its baseline so that the text and math baselines line up.

Hope it works for you.

Regards

Murray

On Friday 27 September 2024 at 20:05:10 UTC+10 Arián Jiménez wrote:

Hi, I hope everyone is doing great! :-)

I'm working on an animation tool that can render different shapes, as well as text and LaTeX using MathJax v4.

Everything is rendered into a <canvas> element, and I'm using the Konva.js library for managing the canvas.

To get MathJax into the canvas I'm using MathJax.tex2svg, get the SVG, convert it to base64, then treat it as an image in the Konva library. I found this to be very fast and convenient.

A text object can contain a combination of plain text and MathJax, and I want to be able to automatically align them, but I can't figure out how to do that.

The difficult part is that since each MathJax and text piece are separate, I don't know how to automatically align them. Ex:

In both lines I'd expect the MathJax to appear higher.

Is there anyway to figure out from the returned SVG how to align with the text? I'm thinking if there's a way to get the expected baseline for the MathJax, if I find that number, or calculate it, then I can move it to align with the text.

Other things that I tried is to simply render the text and MathJax in a DOM element, and use some library to take a "screenshot" of it. This was perfectly aligned, but too slow and wasn't scalable enough. Getting the SVG is much much faster so I'd like to keep that approach.

Does anyone have any ideas how to do this?

Thank you!,

Arián.

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/zThKffrrCvE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/415b3fc8-c740-4f3a-b01b-68a41a1ac3bcn%40googlegroups.com.

John Wiley & Sons Limited is a private limited company registered in England with registered number 641132. Registered office address: The Atrium, Southern Gate, Chichester, West Sussex, United Kingdom. PO19 8SQ.

The contents of this email and any attachments are confidential and intended only for the person or entity to whom it is addressed. If you are not the intended recipient, any use, review, distribution, reproduction or any action taken in reliance upon this message is strictly prohibited. If you received this message in error, please immediately notify the sender and permanently delete all copies of the email and any attachments.

Davide Cervone

unread,

Oct 4, 2024, 5:43:31 AM10/4/24

to mathja...@googlegroups.com

Note that the ex value isn't the ex height of the MathJax 'x', it is the ex-height of the surrounding font (when it is used in HTML). But you don't really need to know either value directly. Note that the height attribute is also in ex, so you can divide the vertical-align value by the height value to get the proportion of the total hight that is the vertical alignment shift. Multiply that by the total height of the SVG and you should get the amount to shift the math down to have the baseline of the math to match the baseline of surrounding text.

Davide

On Oct 3, 2024, at 11:52 AM, 'Jimenez Majidi, Arian -' via MathJax Users <mathja...@googlegroups.com> wrote:

Thank you very much Murray. I had noticed the vertical align attribute and tried to use it. What I failed to get correctly was the actual value of the `ex` unit in pixels.

First I tried to figure it out by trial and error (try different values, see which one looks good), but this wasn’t perfect.
Then I rendered a MathJax `x` as an SVG into the browser, measured the height, and used that value. Still didn’t work, so I thought I was missing something.

Turns out the rendered MathJax `x` has a different size in the canvas. So I had to measure the height of that `x`, with that value now it all looks pretty good.
Another part of my previous approach that wasn’t working is that I was vertically centering the text and MathJax elements, then applying that vertical align value. But it doesn’t work like that, I have to align the values around a common baseline, then apply the vertical align.

<image001.png>

You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/DS0PR02MB9398E285411C4DCA55231B43ED712%40DS0PR02MB9398.namprd02.prod.outlook.com.

Reply all

Reply to author

Forward