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.
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:
Device details and Flutter/Dart/
flutter_html
versions: Flutter: 3.10.5 Dart: 3.0.5 flutter_html: 3.0.0-beta.2Stacktrace/Logcat
Additional info:
A picture of a cute animal (not mandatory but encouraged)