Flutter line intervals differ depending on language
I've posted that issue on github also: https://github.com/flutter/flutter/issues/23875
Now it's fixed (https://github.com/flutter/flutter/commit/c6cc3cdedafee41822ce832d7d73000f2e77b183), the solution is to use strutStyle
property of a Text
Text("Some Arabic text",
strutStyle: StrutStyle(
fontFamily: 'FontName',
forceStrutHeight: true,
),
)
https://docs.flutter.io/flutter/painting/StrutStyle/forceStrutHeight.html
Alexander Taran
Updated on December 07, 2022Comments
-
Alexander Taran over 1 year
How do I force Flutter to respect given line interval via
Text
widget?I've noticed that depending on the language intervals can differ which makes widget height unpredictable. For example, in Arabic intervals are bigger.
I've compared Flutter and Android and noticed that Android's
TextView
renders Arabic text with the same line interval (it also automatically renders it Right-To-Left, and Flutter doesn't which is also suspicious).Examples.
Flutter code
class IneterlineExample extends StatelessWidget { @override Widget build(BuildContext context) { final style = TextStyle( fontSize: 32.0, height: 1.0, ); return Scaffold( appBar: AppBar( title: Text('Interline example'), ), body: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( width: 200.0, child: Text("This is a multiline text with English letters", maxLines: 4, overflow: TextOverflow.ellipsis, style: style, ), ), Container( width: 200.0, child: Text("آموزش کامل طرز تهیه پودینگ شکلاتی موز دسر مجلسی", maxLines: 4, overflow: TextOverflow.ellipsis, style: style, ), ), Container( width: 200.0, child: Text("В русском языке интервалы тоже ок Russian", maxLines: 4, overflow: TextOverflow.ellipsis, style: style, ), ), ], )); } }
Android Code
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ExampleActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" > <TextView android:layout_width="200dp" android:layout_height="wrap_content" android:text="This is a multiline text with English letters" android:textSize="32dp" android:maxLines="4" android:ellipsize="end" /> <TextView android:layout_width="200dp" android:layout_height="wrap_content" android:text="آموزش کامل طرز تهیه پودینگ شکلاتی موز دسر مجلسی" android:textSize="32dp" android:maxLines="4" android:ellipsize="end" /> <TextView android:layout_width="200dp" android:layout_height="wrap_content" android:text="В русском языке интервалы тоже ок Russian" android:textSize="32dp" android:maxLines="4" android:ellipsize="end" /> </LinearLayout> </android.support.constraint.ConstraintLayout>
The original issue I'm trying to solve is fo fit some text (language is unknown) to a given height.
i.e. I have some text, maybe long and a box, WxH fixed size. I've calculated that given my font size and
height
scale, I can fitL
lines of text. So I putmaxLines
andellipsize
and it works in Android app (since line height is predictable), but doesn't in Flutter app. I'd be also OK if Flutter text could be ellipsized when overflown the given box, but not sure how to achieve that.