Support for custom tags

[paulocoutinhox]

Hi,

I want support custom tags like J. See my example:

E, respondendo Jesus, disse: <J>Não foram dez os limpos? E onde [estão] os nove?</J>

I want paint with red, but the text simply is not rendered.

My code:

Html(
data:
    "<sup>${bibleVerse.verse}</sup> <div>${bibleVerse.text}</div>",
style: {
  "html": FHStyle.Style(
    textAlign: TextAlign.left,
  ),
  "div": FHStyle.Style(
    color: appStore.settingsVerseTextColor,
    fontFamily: appStore.settingsFontFamily,
    fontSize: FontSize(
        appStore.settingsVerseTextFontSize),
    display: FHStyle.Display.INLINE,
  ),
  "sup": FHStyle.Style(
    color: appStore.settingsVerseNumberColor,
    fontFamily: appStore.settingsFontFamily,
    fontSize: FontSize(
        appStore.settingsVerseNumberFontSize),
  ),
  "J": FHStyle.Style(
    color:
        appStore.settingsJesusWordTextColor,
    fontFamily: appStore.settingsFontFamily,
    fontSize: FontSize(
        appStore.settingsVerseTextFontSize),
  ),
),

For common tags work nice, but for J the text is not rendered.

Can you help me?

Thanks.

[paulocoutinhox]

I solved one problem. The text appear with custom render. But the text is on other line:

[ryan-berger]

@PRSolucoes We've had requests for this in the past, but I'm not sure if this is what flutter_html is made for. We really want it to be for rendering HTML, not for rendering a web app. I would recommend normalizing your HTML before feeding it through flutter_html

This is also a duplicate of #309

[fehernyul]

And how can you solve it??

[ryan-berger]

@fehernyul The only way to do so would be to normalize your HTML. You could regex it, you could parse it and recursively edit the tree, stringify, and then feed it into flutter_html, change the source so it uses standard HTML tags rather than non-standard tags or web component tags. There are many different ways one could go about it

[DFelten]

An other possibility is to use custom tags and use a custom renderer for them. There you need to define the widget for the corresponding tag. So it's possible to define the behavior yourself.