Custom HTML tag is not rendering properly, nor behaving the same way in different platforms

[ihojmanb]

Decision Table

• My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

Description

hi folks! I'm using your library to render mathematical equations with the help of react-native-mathjax-html-to-svg. I'm creating a custom HTML tag, <math></math> to wrap LaTeX equations and turn them into SVG images within the sorrounding HTML.

I followed the steps of an article written by the Hashnode Engineering Team where they explain how they are using this libraries in order to render math equations in their mobile app.

Problem

Overall, the solution presented in this repository works fine: Math equations are successfully rendered in the app. However, there is a significant difference in the rendering between in-line math equations and block or display mathematics.

Display mathematics usually looks good, as they have plenty of space. The only time there is an issue is when we write long lines of math equations without breaklines, causing the SVG to extend beyond the margins of our screen. But this is not a problem since we can always write the LaTeX equations in a better format.

The main issue (and headache) arises when we try to render in-line mathematics, as it doesn't always look good. By that, I mean that the SVG generated by the rendering engine often overlaps with the non-mathematical text that precedes it or is not aligned with the same baseline as the text. As a result, it looks odd or even becomes unintelligible. This occurs in both iOS and Android simulators, with the issue being more pronounced in the Android simulator.

To illustrate this, please refer to the following image:

On the left, the Android Simulator. On the Right the iOS. As you can see, on Android there's heavy overlapping of in-line equations with the other content, while on iOS the equations are not on the same baseline, and in other cases there exists overlapping. On the other hand, block equations work fine.

Expected Behavior

The expected result is to be able to visualize in-line math equations in the same manner as they would appear in a Hashnode article, Notion page, or LaTeX document. This includes having the equations aligned with the content, placed on the same baseline, and rendered at a similar size to the surrounding font.

Here are some images for reference:

Hashnode editor

Notice though hashnode editor isn't perfect, it has some of the issues I've already described.

Notion editor

Here the Notion editor does a better job.

I know this issue might be related to styling, regarding position or alignment, but I'm out of know-how on how to debug the layers below the library. So any guidance on how to debug it, where to look at, or any idea would be much appreciated.

I would also like to mention that I'm not looking for a sophisticated solution or user experience like the ones Notion and Hashnode brings to their users, I'm just trying to simply render in-line mathematics with a solution that works :-), for our work with school teachers leveraged by the Center for Mathematical Modelling's Education Lab https://cmmedu.uchile.cl/, a public endeavor led by Universidad de Chile.

Happy coding!

React Native Information

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.0
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 9.6.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
      Watchman: 2023.04.17.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    IDEs:
      Android Studio: 2022.1 AI-221.6008.13.2211.9619390
      Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
    npmPackages:
      expo: ~48.0.18 => 48.0.20
      react: 18.2.0 => 18.2.0
      react-native: 0.71.8 => 0.71.8
    npmGlobalPackages:
      eas-cli: 3.14.0
    Expo Workflow: managed

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

Snack Link: https://snack.expo.dev/@ihojm/github.com-ihojmanb-math-equations-app

Github Repository: https://github.com/ihojmanb/math-equations-app

Additional Notes

No response

[hlarrainq]

I am also having the same issue. I tried with some others latex renderer libraries that convert math text to svg, and the overlap of the image over the text happens only on Android, so probably is related with react-native-render-html

[ihojmanb]

@jsamr could you provide any guidance on this? 🙏

[hlarrainq]

Hey @ihojmanb do you have any update on this?

[hlarrainq]

Any workaround? This error stopped me from launching a project:(

[nachobascar]

I'm having the same problem :( haven't found any workaround yet