[BUG] Html and SelectableHtml treat some opening and closing html tag elements as new lines and adds white space in the generated widget

[zilvis97]

Describe the bug:

Every closing div tag and some opening div tags acts as a new line element if they are formatted as a proper HTML. If we put all the closing tags into one line, the whitespace disappears.
I tried to apply display: Display.INLINE_BLOCK, or some other display type to div tags, it kind of solves this issue, but then it clutters all the text into one without being able to see any paragraphs, also the alignment becomes weird with some paragraphs having some leading spaces before the start, even that is not consistent as some paragraph would have 1 leading space, some would have 2 or 3.

HTML to reproduce the issue:

<div>
    <p><em>Last update: 3rd September 2021</em></p>
    <div class="page" title="Page 1">
      <div class="layoutArea">
        <div class="column">
          <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie nulla ut magna commodo semper. Aliquam non aliquet diam. Nunc vitae dictum arcu, at lobortis leo.</span></p>
          <p><span>Aliquam congue nibh et leo fringilla lobortis. Proin lacus nibh, auctor vitae mauris non, lobortis vulputate ex. Ut pulvinar finibus nibh, ut pharetra sem rhoncus sed. </span></p>
        </div>
      </div>
    </div>
    <h3>1. Scope of the Privacy Policy</h3>
    <div>
      <div class="layoutArea">
        <div class="column">
          <p><span>“</span>Vivamus fermentum lobortis tellus. Nullam feugiat elementum cursus. Duis tristique posuere erat non cursus. Sed facilisis dui ac erat convallis feugiat. Donec lectus erat, porttitor id luctus a, scelerisque eu libero. Suspendisse sed nulla ultricies, sodales augue non, auctor nulla.
 </span></p>
          <div>
            <div class="layoutArea">
              <div class="column">
                <p>Nulla nec augue dapibus, placerat libero sed, elementum libero. Donec sodales neque et risus tincidunt aliquet. In hac habitasse platea dictumst. Vivamus ullamcorper dictum nulla ut consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas quis dignissim turpis. Donec non felis eget massa malesuada tempor.</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p>some more text</p>
</div>

Html widget configuration:

Html(data: htmlData)

Expected behavior:

Should be no whitespace for every closing tag between the text

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

Stacktrace/Logcat

flutter_html: ^3.0.0-alpha.5

Additional info:

If we put all the divs together in one line with no spaces/lines separated:

<div>
    <p><em>Last update: 3rd September 2021</em></p><div class="page" title="Page 1"><div class="layoutArea"><div class="column">
          <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie nulla ut magna commodo semper. Aliquam non aliquet diam. Nunc vitae dictum arcu, at lobortis leo.</span></p>
          <p><span>Aliquam congue nibh et leo fringilla lobortis. Proin lacus nibh, auctor vitae mauris non, lobortis vulputate ex. </span></p></div></div></div>
    <h3>1. Scope of the Privacy Policy</h3>
    <div>
      <div class="layoutArea">
        <div class="column">
          <p><span>“</span>Vivamus fermentum lobortis tellus. Nullam feugiat elementum cursus. Duis tristique posuere erat non cursus. Sed facilisis dui ac erat convallis feugiat. Donec lectus erat, porttitor id luctus a, scelerisque eu libero.
 </span></p>
          <div>
            <div class="layoutArea">
              <div class="column">
                <p>Nulla nec augue dapibus, .....</span></p></div></div></div></div></div></div>
    <p>some more text</p>
</div>

it will format the text more like expected:

A picture of a cute animal (not mandatory but encouraged)

[Sub6Resources]

I believe the whitespace issues have been resolved on the master branch. We're hoping to push out a new release, 3.0.0-alpha.6 that contains these changes. If this is blocking, you can try using this library from the master branch until the next release comes.

[ValentinVignal]

Hi @Sub6Resources , do you have any rough estimation on when you are going to release it?

[Sub6Resources]

@ValentinVignal I've been pushing through some blocking pull requests today, so within the next few days hopefully. I'm getting married in a couple weeks so I'm pretty busy.

[ValentinVignal]

@Sub6Resources Nice! Congratulation! 💍 🎉

[Sub6Resources]

Thanks! The new version of the core library has been pushed to 3.0.0-alpha.6. The subpackages are still waiting to be released. Will you verifiy that this fixed your issue @zilvis97 and @ValentinVignal?

[zilvis97]

@Sub6Resources Sorry for late reply, I have just checked on my app with flutter_html: ^3.0.0-alpha.6 but it still looks to have the same issue.
Using Html widget:

Using SelectableHtml widget:

[workerbee22]

Confirmed still bug present in flutter_html: ^3.0.0-alpha.6. This is really annoying and makes the content look terrible. IS there any workaround that we can use temporarilly?

Example rendered, when there are no leading spaces in HTML. Typically there is a new line (but no space) in HTML between the HTML h3 tag in this case before text begins.

[aiserrock]

Same problem in flutter_html: ^3.0.0-alpha.6.
Do you know any althernative solution? workaround?

[m-skolnick]

I believe I found a related bug. New lines are added for each <div> element.

If the <div> is nested in a tree, new lines are added at the end of the tree.
If the <div> is in a list, new lines are added inline for each <div>.

The lines causing the issue seem to be here:

flutter_html/lib/custom_render.dart

Line 140 in 4225935

TextSpan(text: "\n"),

and here:

flutter_html/lib/custom_render.dart

Line 147 in 4225935

TextSpan(text: "\n"),

Please see the reproduction here: https://github.com/m-skolnick/flutter_html_test/blob/main/README.md

Offending html string

<html>
<div>
  <div>
    <div>
      <div>
        <div>center of nested div tree</div>
      </div>
    </div>
  </div>
</div>
bottom of nested div tree
<div></div>
<div></div>
<div></div>
<div>center of div list </div>
<div></div>
<div></div>
<div></div>
bottom of div list
</html>

Actual Display

Expected Display

[m-skolnick]

@Sub6Resources It looks like it's been a few months since there were updates. Just curious if this is a package you're still actively maintaining.

Thank you for this package! It's been great so far!

[Sub6Resources]

@m-skolnick Yup, still maintaining! Just got sidelined for a bit. See #1247. Thanks for getting to the root of this issue!