Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] <a> links and <u> underlined texts do not set the correct colors when nested #1414

Open
orevial opened this issue Feb 27, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@orevial
Copy link

orevial commented Feb 27, 2024

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.:

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:

Capture d’écran 2024-02-27 à 12 42 29

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:

Capture d’écran 2024-02-27 à 12 38 32

@orevial orevial added the bug Something isn't working label Feb 27, 2024
@RayChow19
Copy link

RayChow19 commented Feb 27, 2024

to solve the problem for your example:
"u":Style(
textDecorationColor: Colors.red,
),

@orevial
Copy link
Author

orevial commented Feb 27, 2024

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants