ubuntu / yaru.dart

Ubuntu Yaru Flutter widgets and themes for building desktop and web applications
https://ubuntu.github.io/yaru.dart/
Mozilla Public License 2.0
198 stars 35 forks source link

YaruCompactLayout: wrong label wrap #259

Open Jupi007 opened 1 year ago

Jupi007 commented 1 year ago

Oh, this is annoying... I didn't though about a small word followed by a long one (which is quite common in French).

The only solution I found would be:

var label = 'Mes applications';
// ...
label.replaceAll(' ', '\u00A0');

Capture d’écran du 2022-10-10 10-48-24

Which replace all spaces with an unbreakable character. In fact we cannot expand the text widget as we are in a column, so we need to use a trick...

We could add a patch here (in software), but this is not the good solution. We need to fix that in yaru_widgets directly.

Originally posted by @Jupi007 in https://github.com/ubuntu-flutter-community/software/issues/372#issuecomment-1273031090

jpnurmi commented 1 year ago

Sorry, I don't understand. :) How should it look like in this case? If this is language-dependent, shouldn't it be the translators job to decide which whitespace characters are breakable or not?

Jupi007 commented 1 year ago

Well, if we take the Mes applications label example, the ellipsis is done in the white space, which looks like: mes... (my... in english). Like this the label makes no sense for the user. I would prefer to have the ellipsis as far as possible in the label, like in my upper screenshot. But this is not achievable with a text style property, the only way I found is to replace white spaces with unbreakable ones, so the label string becomes a all in one long word.