Skip to content

RTL text rendering glitch on web #69396

@ialhashim

Description

@ialhashim

When hovering over an interactive element (e.g. a regular FlatButton), the text is drawn incorrectly as seen here (GIF):

ezgif-7-ec426dbce091

Digging a bit more into it, it seems that when displaying the element as a flt-dom-canvas everything looks good but when its turned into a canvas element flt-canvas and checking the CanvasRenderingContext2D.direction it seems it is set to ltr even though the theme of the app is rtl. So bottom line, this optimization seems to be broken for RTL.

Testing with FLUTTER_WEB_USE_SKIA behaves correctly but it introduces many other different unrelated issues.

Flutter 1.23.0-18.1.pre
Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (2 weeks ago) • 2020-10-15 12:04:33 -0700      
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: internationalizationSupporting other languages or locales. (aka i18n)a: typographyText rendering, possibly libtxtc: regressionIt was better in the past than it is nowe: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.24Found to occur in 1.24has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions