\vec{} arrow renders in the wrong place

[Noremac11800]

Description

The \vec{} command for drawing vector arrows over elements is being positioned in the wrong place (slightly too far to the right of the correct position). See screenshots, LaTeX code snippets, and expected behaviour below.

Side note: I am hoping this is just an issue with my environment that I am working with. It is a bit too complicated to share specifics here. I'm hoping it might be a font issue, but I have double checked everything I have suspected could be the cause of the issue and am at a loss, hence why I am raising an issue here.

Steps to Reproduce

1. Create a <math-field /> element (mine is specifically:

<math-field class="block-math" readonly value={formula} default-mode="math" />

2. The specific content for the formula variable is a string containing the following LaTeX snippet:

\begin{align*}
\vec{x}^{(k+1)} &= B^{-1}(\vec{b}+(B-A)\vec{x}^{(k)})\\
&= B^{-1}(\vec{b}+B \vec{x}^{(k)}-A\vec{x}^{(k)})\\
&= (B^{-1}B)\vec{x}^{(k)}+B^{-1}(\vec{b}-A\vec{x}^{(k)})\\
&= \vec{x}^{(k)}+B^{-1}(\vec{b}-A\vec{x}^{(k)}) \quad\blacksquare
\end{align*}

In general though, the following much simpler LaTeX snippet also shows the same problem:

\vec{x}

3. Observe that the vector arrow drawn by the \vec{} command is drawing in the incorrect place.

Actual Behavior

In my environment, the following output is drawn:

However, when trying the same formula in the demo page on https://cortexjs.io/mathlive/demo/, the math is drawn correctly:

Expected Behavior

The expected behaviour is as shown above, but I also rendered the LaTeX in another piece of software I use frequently and it also looks correct:

Environment

MathLive version: 0.102.0. (installed via npm install --save mathlive)

Is this a regression: did it use to work in a previous version?
As far as I can tell, it works now, just not in my environment.

Operating System: macOS Sonoma v14.3.1

Browser: Chrome (tried in Safari as well with the same result)

[arnog]

Since this is a problem I can't reproduce, I'm afraid I can't fix it.
It does look like you're using the wrong font. Make sure you are using the font that is part of the MathLive package you are using (same version).

[Noremac11800]

Thanks for getting back to me so fast.

I had some font issues a bit earlier but I thought I'd fixed them...

In my environment, when I first installed MathLive via npm install --save mathlive, it installed it in the correct place in my project. However, when I tried it out, the math appeared to be drawing inconsistently. I later determined that it was because MathLive couldn't find the correct fonts and it was defaulting to the Times font.

I did some searching in and around the docs and some related issues/discussions here and found that I could set the MathfieldElement.fontsDirectory property manually to a directory of my choosing. I was very unfamaliar with how MathLive (and probably other packeges too) determine the relative root of a project. It appeared that MathLive was looking at ./node_modules/.vite/deps/ at the root of my project, so I set my MathfieldElement.fontsDirectory property as:

MathfieldElement.fontsDirectory = "../../mathlive/dist/fonts"

This appeared to solve my original font issue. It drastically improved actually. But now there's this tiny inconsistency with the vector arrow. I've also found a few other instances, mostly to do with fraction spacing in matrix environments. This is most likely a font issue too because I can't replicate the behaviour on the demo website.

@arnog I'm hoping something that I've said above may have raised some red flags for you. Is my understanding of the font directory pathing wrong? What's the best way to ensure that I am using all of the correct fonts?

To be extra safe, I cloned this repo down and copied the font directory exactly into the correct location in my project just to see if the font files were different or missing, and that didn't seem to change anything.

Any ideas you might have would be greatly appreciated. I'm a bit of a novice when it comes to "web tech". I'm not always clear on the standards when it comes to installing 3rd party libraries/packages from NodeJS.

[arnog]

If you are unfamiliar using asset pipelines in your toolchain, I would recommend using the CDN version of MathLive instead, which will insure the correct font package is used.

[Noremac11800]

Thanks for the suggestion. I just had a go with your idea now.

I uninstalled the MathLive package I was using via npm (I double checked that it was uninstalled) and I added the required script tag to use the CDN version of MathLive. This worked as expected, however I am still seeing that strange behaviour with the vector arrow. Here is a screenshot of a plain math-field with the same LaTeX content I presented in the issue description at the top of this page:

I am convinced that it's not a font issue now. I made sure to disable any other fonts I am using in my environment, so the math-field component can only be using the fonts provided by the CDN.

I am wondering if it might be some conflicting CSS property that I have set which is accidentally targeting some of the components in the math-field element. @arnog do you know of any CSS properties I should be strictly avoiding? Do you perhaps know of any common CSS properties that could have been set that would affect the vector arrow element's position?

My next step is going to be to create a fresh new project with nothing in it except for the dependency to MathLive to see if I can replicate the issue there.

[Noremac11800]

Quick update:

I just tried out the above in a completely fresh project. There's nothing in it at all except for a single page and the math-field with the above LaTeX content (and of course the script tag to bring in MathLive from the CDN), and the issue is still happening.

I am at a loss here.

Also on a side note, I don't know if this helps at all, but I also noticed that highlighting the elements with the vector arrow over it causes the arrow to shift slightly. I am assuming that is also not intended behaviour?

Not highlighted:

Highlighted (arrow is slightly shifted down and kind of italicised):

Any ideas what could be happening here?

(Edit):
Actually that highlighting behaviour with the arrow shifiting down can be reproduced in the demo page on https://cortexjs.io/mathlive/demo/

[Noremac11800]

Sorry to keep piling on here, but I'm experiencing some even more weirdness.

I've just swapped over to my Windows machine (previously I was on Mac) to do all of the same testing as above. Firstly, I do see the same behaviour on my Windows machine using the same project as on my Mac but there's some extra weirdness there which I will describe soon! Crazy enough though, when I try it out on https://cortexjs.io/mathlive/demo/ in Google Chrome I DO see the weird behaviour (I'm not crazy haha)!

Take a look at these screenshots from the CortexJS demo page:

Ain't that interesting!

Anyway, back to the weirdness in the <math-field> element that I observed in my environment, which I have replicated on the demo page... Take a look at this!

There's layers of weirdness here. I created the first vector x by manually typing in the LaTeX field \vec{x}, but the other vector x and vector y were created by using the "auto-complete" TAB completion in the math field when typing out "back-slash v-e-c TAB". First of all, it looks like the \vec{} command draws correctly in the <math-field> element when the syntax is written like this \vec{}x but not when written like this \vec{x}. I didn't even know that the former was valid LaTeX to draw vector arrows (is it valid or is this a mistake?). Secondly, the vector arrow above the x is drawn in the correct place but the arrow above the y is way off. Surely that is a bug?

Sorry to be hammering you, I just wanted to note down all of my discoveries when I find them.

Thoughts on this?

[arnog]

Sounds like you've made some progress in your investigation.
Could you summarize the problem for me? If this is something that I can reproduce, I'd be happy to look into it.

[Noremac11800]

Thank you! That would be great.

Issue

The behaviour of the \vec{} command appears to be different between MacOS and Windows (using the same browser: Google Chrome).

These tests were all done on the CortexJS demo page but for the record, is also identically reproducible in my environment.
See the table below for comparisons between the two (apologies for the slightly inconsistent comparisons, I don't have my Windows machine with me at the moment):

	MacOs	Windows
Typing \vec{x} directly into the LaTeX field	Looks correct	Arrow is to the right
Typing \vec{}x directly into the LaTex field	Arrow is to the left	(Looking at the second term) Arrow looks correct
Typing \vec{}x + \vec{}y (idk what's going on here. Just some inconsistent weirdness)

Basically there is something wrong with how the vector arrow element is being handled. The arrow also changes position when highlighted using the cursor.

Expected behaviour

The arrows should be perfectly aligned above each term. For example, using the demo page with the following expression on MacOS in Google Chrome, the expression renders correctly:

Although if I'm honest, even in the above example, the terms look too close to the "+" sign. I would expect it to look more like:

Bonus Issue

There also seems to be some rendering inconsistencies with terms that are wrapped in the \hat{} function. The below screenshot was taken on my Mac on the demo page:

Incorrect behaviour

Correct behaviour

[arnog]

OK, so that seems to be a Windows specific issue. I don't have a Windows machine. If anybody has any idea what might be going on, speak up.

[Noremac11800]

@arnog thanks for your help. With regards to the "Bonus issue" to do with the \hat{} command I added at the bottom of my last comment, that issue is reproducible on my Mac in Google Chrome on the demo website. Maybe this issue is more accessible to you? Would you like me to create a separate issue to capture that problem, or would you like to continue using this issue?