Skip to content

[web] Text with emojis or Chinese characters is clipped #40221

@deckerst

Description

@deckerst

Text rendering with the enableExperimentalCanvasImplementation flag fixes some issues (such as #36043), but line height computation is incorrect when the text includes emojis.

Example:

  TextMeasurementService.enableExperimentalCanvasImplementation = true;
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 120,
              color: Colors.grey,
              child: Text('this is a text that contains emojis 🎉 so the line 🐱‍👤 height 🍱 computation is broken and the text gets clipped'),
            ),
            SizedBox(width: 4),
            Container(
              width: 120,
              color: Colors.grey,
              child: Text('this is a text that contains no emoji so the line height computation is fine'),
            ),
          ],
        ),
      ),
    ),
  );

flutter-web-with-flag

I see the issue with:

  • Safari on Mac
  • Chrome on Mac & Windows
  • Firefox on Windows

Curiously, there's no issue with Firefox on Mac.

flutter_web (forked) version: commit 3973ac (Sep 7)
Mac OS X 10.14.5 18F132, locale en-KR
Microsoft Windows [Version 10.0.18362.329], locale en-GB

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: typographyText rendering, possibly libtxtc: renderingUI glitches reported at the engine/skia or impeller rendering leveldependency: skiaSkia team may need to help use: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.20Found to occur in 1.20has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions