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.

Ronnironnica

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. – Loads

I just tested it. Your code works as expected. – Ronnironnica

What are you trying to do? Or how would you expect them to behave? – Loads

I expect that "hi" aligns to the ideographic baseline of "g", not to its alphabetic baseline. – Ronnironnica

Answer 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),
    ),
  ],
)

Matherne

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 – Ronnironnica

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. – Matherne

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.) – Ronnironnica

Answer 2

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.

Ballot

Answer 3

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),
    ),
  ],
),

Progressive