Words in a table wrap in the middle of the word -> Problem with percentage

[DFelten]

With the latest version a bug was fixed, by which percentage values work. Unfortunately this change breaks our tables. The behavior in the browser is different than in the app. In the browser, the text never wraps in the middle of a word.

There is also a problem with the percentages. Our example table has a width of 70%, but they are set to 100% via CSS. On the web it's working, but with this package it seems not possible to override the percentage. The custom styles are not working here.

Steps to Reproduce

HTML

<div class="table-responsive">
    <table style="width: 79.0765%;">
        <tbody>
            <tr style="height: 55px">
                <td style="width: 15.6051%;height: 55px"></td>
                <td style="width: 19.7054%;height: 55px"><strong>Dreame H11 Max</strong></td>
                <td style="width: 19.7054%;height: 55px">Dreame H11</td>
            </tr>
            <tr style="height: 23px">
                <td style="width: 15.6051%;height: 23px">Saugkraft</td>
                <td style="width: 19.7054%;height: 23px"><strong>10.000 pa</strong></td>
                <td style="width: 19.7054%;height: 23px"><strong>5.500 pa</strong></td>
            </tr>
        </tbody>
    </table>
</div>

`HtmlWidget` configuration

class CustomHtmlWidget extends StatelessWidget {
  const CustomHtmlWidget();

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [
      const SliverToBoxAdapter(),
      HtmlWidget(
        htmlCode,
        renderMode: RenderMode.sliverList,
        customStylesBuilder: _customStylesBuilder,
      ),
    ]);
  }

  Map<String, String>? _customStylesBuilder(dom.Element element) {
    if (element.localName == 'table') {
      return {'width': '100%'};
    }
    if (element.localName == 'td') {
      return {'width': '100%'};
    }
    return null;
  }
}

Tesing environment

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-x64, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[☠] IntelliJ IDEA Ultimate Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
[✓] VS Code (version 1.65.0-insider)
[✓] Connected device (3 available)

! Doctor found issues in 1 category.

Expected results

Result in the browser

Actual results

Result in the flutter app

Without the percentage fix with 0.8.5 of flutter_widget_from_html and 0.8.4 of flutter_widget_from_html_core:

[daohoangson]

On the web it's working, but with this package it seems not possible to override the percentage. The custom styles are not working here.

This is expected because they are applied in this order: tag styling, custom styles then inline styles.

The behavior in the browser is different than in the app.

This is a known issue. Previously the TD width worked in an acceptable way but after #712 it turns out to be quite critical. I'll try to fast track #531.

[DFelten]

Thanks for the fast reply!

This is expected because they are applied in this order: tag styling, custom styles then inline styles.

On the web, this order makes sense because we can also override inline styles using !important. This is currently not possible with the package as far as I know. Would it be possible to allow the important addition or alternatively add a way to optionally change the order of the applied styles? Alternatively another styling variable would be possible, important styles.

WordPress unfortunately very often sets percentages as inline style. Like this we can't use the current version of the package and have to use an older version.

[DFelten]

Anything new here since you closed the MR with the possibility to use important within custom styles? :)

We're currently not able to update your package because of the percentage problem. We have to use my custom fork or use the old version.

[daohoangson]

Sorry, no update in this front yet. The apply order of styling may be changed in the next major release since it's a breaking change, I'm still doing API simplification for that release. In the mean time, #531 needs more work.

[daohoangson]

Column width is being worked on in #747, with the latest commits, your HTML will look like this:

The calculation is now closer to browser's (not a perfect match). It doesn't support !important yet though.

[DFelten]

Anything new here? We still need important...

An other example:

<a href="https://www.google.com" 
    class="btn btn-green deal-button"
    target="_blank" 
    style="display:inline-block; margin:auto; max-width: 20%; width: 80%">
        Zum 8GB Deal
</a>

Looks like this (with factory for the button, otherwise you would only see the text with the same problem):

In browser

There is currently no possibility to fix this. On a website there would be an override via CSS. There is now a separated ticket for the max-width bug https://github.com/daohoangson/flutter_widget_from_html/issues/817

[daohoangson]

[email protected]+2 has been released with the fix for your usage. Previously, the viewport width is divided between available columns. In your HTML, the width is set to be very narrow so the cell contents cannot be rendered properly.

After the fix, the cell intrinsic width is taken into account but it is not applied forcefully. The table won't occupy the full width all the time. It will measure its children and choose some sensible value. Please try the new version and let me know if it breaks anything.

[DFelten]

Thanks for the update. With the latest version it's definitely better. But not perfect.

Html

<div class="table-responsive">
    <table>
        <tbody>
            <tr >
                <td style="width: 15.6051%;height: 55px"></td>
                <td style="width: 19.7054%;height: 55px"><strong>Dreame H11 Max</strong></td>
                <td style="width: 19.7054%;height: 55px">Dreame H11</td>
            </tr>
            <tr >
                <td style="width: 15.6051%;height: 23px">Saugkraft</td>
                <td style="width: 19.7054%;height: 23px"><strong>10.000 pa</strong></td>
                <td style="width: 19.7054%;height: 23px"><strong>5.500 pa</strong></td>
            </tr>
        </tbody>
    </table>
</div>

App

Browser

Without the width it's working, but an improper width still creates a mid-word line break.

[daohoangson]

Hmm, I see.

[daohoangson]

I'm closing this issue. Let's use https://github.com/daohoangson/flutter_widget_from_html/issues/817 to keep track of the word breaking enhancement.