Hi All. I'm using the material3 navigation bar an...

# compose

[mattinger]

Hi All. I'm using the material3 navigation bar and i've noticed something about text wrapping and i'm wondering how others are dealing with it. It seems like the way that NavigationBarItem is layed out is more fluid than i'd expect when your text has to go to a second line. Multiple lines of text pushes the icon up in the layout instead of it having a fixed offset from the top. While I don't think this is an issue for most apps, when you get to say 4 or 5 tabs or start dealing with other more verbose languages, it does come into play.

[Chrimaeon]

It should be single line

Don’t wrap or truncate text as it can make the label hard to understand

https://m3.material.io/components/navigation-bar/guidelines

[mattinger]

I'm hoping our UX will be alright with that. They have particular rules, and i think generally doing things like not scaling text, or trunacting/elipsizing text falls afoul of accessibility rules.

[mattinger]

And those guidelines seem to directly contradict one another. "Don’t wrap or truncate text as it can make the label hard to understand". With a text label you have to either wrap or truncate when it overflows. They only way you don't is to keep text short enough so it won't get to this point, but that breaks down in certain languages. But it also means you have to override the LocalDensity to turn off text scaling.