You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When having short <a> links nested in <u> underlined text, the underlining color for the link is the color of the <u> underlining element, where it is expected to be the color of the <a>, as it is the inner child.
E.g.:
Html(
data:'''<u>When a text that contains <a href="https://google.com">a single line link</a> is underlined, the link underline color is wrong</u>''',
style: {
"u":Style(color:Colors.black),
"a":Style(color:Colors.red),
},
);
Renders as follows:
2. Long links: Link color is used for text after the text
When having <a> links that span multiple lines nested in <u> underlined text, the link is now actually using its defined color as expected, but this time the underlining color for the text after the link is the color of the link rather than the <u> underlining color. E.g.:
Html(
data:'''<u>When a text that contains <a href="https://google.com">a link somewhat that spans multiple lines</a> is underlined, the end underline color is wrong</u>''',
style: {
"u":Style(color:Colors.black),
"a":Style(color:Colors.red),
},
);
Renders as follows:
The text was updated successfully, but these errors were encountered:
to solve the problem for your example: "u":Style( textDecorationColor: Colors.red, ),
This does not solve the problem, it is a workaround that does not fix the bug and does not fit most usecases : having an underline color that's different for standard texts and links. Take web for example : 99% of websites use a black/dark grey color for texts (even when underlined) whereas links are usually blue...
a1rwulf
added a commit
to a1rwulf/flutter_html
that referenced
this issue
Nov 23, 2024
We need to explicitly set the underline color to the same
blue as we set the text.
fixes: Sub6Resources#1414
We need to explicitly set the text decoration color.
There are actually two problems :
1. Short links: Link color is missing
When having short
<a>
links nested in<u>
underlined text, the underlining color for the link is the color of the<u>
underlining element, where it is expected to be the color of the<a>
, as it is the inner child.E.g.:
Renders as follows:
2. Long links: Link color is used for text after the text
When having
<a>
links that span multiple lines nested in<u>
underlined text, the link is now actually using its defined color as expected, but this time the underlining color for the text after the link is the color of the link rather than the<u>
underlining color. E.g.:Renders as follows:
The text was updated successfully, but these errors were encountered: