Re: [mathjax-users] Custom mglyphs floating.

[Davide Cervone]

You haven't given a key bit of data, which is the contents of the rabbit.svg and fox.svg files.  From the looks of your results, I suspect that the images contain extra space at the bottom, and that is why they appear to be "floating".  If you select the image using the browser's DOM inspector, I suspect you will see that its height includes blank space at the bottom of the image.  Since the image sits on the baseline, that extra space makes the rest of the image appear higher up than you would expect.  When you add the valign attribute, that changes how much of the image is above and below the baseline, and so you are moving the blank space into the part of the image that is below the baseline.  The rest of the math that is on the line with that image will now align with the new location of the baseline within that image.  Since the rabbit image now has 15px of depth below the baseline, and that means the rest of the math will move up to match that new baseline.

If you use

\def\rabbit{\mmlToken{mglyph}[src="imgs/rabbit.svg" style="border: 2px solid red"]{}}

you should be able to see the bounding box of the image.  You may be able to fix this by adjusting the viewBox attribute of the svg file, if it has one, or adding one if not.

If all else fails, you could try using \smash[d]{...} around your mglyph with the valign attribute, as that would remove the depth from MathJax's height and depth computations.  

Davide

On Feb 16, 2024, at 6:03 PM, João Felipe Contreras <jfcm...@gmail.com> wrote:

Hello everybody!

I'm making some notes based on a 3blue1brown video. At a certain point in the video, he shows the Lotka-Volterra equations with the variables represented by figures of rabbits and foxes.

I tried to represent this using MathJax and the <mglyph> element of MathML. The initial result has the icons floating above the symbols.

\(
    \def\fox{\mmlToken{mglyph}[src="imgs/fox.svg" width="50px"]{}}
    \def\rabbit{\mmlToken{mglyph}[src="imgs/rabbit.svg"]{}}
\)

\[\begin{align}
\frac{{d\rabbit}}{dt} &= \rabbit(\alpha - \beta \fox) \\
\frac{d\fox}{dt} &= \fox(\delta \rabbit - \gamma)
\end{align}\]

<bug1_mathjax.png>

It seems to be a problem that could be solved with a negative value of the "valign" parameter (responsible for aligning baselines). However, when attempting to do this, all symbols that are at the top of the fraction float.

\(
    \def\fox{\mmlToken{mglyph}[src="imgs/fox.svg" width="50px" valign="-15px"]{}}
    \def\rabbit{\mmlToken{mglyph}[src="imgs/rabbit.svg" valign="-15px"]{}}
\)

\[\begin{align}
\frac{{d\rabbit}}{dt} &= \rabbit(\alpha - \beta \fox) \\
\frac{d\fox}{dt} &= \fox(\delta \rabbit - \gamma)
\end{align}\]

<bug2_mathjax.png>

How should I proceed to correct this issue?

--
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/491be87a-b3ff-4053-ad80-b1fa5745cdf8n%40googlegroups.com.
<bug1_mathjax.png><bug2_mathjax.png>