Wrong text aligment in HTMLMesh

Questions
, ,
1

I am rendering math formulas with Mathjax and it works fine while rendering by regular HTML renderer, but I want to push result ro XR, so render it to HTMLMesh first, and it works too, but
by strange reason loses alignment property and do center alignment instead of desired left.

Examined HTMLMesh code gives no results as experiments with CSS properties of div.
Could some experts point me the right direction to look at ?

I understand that question is very specific, but I have been struggling with that almost all day and you are my last hope :).

Code and result are following:

<div id="math">
\begin{aligned}
  &X = u \space sin( v )\\
  &Y = u \space cos( v )\\
  &Z = \log_{10} (sin(ua) \space b + c)\\
  &\\
  &u=1.3\\
  &v=2\pi\\
  &a=2\\
  &b=3\\
  &c=0.11\\
\end{aligned}
</div>

image
image799×449 51.4 KB

2

Can you check if any of the properties you’re using are on the not supported list here: Features | html2canvas ?

2 Likes
5

Thanks, now I know where to dig :slight_smile:

6

I’m not familiar with HTMLMesh, is there a link?

If you’re happy to use @react-three/fiber and also @react-three/drei, you could try:

<Html>.

7

Thank you for attention to my problem and suggestions. Being familiar with React stuff,
I am prefere a pure "vanilla"approach. Problem still exists, although I found ugly workaround by
adding extra spaces (~).

Here is a good example of using HTMLMesh, which I am following.

1 Like