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

Fabric Text renders emojis in monochrome #11764

Closed
Tracked by #119
chrisglein opened this issue Jun 14, 2023 · 2 comments · Fixed by #11906
Closed
Tracked by #119

Fabric Text renders emojis in monochrome #11764

chrisglein opened this issue Jun 14, 2023 · 2 comments · Fixed by #11906
Assignees
Labels
Area: Fabric Support Facebook Fabric Area: Text bug New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric
Milestone

Comments

@chrisglein
Copy link
Member

Problem Description

Emojis render in Fabric's Text, but without any color:

image

Steps To Reproduce

<Text>👍</Text>

Or for an interactive app that hits this all the time:
chrisglein/artificial-chat#119

Expected Results

image

CLI version

12.0.0-alpha.3

Environment

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.25880
  CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Memory: 43.87 GB / 63.85 GB
Binaries:
  Node:
    version: 18.15.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33530.505 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0-nightly-20230601-d9b3339ef
    wanted: 0.73.0-nightly-20230601-d9b3339ef
  react-native-windows:
    installed: 0.0.0-canary.665
    wanted: 0.0.0-canary.665
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

No response

Visual Studio Version

Visual Studio 2022

Build Configuration

None

Snack, code example, screenshot, or link to a repository

chrisglein/artificial-chat#119

@chrisglein chrisglein added bug Area: Text Area: Fabric Support Facebook Fabric labels Jun 14, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Jun 14, 2023
@chrisglein chrisglein removed the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Jun 15, 2023
@chrisglein
Copy link
Member Author

chrisglein commented Jun 15, 2023

Probably a one line fix setting some rich edit option... just don't know what that is.

Maybe relevant? this

@chrisglein chrisglein added this to the 0.73 milestone Jun 15, 2023
@acoates-ms
Copy link
Contributor

For windowless controls, color fonts aren’t enabled by default. To enable them, send the message EM_SETTYPOGRAPHYOPTIONS with wparam = lparam = TO_DEFAULTCOLOREMOJI | TO_DISPLAYFONTCOLOR, where TO_DEFAULTCOLOREMOJI = 0x1000 and TO_DISPLAYFONTCOLOR = 0x2000. In a windowless control, you can do this by calling

ITextServices::TxSendMessage(EM_SETTYPOGRAPHYOPTIONS,
TO_DEFAULTCOLOREMOJI | TO_DISPLAYFONTCOLOR,
TO_DEFAULTCOLOREMOJI | TO_DISPLAYFONTCOLOR, nullptr);

Source: https://devblogs.microsoft.com/math-in-office/richeditd2d-window-controls/

@jonthysell jonthysell added the New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric label Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Fabric Support Facebook Fabric Area: Text bug New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

4 participants