react-native-mathjax-html-to-svg icon indicating copy to clipboard operation
react-native-mathjax-html-to-svg copied to clipboard

Math equation not rendering correctly

Open amitanshugupta opened this issue 10 months ago • 1 comments

Rendering some math equations using below code but not able to adjust the width of content as its displaying content out of the screen bounds

<MathJaxSvg fontSize={15} color="#000">
              {`<p>\\(\\frac{1}{2}(x+2)\\sqrt{x^2+4x+6} - 2 \\log |x+2+\\sqrt{x^2+4x+6}| + C\\)</p>`}
</MathJaxSvg>

Image

Can someone help me how can I display content in multiple lines if it exceeds screen size. I tried using font style, view style, binding MathJaxSvg inside a view with bounded width but not able to fix this.

amitanshugupta avatar Jan 21 '25 07:01 amitanshugupta

You can try putting dollar signs at specific parts of the equation: <MathJaxSvg fontSize={15} color="#000"> {<p>$$\\(\\frac{1}{2}(x+2)\\sqrt{x^2+4x+6}$$ - 2 $$\\log |x+2+\\sqrt{x^2+4x+6}|$$ + C\\)</p>} </MathJaxSvg>

I am assuming in this way, the equation will be divided into multiple blocks of svgs instead of just one svg, then it can fit the width of the screen size.

hackers-wrld avatar Jul 11 '25 11:07 hackers-wrld