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

Support emoji ZWJ sequences #9652

Open
xster opened this Issue Apr 27, 2017 · 17 comments

Comments

@xster
Contributor

xster commented Apr 27, 2017

iOS texts can't render zero width joiner sequences like emoji skin/gender modifiers and region indicator sequences.

Extracted from #8775

@xster xster added this to the 3: Make conferences happy milestone Apr 27, 2017

@Hixie Hixie modified the milestones: 3: Current Milestone, 4: Next milestone Dec 6, 2017

@KevinTheGray

This comment has been minimized.

Show comment
Hide comment
@KevinTheGray

KevinTheGray Mar 13, 2018

Do we have an estimate on this? I'd like to build a feature that revolves around emojis and want to know what my options are here

KevinTheGray commented Mar 13, 2018

Do we have an estimate on this? I'd like to build a feature that revolves around emojis and want to know what my options are here

@xster

This comment has been minimized.

Show comment
Hide comment
@xster

xster Mar 13, 2018

Contributor

@jason-simmons might be able to answer. I assume this may be fixed with libtxt.

Contributor

xster commented Mar 13, 2018

@jason-simmons might be able to answer. I assume this may be fixed with libtxt.

@dvoiss

This comment has been minimized.

Show comment
Hide comment
@dvoiss

dvoiss Mar 14, 2018

@xster I'm in the same position as @KevinTheGray.

I've found Android to be okay, but iOS can't render anything.

Could you (or @jason-simmons) tell me more about libtxt and if that fixes it, how I can get it into my current build?

dvoiss commented Mar 14, 2018

@xster I'm in the same position as @KevinTheGray.

I've found Android to be okay, but iOS can't render anything.

Could you (or @jason-simmons) tell me more about libtxt and if that fixes it, how I can get it into my current build?

@KevinTheGray

This comment has been minimized.

Show comment
Hide comment
@KevinTheGray

KevinTheGray Mar 14, 2018

to also chime in with @dvoiss

I actually am seeing issues on Android. for example, on a Nexus 5x running android 7.0.1, a man with skin color emoji will render the man+square_skin_color, just like on iOS

KevinTheGray commented Mar 14, 2018

to also chime in with @dvoiss

I actually am seeing issues on Android. for example, on a Nexus 5x running android 7.0.1, a man with skin color emoji will render the man+square_skin_color, just like on iOS

@jason-simmons

This comment has been minimized.

Show comment
Hide comment
@jason-simmons

jason-simmons Mar 14, 2018

Contributor

libtxt is a new implementation of Flutter's text rendering engine. One of the goals of libtxt is offering better support for emoji.

libtxt is currently enabled on the master branch of Flutter. We may need to roll it back temporarily if problems arise, but our intent is to deploy it permanently soon.

Contributor

jason-simmons commented Mar 14, 2018

libtxt is a new implementation of Flutter's text rendering engine. One of the goals of libtxt is offering better support for emoji.

libtxt is currently enabled on the master branch of Flutter. We may need to roll it back temporarily if problems arise, but our intent is to deploy it permanently soon.

@dvoiss

This comment has been minimized.

Show comment
Hide comment
@dvoiss

dvoiss Mar 14, 2018

@jason-simmons Could you link me to anything relevant that I can use such as a PR or some such?

To echo @KevinTheGray there are issues on Android too. Sample code and a screenshot are below.

In the screenshot you can see how the following items render. As the screenshot shows, man + skin-color has issues, but oddly enough render okay when paired with a flag.

But when paired with a flag a new issue arises (I don't know if there's an issue logged for this) which is seen on the second line in the screenshot where the width of the Text widget is "five emojis" in length, presumably because it's measuring the width of all the code-points but then renders them combined correctly?

The red is so you can see the extra space on lines 2, 5, and 7.

screen

Code:

I've pasted a screenshot of how they look in the code because pasting the code itself into this comment doesn't work because github renders them correctly 😄

screen shot 2018-03-14 at 4 38 33 pm

Full code below. You can see the emoji render correctly when pasted here on github. Note that I use the emoji-one font below to resolve issues with emojis on different Android versions:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Emoji test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> emojiTestItems = [
    '👨🏻‍🎨🎨🎨',
    '👨🏻‍🎨🎨🇮🇹',
    '👨🏻‍🎨🎨',
    '👨🏻‍🎨',
    '👨🏻',
    '👨🏻🇮🇹',
    '🇮🇹'
  ];

  List<Widget> _getEmojiTestItems() {
    List<Widget> widgets = emojiTestItems.map((item) => new Container(
      child: new Text(item, style: new TextStyle(fontSize: 48.0, fontFamily: "Emoji One")),
      color: Colors.red)
    ).toList();

    widgets.add(new Center(child: new Container(
      child: new Text('👨🏻‍🎨🎨🇮🇹', textAlign: TextAlign.center, style: new TextStyle(fontSize: 48.0, fontFamily: "Emoji One")),
      color: Colors.red)
    ));

    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _getEmojiTestItems(),
        ),
      ),
    );
  }
}

dvoiss commented Mar 14, 2018

@jason-simmons Could you link me to anything relevant that I can use such as a PR or some such?

To echo @KevinTheGray there are issues on Android too. Sample code and a screenshot are below.

In the screenshot you can see how the following items render. As the screenshot shows, man + skin-color has issues, but oddly enough render okay when paired with a flag.

But when paired with a flag a new issue arises (I don't know if there's an issue logged for this) which is seen on the second line in the screenshot where the width of the Text widget is "five emojis" in length, presumably because it's measuring the width of all the code-points but then renders them combined correctly?

The red is so you can see the extra space on lines 2, 5, and 7.

screen

Code:

I've pasted a screenshot of how they look in the code because pasting the code itself into this comment doesn't work because github renders them correctly 😄

screen shot 2018-03-14 at 4 38 33 pm

Full code below. You can see the emoji render correctly when pasted here on github. Note that I use the emoji-one font below to resolve issues with emojis on different Android versions:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Emoji test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> emojiTestItems = [
    '👨🏻‍🎨🎨🎨',
    '👨🏻‍🎨🎨🇮🇹',
    '👨🏻‍🎨🎨',
    '👨🏻‍🎨',
    '👨🏻',
    '👨🏻🇮🇹',
    '🇮🇹'
  ];

  List<Widget> _getEmojiTestItems() {
    List<Widget> widgets = emojiTestItems.map((item) => new Container(
      child: new Text(item, style: new TextStyle(fontSize: 48.0, fontFamily: "Emoji One")),
      color: Colors.red)
    ).toList();

    widgets.add(new Center(child: new Container(
      child: new Text('👨🏻‍🎨🎨🇮🇹', textAlign: TextAlign.center, style: new TextStyle(fontSize: 48.0, fontFamily: "Emoji One")),
      color: Colors.red)
    ));

    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _getEmojiTestItems(),
        ),
      ),
    );
  }
}
@jason-simmons

This comment has been minimized.

Show comment
Hide comment
@jason-simmons

jason-simmons Mar 15, 2018

Contributor

We are currently in the middle of the transition from the original Blink-based text renderer to Libtxt (which is based on a text handling library used within Android).

Libtxt was enabled in the master branch of Flutter in this commit (which landed yesterday):
5a58b36

If you're building a custom engine then you can select the libtxt or Blink text renderer with the settings.using_blink flag:
https://github.com/flutter/engine/blob/master/shell/common/shell.cc#L123

The Blink-based engine is considered deprecated. After Libtxt is fully landed we can look at improving its emoji support.

Contributor

jason-simmons commented Mar 15, 2018

We are currently in the middle of the transition from the original Blink-based text renderer to Libtxt (which is based on a text handling library used within Android).

Libtxt was enabled in the master branch of Flutter in this commit (which landed yesterday):
5a58b36

If you're building a custom engine then you can select the libtxt or Blink text renderer with the settings.using_blink flag:
https://github.com/flutter/engine/blob/master/shell/common/shell.cc#L123

The Blink-based engine is considered deprecated. After Libtxt is fully landed we can look at improving its emoji support.

@dvoiss

This comment has been minimized.

Show comment
Hide comment
@dvoiss

dvoiss Mar 16, 2018

@jason-simmons Thanks for the info.

I updated my local Flutter to the latest.

But is there any way to test libtxt without the whole rigamarole of building the engine and debugging whatever build errors will inevitably crop up?

Something like flutter run --enable-blink false?

dvoiss commented Mar 16, 2018

@jason-simmons Thanks for the info.

I updated my local Flutter to the latest.

But is there any way to test libtxt without the whole rigamarole of building the engine and debugging whatever build errors will inevitably crop up?

Something like flutter run --enable-blink false?

@jason-simmons

This comment has been minimized.

Show comment
Hide comment
@jason-simmons

jason-simmons Mar 16, 2018

Contributor

If you switch to the master branch of the Flutter framework today you'll get an engine that uses Libtxt.

We don't have a way to switch between Libtxt and Blink in the Flutter tools. The goal is to remove Blink from the engine soon.

Contributor

jason-simmons commented Mar 16, 2018

If you switch to the master branch of the Flutter framework today you'll get an engine that uses Libtxt.

We don't have a way to switch between Libtxt and Blink in the Flutter tools. The goal is to remove Blink from the engine soon.

@dvoiss

This comment has been minimized.

Show comment
Hide comment
@dvoiss

dvoiss Mar 16, 2018

If you switch to the master branch of the Flutter framework today you'll get an engine that uses Libtxt.

Interesting, so since I still see issues then things weren't just magically fixed like I was hoping 🤣

I figured it wasn't enabled by default because I saw this and thought using blink was defaulted to true: https://github.com/flutter/engine/blob/master/common/settings.h#L28.

dvoiss commented Mar 16, 2018

If you switch to the master branch of the Flutter framework today you'll get an engine that uses Libtxt.

Interesting, so since I still see issues then things weren't just magically fixed like I was hoping 🤣

I figured it wasn't enabled by default because I saw this and thought using blink was defaulted to true: https://github.com/flutter/engine/blob/master/common/settings.h#L28.

@jonasbark

This comment has been minimized.

Show comment
Hide comment
@jonasbark

jonasbark May 29, 2018

I know that's a very unpopular question but I have to ask it:
Is there a solution in sight for supporting emoji sequences on iOS devices?

It's currently a high priority blocker for launching an app to a wide audience in Germany.

jonasbark commented May 29, 2018

I know that's a very unpopular question but I have to ask it:
Is there a solution in sight for supporting emoji sequences on iOS devices?

It's currently a high priority blocker for launching an app to a wide audience in Germany.

@rlee1990

This comment has been minimized.

Show comment
Hide comment
@rlee1990

rlee1990 Aug 17, 2018

Any fix yet?

rlee1990 commented Aug 17, 2018

Any fix yet?

@jonasbark

This comment has been minimized.

Show comment
Hide comment
@jonasbark

jonasbark Aug 17, 2018

Unfortunately no. I had some hopes when #20303 landed but no dice.
@xster any chance of prioritizing this alongside the Cupertino widget support efforts?

jonasbark commented Aug 17, 2018

Unfortunately no. I had some hopes when #20303 landed but no dice.
@xster any chance of prioritizing this alongside the Cupertino widget support efforts?

@lukepighetti

This comment has been minimized.

Show comment
Hide comment
@lukepighetti

lukepighetti Aug 17, 2018

@xster Any chance we can get a timeline for this? Preferably separate from Cuptertino widgets? I'm devving in material for now.

lukepighetti commented Aug 17, 2018

@xster Any chance we can get a timeline for this? Preferably separate from Cuptertino widgets? I'm devving in material for now.

@dvoiss

This comment has been minimized.

Show comment
Hide comment
@dvoiss

dvoiss Sep 14, 2018

Any updates on this? I just thought of this again after seeing this talk on "Building the Android Summit App" with Flutter.

Specifically the builders of the app mention this bug (or a related one to emoji sequences) here (link to time-stamp): https://youtu.be/xENT8qPIazY?list=PLzJZrgVJE8BbctT8_LBqUUHDzFTjKsEkU&t=1464

dvoiss commented Sep 14, 2018

Any updates on this? I just thought of this again after seeing this talk on "Building the Android Summit App" with Flutter.

Specifically the builders of the app mention this bug (or a related one to emoji sequences) here (link to time-stamp): https://youtu.be/xENT8qPIazY?list=PLzJZrgVJE8BbctT8_LBqUUHDzFTjKsEkU&t=1464

@adriancmurray

This comment has been minimized.

Show comment
Hide comment
@adriancmurray

adriancmurray Oct 19, 2018

Are there any updates? I'd love for this to get patched up.

adriancmurray commented Oct 19, 2018

Are there any updates? I'd love for this to get patched up.

@zoechi

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Oct 19, 2018

Contributor

I guess it is blocked on dart-lang/sdk#28404

Contributor

zoechi commented Oct 19, 2018

I guess it is blocked on dart-lang/sdk#28404

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment