[Impeller] Unable to change color of a bitmap font. #126546

admincode1 · 2023-05-11T13:52:41Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Unable to change custom font color since I upgraded to Flutter (Channel stable, 3.10.0).

Expected results

final font1 = Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 22,
fontFamily: 'myFont',
height: 1.9,
color: Colors.blue, <<-- Here, the color either white or black in dark mode.
);

Actual results

Or

Code sample

TextStyle(
fontSize: 22,
fontFamily: 'myFont',
height: 1.9,
color: Colors.blue, <<-- Same result.
);

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E772610a darwin-x64, locale en-US)
• Flutter version 3.10.0 on channel stable at /Users/Adam/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 84a1e90 (2 days ago), 2023-05-09 07:41:44 -0700
• Engine revision d44b5a94c9
• Dart version 3.0.0
• DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/Adam/Library/Android/sdk
• Platform android-32, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.

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

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
• 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.15+0-b2043.56-8887301)

[✓] VS Code (version 1.75.1)
• VS Code at /Users/Adam/Desktop/Visual Studio Code.app/Contents
• Flutter extension version 3.58.0

[✓] Connected device (3 available)
• Adam’s iPhone (mobile) • 00008030-00********2B802E • ios • iOS 16.4.1 20E252
• macOS (desktop) • macos • darwin-x64 • macOS 13.3.1 22E772610a darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
• All expected network resources are available.

• No issues found!

The text was updated successfully, but these errors were encountered:

huycozy · 2023-05-12T06:21:36Z

@admincode1 I check this with Montserrat font but it displays as expected as below:

Can you provide a completed and minimal reproducible code sample so that we may verify this?

admincode1 · 2023-05-13T10:27:25Z

@admincode1 I check this with Montserrat font but it displays as expected as below:

Can you provide a completed and minimal reproducible code sample so that we may verify this?

The problem only presents on iOS, Arabic texts only (Dart version 3.0.0, all channels).
Tested on Android (Channel stable 3.10.0) and iOS (Dart version < 3.0.0) & It's working fine.

huycozy · 2023-05-15T05:04:04Z

I check this on both latest stable and master channels but can not reproduce this issue, the text is rendered color correctly with Arabic as well.

Demo

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (35 hours ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.63, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-6.0.pre.63 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7b8f7a2a64 (5 hours ago), 2023-05-14 17:42:29 -0400
    • Engine revision 326de1d849
    • Dart version 3.1.0 (build 3.1.0-110.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Can you share the font you are using?

admincode1 · 2023-05-15T05:44:39Z

It's working with some fonts but not all.
Tested with digitalkhatt2
I was using it in the past year or so with no issue (sdk: <3.0.0), but I only see the issue in sdk: >=3.0.0 all channels (iOS only).

huycozy · 2023-05-16T04:14:12Z

Thanks, this seems to be related to Impeller since I can see it works if disabling Impeller (--no-enable-impeller)

Demo

enable Impeller	disable Impeller

Sample code

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
			backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'Hello - سشيسشييشيشسيشسيسش',
          style: TextStyle(
            fontSize: 22,
            fontFamily: 'digitalkhatt',
            height: 1.9,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

Affected custom font: digitalkhatt2.otf.zip

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (35 hours ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.85, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-6.0.pre.85 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2919572fb3 (71 minutes ago), 2023-05-15 19:01:28 -0700
    • Engine revision c4d4b40c65
    • Dart version 3.1.0 (build 3.1.0-113.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

admincode1 · 2023-05-16T13:52:04Z

Thanks, this seems to be related to Impeller since I can see it works if disabling Impeller (--no-enable-impeller)

Demo
Sample code
Affected custom font: digitalkhatt2.otf.zip

flutter doctor -v (stable and master)

It seems to be working after updating info.plist with FLTEnableImpeller key to false, but my only concern that it'll affect the performance. So far I didn't notice any performance issue but I didn't test it very well yet..
Thanks @huycozy

jason-simmons · 2023-05-18T02:10:20Z

Impeller is treating this font as a color bitmap font on iOS because it contains a COLR table.

On iOS, SkTypeface_Mac calls CTFontGetSymbolicTraits, sees the kCTFontColorGlyphsTrait flag because of the COLR table, and sets the fHasColorGlyphs flag.

Impeller's DrawGlyph then creates the atlas bitmap by calling SkCanvas::drawGlyphs using a default color of SK_ColorWHITE. TextContents then used the glyph atlas color pipeline because this font is marked as GlyphAtlas::Type::kColorBitmap. That pipeline does not apply the text foreground color because it thinks the glyph is a bitmap that is already colored.

Skia and CoreText can render this glyph with the intended color if Impeller sets the text color in the SkPaint used by DrawGlyph. But that would require Impeller to maintain a different atlas for each text color.

@chinmaygarde @jonahwilliams

chinmaygarde · 2023-05-26T21:28:38Z

A fix was discussed in the weekly sync. The glyph cache key will also store an additional color for all glyphs.

SkylineGT1 · 2024-04-19T22:24:19Z

Any update on this?

mny459 · 2024-05-14T00:42:41Z

Any Update on This？This bug will really stop me to use impeller

jonahwilliams · 2024-05-16T07:17:58Z

Soon

Fixes flutter/flutter#126546 Track the paint color used by Bitmap/Emoji/COLR fonts and use it as a cache key. This allows non-COLR glyphs in a COLR font to get the correct text color. For other kinds of fonts, we always record the color as black so there are no cache efficiency hits in general.

github-actions · 2024-06-03T04:00:40Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

huycozy added the in triage Presently being triaged by the triage team label May 12, 2023

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 12, 2023

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 13, 2023

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 15, 2023

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 15, 2023

huycozy changed the title ~~Changing custom font color.~~ [Impeller] Unable to change custom font color May 16, 2023

chinmaygarde added the P2 Important issues not at the top of the work list label May 22, 2023

jason-simmons mentioned this issue Jun 6, 2023

[Impeller] textColor is not applied for certain fonts #128162

Closed

2 tasks

chinmaygarde changed the title ~~[Impeller] Unable to change custom font color~~ [Impeller] Unable to change color of a bitmap font. Jun 27, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team labels Jul 8, 2023

chinmaygarde removed triaged-ios Triaged by iOS platform team team-ios Owned by iOS platform team labels Jul 24, 2023

chinmaygarde added triaged-engine Triaged by Engine team team-engine Owned by Engine team labels Jul 24, 2023

chinmaygarde mentioned this issue Oct 2, 2023

Pixeloid font family does not change colors on iOS using ttf #135496

Open

2 tasks

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

chinmaygarde added the slimpeller Engine binary size reduction. go/slimpeller label May 15, 2024

jonahwilliams mentioned this issue May 16, 2024

[Impeller] fix colr/bitmap font color drawing. flutter/engine#52871

Merged

auto-submit bot closed this as completed in flutter/engine#52871 May 17, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 20, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jun 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Impeller] Unable to change color of a bitmap font. #126546

[Impeller] Unable to change color of a bitmap font. #126546

admincode1 commented May 11, 2023

huycozy commented May 12, 2023

admincode1 commented May 13, 2023

huycozy commented May 15, 2023

admincode1 commented May 15, 2023 •

edited

huycozy commented May 16, 2023

admincode1 commented May 16, 2023 •

edited

jason-simmons commented May 18, 2023

chinmaygarde commented May 26, 2023

SkylineGT1 commented Apr 19, 2024

mny459 commented May 14, 2024

jonahwilliams commented May 16, 2024

github-actions bot commented Jun 3, 2024

[Impeller] Unable to change color of a bitmap font. #126546

[Impeller] Unable to change color of a bitmap font. #126546

Comments

admincode1 commented May 11, 2023

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented May 12, 2023

admincode1 commented May 13, 2023

huycozy commented May 15, 2023

admincode1 commented May 15, 2023 • edited

huycozy commented May 16, 2023

admincode1 commented May 16, 2023 • edited

jason-simmons commented May 18, 2023

chinmaygarde commented May 26, 2023

SkylineGT1 commented Apr 19, 2024

mny459 commented May 14, 2024

jonahwilliams commented May 16, 2024

github-actions bot commented Jun 3, 2024

admincode1 commented May 15, 2023 •

edited

admincode1 commented May 16, 2023 •

edited