flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.77k stars 27.38k forks source link

libtxt: Single line RTL text is clipped on the beginning (right) of the text instead of the end (left). #15500

Open gspencergoog opened 6 years ago

gspencergoog commented 6 years ago

When a single line of text (defined like this):

new Text('תווית ארוכה מאוד תווית ארוכה מאוד',
         maxLines: 1,
         softWrap: false,
         overflow: TextOverflow.fade,
         textAlign: TextAlign.start,
         textDirection: TextDirection.rtl)

Reaches the end of its allowed size (e.g. it's placed inside a box that is constrained to a width smaller than the text box), it will clip as expected, but on RTL it will clip off the beginning of the string instead of the end.

I tried tracking this down, and got lost when it jumped to the platform side, but I know that it shows the same behavior on Blink and libtxt. I'm assuming it is somewhere in the ParagraphBuilder, or in Paragraph.layout. Looking at the ui.ParagraphStyle and the TextPainter, I couldn't see anything amiss.

For instance, the string above is clipped like this: image

When the string should start (on the left) with "תווית", and the long string should be clipped on the right.

LTR strings clip properly, so it's clearly something to do with something not handling/knowing about the text direction.

jason-simmons commented 6 years ago

If softWrap is false, then RenderParagraph._layoutText will ask the engine to lay out the text with no width constraint.

RenderParagraph.paint will then paint the resulting TextPainter at the widget's left edge, resulting in the rightmost text being clipped.

One option would be to have RenderParagraph.paint apply an offset during painting if the textDirection is RTL. The offset would be based on the difference between size.width and textSize.width seen in RenderParagraph.performLayout.

@Hixie

cactoos13 commented 4 years ago

I think flutter doesn't care about rtl at all it's the third open issue i faced this month which is related to rtl

Hixie commented 4 years ago

@cactoos13 Sorry it's taking so long to fix. We care, it's just that the people on the team who would fix it are dealing with some even more critical stuff right now.

darshankawar commented 4 years ago

Issue replicable on latest stable (1.20.3)

flutter doctor -v ``` Flutter 1.20.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 216dee60c0 (2 days ago) • 2020-09-01 12:24:47 -0700 Engine • revision d1bc06f032 Tools • Dart 2.9.2 Running flutter doctor... Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.2 19C57, locale en-US) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) ✗ Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions. [✓] Xcode - develop for iOS and macOS (Xcode 11.6) [✓] Android Studio (version 3.6) [✓] Connected device (1 available) ```
1075dn commented 3 years ago

Any updates regarding this? Thanks!

behradkhadem commented 2 years ago

Any Updates?

maheshj01 commented 1 year ago

Reproducible on stable 3.3 and master 3.7, the Text remains clipped at the beginning(right-most end) in the RTL text.

image
code sample ```dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const RTLTest(), ); } } class RTLTest extends StatefulWidget { const RTLTest({super.key}); @override _RTLTestState createState() => _RTLTestState(); } class _RTLTestState extends State { bool isFullScreen = false; /* To Update Screen Resolution Normal */ void updateResolutionNormal() { SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeRight, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); } /* To Update Screen Resolution LandscapeLeft,LandscapeRight */ void updateResolutionLandscape() { SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeRight, DeviceOrientation.landscapeLeft, ]); } void fullScreen() {} bool landScape = false; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ Chip( label: Text('תווית ארוכה מאוד תווית ארוכה מאוד', maxLines: 1, softWrap: false, overflow: TextOverflow.fade, textAlign: TextAlign.start, textDirection: TextDirection.rtl)), Text('תווית ארוכה מאוד תווית ארוכה מאוד', maxLines: 1, softWrap: false, overflow: TextOverflow.fade, textAlign: TextAlign.start, textDirection: TextDirection.rtl) ], ), )); } } ```
flutter doctor -v (mac) ``` [✓] Flutter (Channel master, 3.7.0-13.0.pre.131, on macOS 13.1 22C65 darwin-arm64, locale en-IN) • Flutter version 3.7.0-13.0.pre.131 on channel master at /Users/mahesh/Development/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 0196e6050b (2 days ago), 2022-12-31 11:10:23 -0500 • Engine revision 932591ec04 • Dart version 3.0.0 (build 3.0.0-76.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.74.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.56.0 [✓] 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 13.1 22C65 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124 [✓] 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! ```
maheshj01 commented 1 year ago

cc: @jason-simmons

VladlenRnd commented 1 year ago

Reproducible on Channel stable, 3.10.3, ((