Flutter_html: Wrapping issue on long lines

[Sub6Resources]

Reported in #9 by @chusmf:

It happens when the sentence occupies more than 1 line in the space.

In the next example, the two first p tags are ok, the third one breaks in two lines

Html(
       data: """     
       <div>       
         <p>You <b>cannot </b> install a nonexistent product!</p>
         <p>You <b>cannot install </b>  a nonexistent product!</p>
         <p>You <b>cannot install </b> a nonexistent product from that shop!</p>          
       </div>
       """,  
       padding: EdgeInsets.all(8.0),
       backgroundColor: Colors.lightGreen);

[Kapranov98]

Maybe to use RichText to display text?

[Sub6Resources]

RichText is what we were using before we switched to Wrap to display nodes, but because RichText does not have children widgets, we cannot render a full tree using RichText (For example, an img tag would not render inside an a tag). The switch to Wrap resolved those more problematic issues, but now has this issue instead.

[kevinApplaud]

Hi any news about this issue?

[Sub6Resources]

@kevinApplaud Pull request #37 is a proposed solution to the issue.

[petekblaz]

Any news on this?

[Sub6Resources]

Sorry, I've been busy with finals. Will get to this soon!

[ianrothmann]

Hi there!

Any news on this issue?

[The-Redhat]

Wouldn't it be better to use TextSpans in p elements instead of Text Widgets?

[Sub6Resources]

@The-Redhat see https://github.com/Sub6Resources/flutter_html/issues/17#issuecomment-435620259 above

[Sub6Resources]

@ianrothmann Sorry, I have other projects for both work and school taking up a lot of my time that have priority over this project. I promise I will get to this, but it may be a couple weeks still.

[The-Redhat]

Ok thanks @Sub6Resources. I hope you can fix this bug as soon as possible!

[Sub6Resources]

Pull request #37 has been merged and version 0.9.0 released. This provides a fix for the text wrapping issue by creating a parser that uses RichText. The fix for the wrapping issue works, but at the cost of the customRender callback and doesn't support a couple of elements that are normally supported.

To use the new RichText version of the parser, set useRichText to true in your Html widget:

Html(
    data: """
      <p>
        This is text that with the <u>old parser</u> would have wrapped strangely. However, using <code>useRichText</code> it works just fine!
      </p>
    """,
    useRichText: true,
)

This issue will be closed and a new issue opened in regards to the default parser still having the issue.

[bpastukh]

any workaround? I need to use customRender (to render iframes), so can't use RichText

UPD. my workaround is to render all elements manually

[Sub6Resources]

@bgpastukh You can also use version 1.0.0-pre.1 which has built in support for iframe rendering and wraps lines correctly as well.

[amanokerim]

Pull request #37 has been merged and version 0.9.0 released. This provides a fix for the text wrapping issue by creating a parser that uses RichText. The fix for the wrapping issue works, but at the cost of the customRender callback and doesn't support a couple of elements that are normally supported.

To use the new RichText version of the parser, set useRichText to true in your Html widget:

Html(
    data: """
      <p>
        This is text that with the <u>old parser</u> would have wrapped strangely. However, using <code>useRichText</code> it works just fine!
      </p>
    """,
    useRichText: true,
)

This issue will be closed and a new issue opened in regards to the default parser still having the issue.

How can I fix this on version 1.1.1, while there is no parameter useRichText?

[erickok]

Since 1.x there is only one parser/renderer. No need to choose. If you have an issue with long text, you may open a new issue.

[amanokerim]

Since 1.x there is only one parser/renderer. No need to choose. If you have an issue with long text, you may open a new issue.

I have a problem like in #388, I thought that this can help. Any suggestions?

[erickok]

@amanokerim Please file a new issue, with a minimal example to reproduce the problem. Thanks!