[BUG] Ordered list display on Windows

[jeremylcarter]

Describe the bug: HTML ordered list displays with a rectangle symbol on Windows. It appears like a missing font symbol.

HTML to reproduce the issue:

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

Html widget configuration:

return Html(data: """<div>
        <h1>Demo Ordered List</h1>
        <ol>
          <li>Mix flour, baking powder, sugar, and salt.</li>
          <li>In another bowl, mix eggs, milk, and oil.</li>
          <li>Stir both mixtures together.</li>
          <li>Fill muffin tray 3/4 full.</li>
          <li>Bake for 20 minutes.</li>
        </ol>
      </div>""");

Expected behavior:

Screenshots:

Device details and Flutter/Dart/flutter_html versions: Rendered by Flutter - Windows Desktop Renderer Windows 10 : 20H2 (Build 19042.985)

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (2 weeks ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

flutter_html: ^2.0.0
environment:
  sdk: ">=2.7.0 <3.0.0"

Additional info: This issue is not present when the device is Android.

A picture of a cute animal (not mandatory but encouraged) The Australian Spinifex hopping-mouse

[tneotia]

This is probably happening because of this line: Text("\t", textAlign: TextAlign.right),. Maybe the tab character doesn't display properly on windows?

[tneotia]

I tried this on my PC and I can't reproduce:

I use master and Windows 21H1, with the latest Flutter beta. My browser is Edge.

[jeremylcarter]

I am not using the web renderer, but rather the Windows Desktop renderer.

On Tue, Jun 1, 2021, 2:32 AM Tanay Neotia @.***> wrote:

I tried this on my PC and I can't reproduce:

[image: image] https://user-images.githubusercontent.com/50850142/120221271-1b660900-c20c-11eb-8836-bb2ad92485f8.png

I use master and Windows 21H1, with the latest Flutter beta. My browser is Edge.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Sub6Resources/flutter_html/issues/711#issuecomment-851588943, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAP5TKIRQLFZLFJJOFE4MOTTQO22BANCNFSM45Z64RJA .

[tneotia]

What is the flag for that? I only know of --web-renderer=canvaskit or --web-renderer=html.

[jeremylcarter]

https://flutter.dev/desktop

PS C:> flutter run -d windows

On Tue, Jun 1, 2021, 7:18 AM Tanay Neotia @.***> wrote:

What is the flag for that? I only know of --web-renderer=canvaskit or --web-renderer=html.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Sub6Resources/flutter_html/issues/711#issuecomment-851686330, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAP5TKM22IIDXN2YXV6OZADTQP4KVANCNFSM45Z64RJA .

[tneotia]

Ah I thought you meant Web. Technically we don't officially support Desktop, and this is probably not something we can fix as it seems desktop doesn't know how to display the "/t" (tab) character.

We might be able to use a workaround where we use padding to recreate the "/t", but then that won't account for various text styling, e.g. letter spacing and font size. I'll have to think about this more.

[jeremylcarter]

Hi, I was unaware that you didn't support Desktop, in which case that makes this not a bug.

[tneotia]

Yep the main reason we don't technically support it is because the <iframe> tag does not work on Desktop - however if your HTML doesn't have iframes then everything else should work fine. I would still consider this a bug though, as when we complete modularization (#661), we intend to support all platforms officially.

[Sub6Resources]

The core library should support all platforms. Needs some testing

[erickok]

Sure. Flutter is in a very different state now and we should try to fix it, if it still is an issue. I don't have access to a Windows machine though... Maybe you do?

[Sub6Resources]

I've got a dual boot option on my mac I can use. It'll take me a bit to get everything set up for it, but it doesn't appear to be a high priority issue, so I'll get to this when I have time.

[dahef34]

Something similar happens on web. I use up and down arrows which display fine on the supported platforms (↑) but don't work on web. Even the symbol ↑ doesn't display, just a box. Otherwise everything works well. +1 for expanding platform support to all officially supported platforms.

[erickok]

@dahef34 does that character work if you use plain Flutter widgets yourself?

Text.rich(
  text: TextSpan(
    text: "Hello ",
    children: [
      TextSpan(text: "↑", style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: " from The Upside Down"),
    ],
  ),
);

[dahef34]

Yes the character itself works and the code uarr; works. On web, the character itself works, but the code doesn't. I just went through and replaced all the codes with the characters they represent and now it works on all platforms as I expect. Other codes like lt; and gt; work on all platforms so I'm not sure why those have a problem. I haven't really used them in regular flutter widgets so I'm not sure if they would work there if that is what you were asking. I have a blog type platform so I load the next article in firebase as html then pull it into all the different flutter apps. That's why I'm excited for official support for all platforms as it's just easier to use the same html widget everywhere.

Edit: I figured out the issue I was having. Apparently canvasKit doesn't pull in Noto Sans fonts. It does automatically on all other platforms. I downloaded 3 Noto Sans fonts families and put them in my assets and then specifically set Html() to use the font and all is well.

[Sub6Resources]

Fixed in 3.0.0-beta.1.