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

Text Underline Color Issue #1172

Open
chenjiangmin126 opened this issue Jan 24, 2024 · 4 comments
Open

Text Underline Color Issue #1172

chenjiangmin126 opened this issue Jan 24, 2024 · 4 comments
Assignees
Labels
enhancement New feature or request

Comments

@chenjiangmin126
Copy link

I have encountered a minor issue while using your plugin. I noticed that when I try to change the color of underlined text, the color of the underline does not change accordingly. I expected the underline color to match the color I set for the text, but it appears that the underline remains black regardless.

HTML
  <p><span style="color:rgb(206,147,216)">1231231232342345345345345345345345423523452345234523453245</span>
    <br />
    <br />
    <strong style="color:rgb(213,0,249)"><u>32452345</u></strong>
    <br />
    <br />
    <span style="color:rgb(233,30,99);background-color:rgb(255,183,77)">123123123</span>
    <br />
    <br />
  </p>
`HtmlWidget` configuration

  @override
  Widget build(BuildContext context) {
    return HtmlWidget(
      text,
      enableCaching: false,
      onTapUrl: onTapUrl,
      onTapImage: onTapImage,
      customStylesBuilder: (element) {
        if (element.localName == "a") {
          return {
            "color": "#588AFB",
            "text-decoration": "none",
          };
        }
        return null;
      },
      customWidgetBuilder: (element) {
        if (element.localName == "img") {
          String url = element.attributes["src"] ?? "";
          return ImageNetworkWidget(
            url,
            width: double.infinity,
            onTap: () => RouterUtils.openPhotoViewDialog(images: [url], showOriginal: true),
          );
        }
        return null;
      },
    );
  }

Tesing environment

[✓] Flutter (Channel stable, 3.16.3, on macOS 14.2.1 23C71 darwin-arm64, locale zh-Hans-CN)
• Flutter version 3.16.3 on channel stable at /Users/chenjiangmin/fvm/versions/3.16.3
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b0366e0a3f (7 周前), 2023-12-05 19:46:39 -0800
• Engine revision 54a7145303
• Dart version 3.2.3
• DevTools version 2.28.4
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/chenjiangmin/Library/Android/sdk
• Platform android-34, build-tools 33.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.12.1

[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.4)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.85.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.80.0

[✓] Connected device (2 available)
• 陈江民 (mobile) • 00008101-001221C03452001E • ios • iOS 16.6 20G75
• iPhone 15 Pro Max (mobile) • 6051563E-8CD4-466D-8EF9-8BC07DDD04D9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)

Expected results

image

Actual results

image
@chenjiangmin126 chenjiangmin126 added the bug Something isn't working label Jan 24, 2024
@And96
Copy link

And96 commented Feb 16, 2024

There is another property for change the line.

I dont have the code with me, I'm on mobile actually, but check others property, you'll find it.

It's not a bug

@daohoangson
Copy link
Owner

Have you tried using text-decoration-color?

@daohoangson daohoangson self-assigned this Feb 17, 2024
@daohoangson daohoangson added question Further information is requested and removed bug Something isn't working labels Feb 17, 2024
@chenjiangmin126
Copy link
Author

Have you tried using ?text-decoration-color

When I added the text-decoration-color attribute, it was indeed displayed correctly according to the value of this attribute. However, my understanding is that the underline color of thetag in HTML should inherit the color of the text

@daohoangson daohoangson added enhancement New feature or request and removed question Further information is requested labels Feb 18, 2024
@daohoangson
Copy link
Owner

That's true. Let me check whether this can be improved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants