TextBaseline's alphabetic and ideographic enums do not work in Flutter

Question

I thought I understand how these enums work based on this post. When I tried it using the following code, it does not seem to work.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.ideographic,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(
          fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
),

However, whatever I choose to use as text baseline (ideographic or aphabetic), the result is always the same:

I expect that "hi" aligns to the ideographic baseline of "abcdefg", not to its alphabetic baseline like so:

What am I doing wrong?

EDIT:

There should be a difference between the two in the context of Row widget. I tried removing the line textBaseline: TextBaseline.ideographic, I got this error:

'package:flutter/src/widgets/basic.dart': Failed assertion: line 3791 pos 15: 'crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null': is not true.

Requiring which baseline to use must be Flutter's way of knowing which baseline to align against.

Did you also test out the code in my answer that you linked to? It could be a more recent update of Flutter changed the behavior. The ideographic baseline seemed strange to me even then. And I think I have seen some GitHub issue recently about making an update to it. — Suragch, Jun 03 '20 at 13:39
What are you trying to do? Or how would you expect them to behave? — Suragch, Jun 03 '20 at 23:30
I expect that "hi" aligns to the ideographic baseline of "g", not to its alphabetic baseline. — user1506104, Jun 04 '20 at 02:59

score 1 · Answer 1 · answered Jun 07 '20 at 09:39

1

Screenshot:

You don't need baseline.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
)

answered Jun 07 '20 at 09:39

CopsOnRoad

237,138
77
654
440

I guess my main question is, why does the two behave the same? Is this the right use-case for these baselines? Thanks anyway. +1 – user1506104 Jun 07 '20 at 10:10
Sorry I didn't get you by "why does the two behave the same", which 2 are you talking about? And coming to baseline part, according to your needs, there is no requirement for baseline, I can't think of a good example for now to show when would you need them. – CopsOnRoad Jun 08 '20 at 03:01
I am referring to the 2 baselines. I actually don't have a need. I am just exploring the differences between these two. (Also added an edit to my original post.) – user1506104 Jun 08 '20 at 04:02

score 0 · Answer 2 · edited Oct 24 '21 at 14:37

I don't completely know your problem, but I think your problem's solved by adding the following parameter:

mainAxisSize: MainAxisSize.min,

so we have:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  mainAxisSize: MainAxisSize.min,
  textBaseline: TextBaseline.ideographic,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(
          fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
),

score 0 · Answer 3 · answered Jun 14 '20 at 06:49

So, I did some digging and found some info on this article here.

According to this article :

"alphabetic"

The text baseline is the normal alphabetic baseline. Default value.

"ideographic"

The text baseline is the ideographic baseline; this is the bottom of the body of the characters, 
if the main body of characters protrudes beneath the alphabetic baseline. 
(Used by Chinese, Japanese, and Korean scripts.)

According to this, the output should be differentiable as stated in the problem. So, in order to test the second part of the explanation, I tried using it with Chinese characters.

Column(
              children: <Widget>[
                  Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.ideographic,
                  children: <Widget>[
                  Text(
                    '的',
                    style: TextStyle(
                      fontSize: 100.0),
                    ),
                    Text(
                      '的',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
               ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                  Text(
                    '的',
                    style: TextStyle(
                      fontSize: 100.0),
                    ),
                    Text(
                      '的',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
               ),
                ],
          ),
      ),

The output was this.

As you can see, this too is not the expected output, and both work in the same manner. Hence, it is safe to assume that there may be some problem in Flutter's implementation of these enums.

TextBaseline's alphabetic and ideographic enums do not work in Flutter

3 Answers3

Linked