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.79k stars 860 forks source link

Using <sup> inside <p>, <p> styling requires <sup> styling #1332

Open jasonflaherty opened 1 year ago

jasonflaherty commented 1 year ago

Describe the bug: I am using the <sup> tag inside of <p> tags. When I have no style applied, it works fine. However, it fails when I apply styling to a <p> tag.

HTML to reproduce the issue: Broken: Html( data: "<p>Lorem ipsum dolor sit amet. Eum<sup>5</sup> dignissimos illo qui omnis explicabo qui saepe atque est eligendi culpa ut ratione minus est deleniti distinctio sed aspernatur galisum.</p>" style: { "p":Style(fontSize: FontSize.larger), } ) Workaround: Html( data: "<p>Lorem ipsum dolor sit amet. Eum<sup>5</sup> dignissimos illo qui omnis explicabo qui saepe atque est eligendi culpa ut ratione minus est deleniti distinctio sed aspernatur galisum.</p>" style: { "p":Style(fontSize: FontSize.larger), "sup": Style(fontSize: FontSize.medium,verticalAlign: VerticalAlign.sup) } )

Html widget configuration: Widget build(BuildContext context) { return SafeArea( child: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ topColorBanner(context), SizedBox(height: 30), Image.asset( 'assets/images/logo.png', semanticLabel: "Logo label", ), SizedBox(height: 10), Html( data: "<p>My text and a test of the sup tag: km<sup>2</sup>.</p>", style: { "p": Style(fontSize: FontSize.larger), "sup": Style(fontSize: FontSize.medium,verticalAlign: VerticalAlign.sup) }, ), ], ), ), ); }

Expected behavior: sup should work regardless of the surrounding tag.

Screenshots: MicrosoftTeams-image

Device details and Flutter/Dart/flutter_html versions: Flutter: 3.10.5 Dart: 3.0.5 flutter_html: 3.0.0-beta.2

Stacktrace/Logcat

Additional info:

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