search

Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 874 forks source link

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

Closed zilvis97 closed 1 year ago

zilvis97 commented 2 years ago

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:

image

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:

image

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

Sub6Resources commented 2 years ago

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 commented 2 years ago

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

Sub6Resources commented 2 years ago

@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 commented 2 years ago

@Sub6Resources Nice! Congratulation! 💍 🎉

Sub6Resources commented 2 years ago

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 commented 2 years ago

@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:

image

Using SelectableHtml widget:

image
workerbee22 commented 1 year ago

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.

image
aiserrock commented 1 year ago

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

m-skolnick commented 1 year ago

I believe I found a related bug. New lines are added for each \

element.

If the \

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

The lines causing the issue seem to be here: https://github.com/Sub6Resources/flutter_html/blob/422593551d54704594965a2e9127dac17c88406e/lib/custom_render.dart#L140

and here: https://github.com/Sub6Resources/flutter_html/blob/422593551d54704594965a2e9127dac17c88406e/lib/custom_render.dart#L147

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 flutter_html_display

Expected Display correct_display

m-skolnick commented 1 year ago

@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 commented 1 year ago

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

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.