Flutter line intervals differ depending on language

1,095

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

Share:
1,095
Alexander Taran
Author by

Alexander Taran

Updated on December 07, 2022

Comments

  • Alexander Taran
    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 enter image description here Android enter image description here

    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 fit L lines of text. So I put maxLines and ellipsize 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.