Styling about <br>

[winprocsx]

I want to decrease height of 'br'

I saw #410 closed issue, and I try to use font size of  <p> tag
But when I use '<p><br></p>'(this is gap of two paragraphs)
<br> has too high height

Is there any other way?

This is paragraph sample...

<p>This is title</p>
<p><br></p>
<p>this is context </p>

[Sub6Resources]

After a lot of investigation, it seems that this is an issue with the Flutter engine, and not flutter_html. We could add a workaround, but it would take a major rebuild, so probably not an option at this point.

See https://github.com/flutter/engine/blob/main/third_party/txt/src/txt/paragraph_txt.cc#L1132-L1142, where the Flutter engine uses the paragraph style to compute the line height of empty lines.

I'll open an issue in the engine for this shortly so we can try to get this fixed.

[Sub6Resources]

Opened an issue for the Flutter engine: https://github.com/flutter/flutter/issues/109925

[rafidgotit]

hey @winprocsx , I've found a solution to this issue. Well thats not exactly a solution, a trick that do the work. Your html is string at first right? Modify the string, replace <br> with a custom tag, say, <spacing><spacing/>. Then use custom render. As simple as it is.

htmlString = htmlString.replaceAll('<br>', '<spacing></spacing>');
    return Html(
      data: htmlString,
      style: {
        'p': Style(
          color: textStyle?.color ?? HomeColors.title.withOpacity(0.8),
          padding: EdgeInsets.zero,
          fontSize: FontSize(textStyle?.fontSize ?? 13),
          lineHeight: LineHeight.number(1.15),
          margin: EdgeInsets.zero,
          fontFamily: Fonts.primary,
        ),
      },
      customRender: {
        'spacing': (context, child) {
          return const SizedBox(height: 13);
        },
      },
      tagsList: Html.tags..addAll(['spacing']),
);

[Sub6Resources]

I can confirm that Flutter has fixed this issue and the fix has made its way to the stable channel now.