Repository navigation
Hebrew text is not properly vertically aligned #27033
Description
My app's layout is RTL. When I'm using Hebrew text the bounding box increases and the text slightly top-padded which makes things hard to vertically align center.
Example without Hebrew:
Row(
children: [
Container(
color: Colors.red,
width: 24,
height: 24,
),
Container(
color: Colors.red,
child: Text("world"),
),
Container(
color: Colors.yellow,
child: Text("hello"),
),
],
);
Example with Hebrew:
Row(
children: [
Container(
color: Colors.red,
width: 24,
height: 24,
),
Container(
color: Colors.red,
child: Text("כככ"),
),
Container(
color: Colors.yellow,
child: Text("hello"),
),
],
);
Activity
zoechi commentedon Jan 24, 2019
Please add the output of
flutter doctor -v.Please also check if this is still the same in
masterchannelzoechi commentedon Jan 24, 2019
Might be #24317
@GaryQian ?
jossef commentedon Jan 24, 2019
@zoechi
same results on the master branch.
cbracken commentedon Apr 8, 2019
/cc @GaryQian can you confirm if this is a dupe of #24317?
tigrenok00 commentedon Jul 25, 2019
Following, still happens (Hebrew)
jossef commentedon Jul 27, 2019
haven't checked but worth trying using a customized font with a fixed character size
[-]typography - Hebrew text is not properly vertically aligned [/-][+]Hebrew text is not properly vertically aligned [/+]8 remaining items
GaryQian commentedon Nov 29, 2022
cc @Rusino @jason-simmons This bug has persisted through the SkParagraph switch
Rusino commentedon Feb 13, 2024
To understand whether it's a bug or a correct behavior I need to know how Flutter does vertical alignment.
For instance, do we have two different paragraphs, once for "Hello" and another for "Hello"? Or it's a single paragraph with two different runs misaligned? I don't think it's the second case and I can't fix the first one - it depends on the font metrics unless you make a special efforts to align baselines for both paragraphs.
GaryQian commentedon Feb 14, 2024
It would be the first case, two separate runs being aligned together by Flutter layout rather in the text layout.
Rusino commentedon Feb 14, 2024
As I said I am not sure if these two runs belong to the same paragraph or not.
Can you confirm that?
gnprice commentedon Feb 17, 2024
Looking at the original example code, there are two separate
Textwidgets for the two fragments of text, so as a result there will be two different paragraphs sent to SkParagraph.As @LongCatIsLooong pointed out on a related issue at #120862 (comment),
Rowcenters its children by default. And looking back at the screenshots in the original report above, one of them illustrates quite nicely that the boxes are indeed each being centered:If the children contain text and you want the text to look aligned, then you want to pass CrossAxisAlignment.baseline instead.
It does seem like the docs could better signpost the situations when one wants CrossAxisAlignment.baseline instead of the default, given the number of people (including me last March) who interacted with either #120862 or this issue and didn't make that connection. I'll see if I can write up a quick docs PR.
github-actions commentedon Mar 6, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.