Flutter_widget_from_html: Add support for inline math equations via Katex or similar

[rommelcarlo]

Please add support for inline math equations via Katex or similar if possible in the future

[daohoangson]

This package looks promising https://pub.dev/packages/flutter_tex

[imarindam]

+1
When data fetched from server with Latex code encoded in $...$ or something like that, if it can render that, it would have been more than awesome.

[daohoangson]

@imarindam do you have sample HTML?

[imarindam]

@daohoangson There you go:

<p>$T_{r+1}=\,^{5}C_{r}(2a)^{r}\left ( \frac{2}{a} \right )^{5-r}$</p>
<p>$=\,^{5}C_{r}\,(2)^{r}\, (a)^{r}\,(2)^{5-r}\,(a)^{r-5}$</p>
<p>$=\,^{5}C_{r}\,(2)^{5}\, (a)^{2r-5}$</p>
<p>For 2nd term $r=2$</p>
<p>$\therefore T_{2+1} =\,^{5}C_{2}\,(2)^{5}$</p>
<p>$=\frac{5\,!}{2\,! \times 3\,!} \times 2^{5}$</p>
<p>$=\frac{5 \times 4 \times \times 3\,!}{2\,! \times 3\,!} \times 32$</p>
<p>$=5 \times 2 \times 32$</p>
<p>$=320$</p>

It should look like this.

[daohoangson]

How does a normal webpage know to render this markup as latex? They have some special JavaScript that detects $ or something? Hey @imarindam do you have link to a webpage that uses this type of markup?

[imarindam]

@daohoangson Most probably they use Mathjax
For your reference you can check https://www.codecogs.com/latex/integration/htmlequations.php
https://viereck.ch/latex-to-svg/
https://www.quicklatex.com/
https://i.upmath.me/
https://www.latex4technics.com/

Example websites you can look
http://www.holoborodko.com/pavel/2014/11/04/computing-mixed-derivatives-by-finite-differences/
https://mathforums.com/threads/an-equation.348656/
https://en.wikipedia.org/wiki/Help:Displaying_a_formula

You can also check these libraries for android
https://github.com/lingarajsankaravelu/Katex
https://github.com/jianzhongli/MathView

[Skyost]

Just to let you know, I've implemented this library in my HTML widgets. Here's how (but I'm pretty sure there exists some other better methods) :

1. I process the input string by putting math formulas $2+2 = 4$ inside a _$\_\; html\; tag$<math>2+2 = 4</math> (using this regex : input.replaceAllMapped(RegExp(r'(\$+)(?:(?!\1)[\s\S])*\1'), (match) => '<math>${removeTrailingAndLeadingDollars(match.group(0))}</math>').
2. I render the math tag using a custom Widget Factory :

@override
void parse(BuildMetadata meta) {
  super.parse(meta);
  if (meta.element.localName == 'math') {
    math ??= BuildOp(
      onTree: (meta, tree) => tree.replaceWith(
        WidgetBit.inline(
          tree,
          Math.tex(
            meta.element.text,
            textStyle: textStyle,
            mathStyle: MathStyle.text,
          ),
        ),
      ),
    );
    meta.register(math);
  }
}

1. That's all.

[daohoangson]

but I'm pretty sure there exists some other better methods

I think you did it beautifully. Personally I always try to avoid regex because of all the corner cases but in this instance, I don't think I can do any better than yours.

[Skyost]

@daohoangson Cool then, hope it can be useful for you (or for anyone viewing this issue).