Emoji Keycap Sequence not supported on iOS #36062

fredriks · 2019-07-12T11:57:13Z

The Emoji Sequence Data for UTS #51 has a section for Keycap sequence which specifies emoji alternatives for #, *, 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. These are available on the iOS keyboard.

They are all rendered properly as emojis on Android but not on iOS. Instead displaying the leading symbol followed by a box artifact (see screenshots).

Android

iOS

Sample code

import 'package:flutter/material.dart';

const _emojiKeycapSequence = [
  '\u0023\ufe0f\u20e3', // keycap: #
  '\u002a\ufe0f\u20e3', // keycap: *
  '\u0030\ufe0f\u20e3', // keycap: 0
  '\u0031\ufe0f\u20e3', // keycap: 1
  '\u0032\ufe0f\u20e3', // keycap: 2
  '\u0033\ufe0f\u20e3', // keycap: 3
  '\u0034\ufe0f\u20e3', // keycap: 4
  '\u0035\ufe0f\u20e3', // keycap: 5
  '\u0036\ufe0f\u20e3', // keycap: 6
  '\u0037\ufe0f\u20e3', // keycap: 7
  '\u0038\ufe0f\u20e3', // keycap: 8
  '\u0039\ufe0f\u20e3', // keycap: 9
];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          body: Center(
            child: Text(
              _emojiKeycapSequence.join(' '),
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      );
}

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.5 18F132, locale en-SE)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
[✓] iOS tools - develop for iOS devices
[✓] Android Studio (version 3.4)
[✓] Connected device (2 available)

• No issues found!

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

fredriks · 2019-07-19T11:01:06Z

In the mean time, a possible workaround is to simply remove the box artifacts by stripping the variation selector \ufe0f and enclosing keycap \u20e3 which just leaves the leading character: #, *, 0-9.

final keycapRegex =
    RegExp(r'((\u0023|\u002a|[\u0030-\u0039])\ufe0f\u20e3){1}');
var result = 'String with possible keycap emojis'
    .replaceAllMapped(keycapRegex, (match) => match[2]);

markusaksli-nc · 2020-08-06T13:05:44Z

Reproducible on the latest master 1.21.0-6.0.pre.226.

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.226, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.226 at /Users/markus/development/flutter_master
    • Framework revision fa60f525f0 (64 minutes ago), 2020-08-06 08:01:03 -0400
    • Engine revision 36db6cfdd1
    • Dart version 2.10.0 (build 2.10.0-3.0.dev 14a6aac97b)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/markus/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (4 available)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

ThomasLilley · 2022-02-22T15:54:01Z

Any progress on this? we are still experiencing this on Flutter stable 2.8.1 on iOS devices

jsmestad · 2022-03-01T23:27:18Z

I hit this today myself. While looking, I also noticed that pilot, male-pilot and woman-pilot fail to render as well.

jsmestad · 2022-03-01T23:40:35Z

@fredriks this workaround fixed it for me: #49627 (comment)

danagbemava-nc · 2022-12-09T12:43:46Z

Reproduces on the latest versions of flutter

updated sample

import 'package:flutter/material.dart';

const _emojiKeycapSequence = [
  '\u0023\ufe0f\u20e3', // keycap: #
  '\u002a\ufe0f\u20e3', // keycap: *
  '\u0030\ufe0f\u20e3', // keycap: 0
  '\u0031\ufe0f\u20e3', // keycap: 1
  '\u0032\ufe0f\u20e3', // keycap: 2
  '\u0033\ufe0f\u20e3', // keycap: 3
  '\u0034\ufe0f\u20e3', // keycap: 4
  '\u0035\ufe0f\u20e3', // keycap: 5
  '\u0036\ufe0f\u20e3', // keycap: 6
  '\u0037\ufe0f\u20e3', // keycap: 7
  '\u0038\ufe0f\u20e3', // keycap: 8
  '\u0039\ufe0f\u20e3', // keycap: 9
];

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          body: Center(
            child: Text(
              _emojiKeycapSequence.join(' '),
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ),
      );
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
    • Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (2 weeks ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, 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 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] 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)

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

[✓] Connected device (4 available)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.2 20B110
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.98

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[!] Flutter (Channel master, 3.7.0-4.0.pre.48, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0-4.0.pre.48 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eefbe85c8b (8 hours ago), 2022-12-08 22:32:07 -0600
    • Engine revision 8d83b98c55
    • Dart version 3.0.0 (build 3.0.0-0.0.dev)
    • DevTools version 2.20.0
    • 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 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, 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 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] 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)

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

[✓] Connected device (4 available)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.2 20B110
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.98

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

xiaoxiaowesley · 2023-03-20T17:21:20Z

I am trying to fix this issue by modifying the skia code in this issue google/skia#129 . This may take some time and discussion for that PR.
But as far as I tracked currently. Some other emoji color or render-related issues maybe can fix.

import 'package:flutter/material.dart';

void main() {
  runApp( TextApp());
}

class TextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // theme: ThemeData.of(context),
      home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Text('你'),
                Text('😀你好'),
                Text('1️⃣'), 
                Text('\u0030\ufe0f\u20e3'),  //1️⃣
                Text('1️⃣全新未开封41.89包邮非偏远！盒控勿扰！！！（偶尔有轻微压盒或褶皱磕碰及塑封微损，保证原2️⃣几乎全新仅开封34.89包邮非偏远！（仅开封，95新～全新随机发货）')
              ],
            ),
          )),
    );
  }
}

comparison：

iPhone11 ,iOS 16.3.1

fixed	unfix

xiaoxiaowesley · 2023-03-30T07:25:44Z

I am trying to fix this issue by modifying the skia code in this issue google/skia#129 . This may take some time and discussion for that PR. But as far as I tracked currently. Some other emoji color or render-related issues maybe can fix.

import 'package:flutter/material.dart';

void main() {
  runApp( TextApp());
}

class TextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // theme: ThemeData.of(context),
      home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Text('你'),
                Text('😀你好'),
                Text('1️⃣'), 
                Text('\u0030\ufe0f\u20e3'),  //1️⃣
                Text('1️⃣全新未开封41.89包邮非偏远！盒控勿扰！！！（偶尔有轻微压盒或褶皱磕碰及塑封微损，保证原2️⃣几乎全新仅开封34.89包邮非偏远！（仅开封，95新～全新随机发货）')
              ],
            ),
          )),
    );
  }
}

comparison：

iPhone11 ,iOS 16.3.1

fixed unfix

It's been a week since submitting the pr. Could you help communicate with Google colleagues about the progress? If there is a need to modify something, I am happy to modify it !! 😃 @chinmaygarde

gnprice · 2023-03-31T01:42:04Z

It's been a week since submitting the pr.

@xiaoxiaowesley I have no inside knowledge, but a couple of suggestions that may be helpful:

The review thread (linked from a bot comment on your GitHub PR) is at https://skia-review.googlesource.com/c/skia/+/658816 . You should be able to log in with any Google account; at least it worked for me just now. I think after a week with no response, it'd be perfectly reasonable to post a comment there asking if there's any other information you can provide that would help in reviewing it. (Which will also serve as a reminder to the reviewer that your proposed change exists.)
It looks like the PR template had a line saying:

Please submit a code sample via fiddle.skia.org showing the issue.

You provided a demo in Flutter, which works great here in the Flutter tracker but may be less helpful for people who work on Skia and don't regularly use Flutter. If you can work out how to demonstrate the issue in pure Skia terms without Flutter, and ideally on that fiddle.skia.org site, then that may make it easier for someone on the Skia team to review.
A variation on the last point: it looks like your proposed change doesn't contain a test. I don't know whether the Skia project takes as hard a line as the Flutter project (rightly) does about every change having tests; but even if they don't, a test would probably be helpful in making reviewers more confident about your change.

xiaoxiaowesley · 2023-03-31T13:43:37Z

It's been a week since submitting the pr.

@xiaoxiaowesley I have no inside knowledge, but a couple of suggestions that may be helpful:

The review thread (linked from a bot comment on your GitHub PR) is at https://skia-review.googlesource.com/c/skia/+/658816 . You should be able to log in with any Google account; at least it worked for me just now. I think after a week with no response, it'd be perfectly reasonable to post a comment there asking if there's any other information you can provide that would help in reviewing it. (Which will also serve as a reminder to the reviewer that your proposed change exists.)

It looks like the PR template had a line saying:

Please submit a code sample via fiddle.skia.org showing the issue.

You provided a demo in Flutter, which works great here in the Flutter tracker but may be less helpful for people who work on Skia and don't regularly use Flutter. If you can work out how to demonstrate the issue in pure Skia terms without Flutter, and ideally on that fiddle.skia.org site, then that may make it easier for someone on the Skia team to review.

A variation on the last point: it looks like your proposed change doesn't contain a test. I don't know whether the Skia project takes as hard a line as the Flutter project (rightly) does about every change having tests; but even if they don't, a test would probably be helpful in making reviewers more confident about your change.

Thank you so much for your reply and advice! This works for me. I'm going to do something to push this forward as you said.

jiangkang · 2023-11-21T11:31:33Z

has any update？

junixapp · 2024-05-17T08:32:31Z

same issue with flutter 3.7.10

Jayxiang · 2024-05-21T03:15:18Z

TextStyle(fontFamilyFallback: Platform.isIOS ? ['Apple Color Emoji'] : null,)
It works for me.

junixapp · 2024-06-27T14:20:07Z

same issue with flutter 3.22.0

BondarenkoStas added a: typography Text rendering, possibly libtxt platform-ios iOS applications specifically labels Sep 29, 2019

VladyslavBondarenko added the framework flutter/packages/flutter repository. See also f: labels. label Jan 14, 2020

markusaksli-nc added found in release: 1.21 Found to occur in 1.21 has reproducible steps The issue has been confirmed reproducible and is ready to work on labels Aug 6, 2020

red282 mentioned this issue Apr 22, 2022

Numeric emoji symbols (0️⃣,1️⃣,..) displaying incorrectly on iOS #67723

Closed

danagbemava-nc added found in release: 3.3 Found to occur in 3.3 found in release: 3.7 Found to occur in 3.7 and removed found in release: 1.21 Found to occur in 1.21 labels Dec 9, 2022

goderbauer added engine flutter/engine repository. See also e: labels. and removed framework flutter/packages/flutter repository. See also f: labels. labels Jan 24, 2023

chinmaygarde added the P2 Important issues not at the top of the work list label Jan 30, 2023

This was referenced Mar 1, 2023

Render some emoji errror in different ios version #121680

Closed

Some Emoji not displaying on iOS #54071

Closed

darshankawar mentioned this issue Mar 3, 2023

Emoji Keycap Sequence displays incorrectly in TextField on iOS #121861

Closed

luckysmg added the customer: alibaba label Mar 29, 2023

huycozy mentioned this issue Apr 13, 2023

emoji display exception on ios 16.2 #124683

Closed

2 tasks

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

stact mentioned this issue Nov 12, 2023

[Feature] Filter out emojis that cannot be displayed on iOS Fintasys/emoji_picker_flutter#165

Closed

danagbemava-nc mentioned this issue Jan 4, 2024

On iOS, number emojis show up as unknown characters and cause following emoji to show as unknown characters as well #140896

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Emoji Keycap Sequence not supported on iOS #36062

Emoji Keycap Sequence not supported on iOS #36062

fredriks commented Jul 12, 2019

fredriks commented Jul 19, 2019 •

edited

Loading

markusaksli-nc commented Aug 6, 2020

ThomasLilley commented Feb 22, 2022

jsmestad commented Mar 1, 2022 •

edited

Loading

jsmestad commented Mar 1, 2022

danagbemava-nc commented Dec 9, 2022

xiaoxiaowesley commented Mar 20, 2023 •

edited

Loading

xiaoxiaowesley commented Mar 30, 2023

gnprice commented Mar 31, 2023

xiaoxiaowesley commented Mar 31, 2023 •

edited

Loading

jiangkang commented Nov 21, 2023

junixapp commented May 17, 2024

Jayxiang commented May 21, 2024

junixapp commented Jun 27, 2024

Emoji Keycap Sequence not supported on iOS #36062

Emoji Keycap Sequence not supported on iOS #36062

Comments

fredriks commented Jul 12, 2019

Android

iOS

Sample code

flutter doctor

fredriks commented Jul 19, 2019 • edited Loading

markusaksli-nc commented Aug 6, 2020

ThomasLilley commented Feb 22, 2022

jsmestad commented Mar 1, 2022 • edited Loading

jsmestad commented Mar 1, 2022

danagbemava-nc commented Dec 9, 2022

xiaoxiaowesley commented Mar 20, 2023 • edited Loading

xiaoxiaowesley commented Mar 30, 2023

gnprice commented Mar 31, 2023

xiaoxiaowesley commented Mar 31, 2023 • edited Loading

jiangkang commented Nov 21, 2023

junixapp commented May 17, 2024

Jayxiang commented May 21, 2024

junixapp commented Jun 27, 2024

fredriks commented Jul 19, 2019 •

edited

Loading

jsmestad commented Mar 1, 2022 •

edited

Loading

xiaoxiaowesley commented Mar 20, 2023 •

edited

Loading

xiaoxiaowesley commented Mar 31, 2023 •

edited

Loading