Selection of any justified-text is inaccurate in non-latin languages #39755

OsamaAbbas · 2019-09-03T16:42:40Z

I hope I can clarify this issue because it is a little weird. It took me a while to figure out when exactly does it occur.

Here is a very primitive application:

// main.dart
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: Padding(
      padding: const EdgeInsets.all(18.0),
      child: TextField(
        textAlign: TextAlign.justify,
        maxLines: null,
      ),
    ),
  ),
));

Now, type any latin charachter text. Try to select any single or multiple words, you will find that the selection blue highlight matches accurately the boundaries of the word(s). See this screen shot:

Then, put some Korean text. You will find that some words are poorly highlighted:

한국어(韓國語)는 대한민국과 조선민주주의인민공화국의 공용어로, 대한민국에서는 한국어 또는 한국말이라고 부르고, 조선민주주의인민공화국에서는 조선말이라고 부른다.

Also in Arabic texts (it does not matter here that the textDirection is not RTL. Both RTL and LTR have the same issue):

العربية لغة رسمية في كل دول الوطن العربي إضافة إلى كونها لغة رسمية في تشاد وإريتريا وإسرائيل. وهي إحدى اللغات الرسمية الست في منظمة الأمم المتحدة، ويُحتفل باليوم العالمي للغة العربية في 18 ديسمبر كذكرى اعتماد العربية بين لغات العمل في الأمم المتحدة.

Same in Hebrew:

עִבְרִית היא שפה שמית, ממשפחת השפות האפרו-אסיאתיות, הידועה כשפתם של היהודים ושל השומרונים, אשר ניב מודרני שלה (עברית ישראלית) הוא שפתה הרשמית של מדינת ישראל, מעמד שעוגן בשנת 2018 בחוק יסוד: ישראל – מדינת הלאום של העם היהודי.

Just copy these texts and paste them in the input field, then try to select one word. In all cases above I just long tapped on one word and the highlight missed the word boundry as shown.

It does have to be a text field or input though. Any justified selectable text would reproduce the same behavior. I tried in both stable and master channels.

Here is my flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.9.8-pre.54, on Linux, locale en_US.UTF-8)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.37.1)
[✓] Connected device (1 available)

• No issues found!

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

HansMuller · 2019-09-03T16:50:03Z

CC @GaryQian

OsamaAbbas · 2019-09-03T16:57:46Z

It does not have to be a text input to reproduce the issue. Any selectable text would show the same behavior (text inputs, SelectableText, SelectableText.rich ... etc). So I think it's better to remove a: text input label.

GaryQian · 2019-09-04T00:18:27Z

@OsamaAbbas The labels are not exclusive, if it impacts an area or is reasonably relevant, we should add the label so that the right people can find the right bug.

This looks like we are somehow missing the justification_x_offset from the code_units in LibTxt. The curious part is somehow, alphabetic text works, which indicates it isn't a blatant omission of the justification_x_offset but rather something more subtle.

OsamaAbbas · 2019-09-04T03:24:30Z

Russian language does NOT have this issue. (I thought it would, because it uses non latin chars)

GaryQian · 2019-09-04T23:30:46Z

A more likely explanation is that some scripts treat spaces as forming a new run of text, while latin script treats spaces as a part of the same run of text. I'm reviewing the justify logic to see how we deal with spaces as a delimiter for runs and if we are justifying properly there.

OsamaAbbas · 2019-09-05T01:33:17Z

I really appreciate your effort. Thank you.

Maybe related: Mixed text (latin and non latin characters) breaks the RTL justification but fixes the selection accuracy! However, not all combinations have this effect, some combinations only fixes the selection accuracy on the same line. I did many trials but have not recorded them. By a 'combination' I mean: single latin character, one character plus a space, one word without spaces, multi-words ... etc.

OsamaAbbas · 2019-09-09T06:18:28Z

The handles of the selection highlight (in non latin text) is also inaccurate in the other textAlign cases in the case of multi word selection.

Third problem: the spaces between words are given a smaller height than the words.

OsamaAbbas · 2019-09-14T08:46:48Z

An important update: changing the font to an appropriate Arabic font (I used Amiri Font) solves the accuracy problem. It also makes spaces have the same height as the surrounding text.

I will try with a Korean font later.

GaryQian · 2020-02-26T01:52:31Z

You can now use selectionHeightStyle and selectionWidthStyle to choose how the selection highlighting will look. See #48917

I recommend trying max or strut

GaryQian · 2020-02-26T01:54:27Z

Actually, the issue above only partially resolves this. Reopening!

ekleel · 2020-05-15T16:32:26Z

Any updates on this issue? This is something we're facing too in Arabic text selection no matter what the text alignment is. It's not just a justification issue, and I think the title should reflect that. We've tried different fonts and no solution. Even on latest release v1.17.1.

Thank you.

TahaTesser · 2020-07-02T12:51:29Z

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-2.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.20.0-2.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 15a28159bc (9 days ago), 2020-06-23 04:52:58 -0700
    • Engine revision 91a63d6a44
    • Dart version 2.9.0 (build 2.9.0-19.0.dev 7e72c9ae7e)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/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.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • 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 /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.5.1
    • macOS desktop • macos                     • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server    • web-server                • web-javascript • Flutter Tools
    • Chrome        • chrome                    • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

mahmoudsalah37 · 2020-07-02T20:47:44Z

I have same issue in my project (flutter web)
incorrect selection in arabic (RTL) language

Amir-P · 2021-11-01T09:19:39Z

Update:

After investigating a bit more into this issue I can confirm that it has to do something with the font being used. In another application with a custom font containing glyphs for Persian language it's working as intended but using the default font brings back the issue.

Top textfield uses a custom font and bottom textfield is using default font (I guess Roboto because of MaterialApp).

2021 is about to end and it's been open since 2019. Seems like Flutter's non-English community is so small since it only got 6 thumbs up in more than 2 years and has been inactive in a year!

Can any of Flutter's contributors define a clear path on possible solutions to fixing this issue? I'm willing to start working on it but I'm not familiar with Flutter's huge codebase and this issue seems to be related to many places from Flutter's engine to the Flutter's text related widgets.

P.S. I think the issue title should drop the justified-text since it's happening (at least for RTL languages) without the justification too.

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.1, on macOS 12.0.1 21A559 darwin-arm, locale
    en-US)
    • Flutter version 2.2.1 at /Users/amirpanahandeh/flutter
    • Framework revision 02c026b03c (5 months ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/amirpanahandeh/SDK
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/amirpanahandeh/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.1, Build version 13A1030d
    • CocoaPods version 1.11.2

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

[!] Android Studio (version 2020.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2021.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 58.0.3
    • Dart plugin version 211.7727

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

[✓] Connected device (2 available)
    • iPhone 13 (mobile) • 0CD16DF2-3FBF-4207-8EE5-A49F45806CD4 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • Chrome (web)       • chrome                               • web-javascript
      • Google Chrome 95.0.4638.54

! Doctor found issues in 2 categories.

maheshmnj · 2022-12-22T00:26:30Z

Looks like this is still an issue with languages like Hebrew, Arabic

Hebrew (Flutter)

Hebrew (Native)

Arabic(Flutter)

Korean single word selection

Korean line selection

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.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-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

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

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours 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-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

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

• No issues found!

OsamaAbbas · 2023-01-26T20:02:00Z

This issue still exist in v3.7.0.

Some notes:

In pure rtl texts, the issue can be solved using a proper font for the target language. For example: Amiri font for Arabic script.
In mixed texts (i.e. Arabic with some English words), the issue exists even with a proper font.

flutter-triage-bot · 2023-08-11T19:34:03Z

This issue is missing a priority label. Please set a priority label when adding the triaged-framework label.

GaryQian added the a: typography Text rendering, possibly libtxt label Sep 4, 2019

OsamaAbbas mentioned this issue Sep 6, 2019

Text align Justify right is missing in flutter #28700

Closed

OsamaAbbas mentioned this issue Nov 8, 2019

libtxt: Mixed Text (RTL and LTR) breaks the RTL justification #44449

Closed

This was referenced Nov 22, 2019

TextAlign.justify is not working #45375

Closed

Floating cursor on iOS doesn't move on initial drag #45457

Open

Flutter Text align Justify in Arabic RTL not working correctly #45496

Closed

iapicca mentioned this issue Dec 25, 2019

textField widget with rtl input problem #47745

Closed

GaryQian closed this as completed Feb 26, 2020

GaryQian mentioned this issue Feb 26, 2020

Expose selectionHeightStyle and selectionWidthStyle on TextFields #48917

Merged

9 tasks

GaryQian reopened this Feb 26, 2020

iapicca mentioned this issue May 15, 2020

Text selection indicators are misplaced in text fields in RTL locales. #57290

Closed

TahaTesser added found in release: 1.20 Found to occur in 1.20 has reproducible steps The issue has been confirmed reproducible and is ready to work on labels Jul 2, 2020

CaiJingLong mentioned this issue Aug 3, 2020

Add width and height style params for SelectableText. #62765

Closed

9 tasks

osaxma mentioned this issue Jan 2, 2022

StateError caused by SuperSelectableTextState.getCharacterBox as it tries to access the first item of an empty list superlistapp/super_editor#378

Closed

bdlukaa mentioned this issue Oct 1, 2022

Text is outside its background bdlukaa/rounded_background_text#13

Closed

maheshmnj 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.20 Found to occur in 1.20 labels Dec 22, 2022

darshankawar mentioned this issue Mar 28, 2023

Punctuation marks in RTL languages are rendered incorrectly (Directionality issue) #123563

Closed

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

gnprice added team-framework Owned by Framework team triaged-framework Triaged by Framework team and removed team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 18, 2023

flutter-triage-bot bot removed the triaged-framework Triaged by Framework team label Aug 11, 2023

goderbauer added P2 Important issues not at the top of the work list triaged-framework Triaged by Framework team labels Aug 15, 2023

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Selection of any justified-text is inaccurate in non-latin languages #39755

Selection of any justified-text is inaccurate in non-latin languages #39755

OsamaAbbas commented Sep 3, 2019

HansMuller commented Sep 3, 2019

OsamaAbbas commented Sep 3, 2019 •

edited

GaryQian commented Sep 4, 2019

OsamaAbbas commented Sep 4, 2019

GaryQian commented Sep 4, 2019

OsamaAbbas commented Sep 5, 2019

OsamaAbbas commented Sep 9, 2019

OsamaAbbas commented Sep 14, 2019

GaryQian commented Feb 26, 2020

GaryQian commented Feb 26, 2020

ekleel commented May 15, 2020 •

edited

TahaTesser commented Jul 2, 2020

mahmoudsalah37 commented Jul 2, 2020

Amir-P commented Nov 1, 2021 •

edited

maheshmnj commented Dec 22, 2022

OsamaAbbas commented Jan 26, 2023

flutter-triage-bot bot commented Aug 11, 2023

Selection of any justified-text is inaccurate in non-latin languages #39755

Selection of any justified-text is inaccurate in non-latin languages #39755

Comments

OsamaAbbas commented Sep 3, 2019

HansMuller commented Sep 3, 2019

OsamaAbbas commented Sep 3, 2019 • edited

GaryQian commented Sep 4, 2019

OsamaAbbas commented Sep 4, 2019

GaryQian commented Sep 4, 2019

OsamaAbbas commented Sep 5, 2019

OsamaAbbas commented Sep 9, 2019

OsamaAbbas commented Sep 14, 2019

GaryQian commented Feb 26, 2020

GaryQian commented Feb 26, 2020

ekleel commented May 15, 2020 • edited

TahaTesser commented Jul 2, 2020

mahmoudsalah37 commented Jul 2, 2020

Amir-P commented Nov 1, 2021 • edited

Update:

maheshmnj commented Dec 22, 2022

Hebrew (Flutter)

Hebrew (Native)

Arabic(Flutter)

Korean single word selection

Korean line selection

OsamaAbbas commented Jan 26, 2023

flutter-triage-bot bot commented Aug 11, 2023

OsamaAbbas commented Sep 3, 2019 •

edited

ekleel commented May 15, 2020 •

edited

Amir-P commented Nov 1, 2021 •

edited