Group page: "administrators" header label text length issue

[slaFFik]

Currently in group header by default we display the text:

Group Admins:

This string is quite short in English.
In Russian it's: Администраторы группы

This section has a max-width:20% css rule. But word Администраторы is longer than that 20% on default 2015 theme (2016 is fine). Currently it appears as follows:

Администратор
ы группы

Which makes the last character of a longer word to go to a next line. See screenshot attached.

Also, this issue appears on all themes, that are quite narrow.

So the solution might be just to increase the max-width (21% is ok already, but as I can see we have do that up to 25%).

[hnla]

Simply changing the % widths will be tricky and requires the whole region to be adjusted, this is all problematical not sure of the real solution here, trying to style for multiple string lengths is awkward really we need a soft hyphen, nbsp; or something similar to effect the formatting of the string but within the translated characters.

[DJPaul]

Is the width coming from WordPress or from us? Maybe can we hack the font-size smaller? How old a WordPress default do we want to support, v.s. effort to support them?

[hnla]

The width is from us but required due partly with needing to accommodate all the header elements, not least the newish group cover image layout this is why simply adjusting the float width while possibly sorting out the immediate view can have consequences and impact aspects like break points.

Both adjusting a % width and/or font size are sort of short term solutions as they both can re-surface as issues , font sizing is not exclusively in the authors hands, font size is a user/browser controlled factor, if I reduce the size and a user has increased then the problem likely re-occurs.

There isn't a simple fast fix here I can and now am looking at this but time to devote is a factor here.

[hnla]

@slaFFik Loaded language pack to have a look and played around with a few options but one thing that I wondered about was the fact that I see pretty much the same issue I would if an english word used of longer length which would break, but hyphenates - it's never a great look but in these fluid layouts should hopefully not be visible that often ( did in the sc switch text to left though which may be a better option for longer words)?

What browser/devise is that that you used above?

[slaFFik]

I'm using latest Chrome on Windows 10 (PC): ​http://take.ms/b38OU
Seems the easiest for Russian will be just changing long full form "Администраторы" to a shorter and more informal "Админы". It's not very good and not always suitable (depends on the networks), but at least it's not that bad as a word split.

[hnla]

@slaFFik is that a something acceptable? Otherwise the only real alternative is we re-fashion the layout, simply increasing a point or two in % terms and/or reducing font size only puts the problem off for a while issue still exists as it were and would probably need the breakpoint cutting in sooner at a higher viewport width so that we never get to a narrow box width to force the word to break.

[slaFFik]

Yes, it is acceptable.
I didn't think that it may provide so many issues, as I did only a quick styles investigation (with no mobile in mind, sadly).
So lets close it and I will just rephrase that word.

Thanks @hnla for all your thoughts on this!

[hnla]

It's a legitimate worry or concern we forget that many languages do have character differences but we or I will tend not to think about that while looking at English characters and building layouts that are far too tight in widths which may blow up when displayed in e.g German.

It's an additional concern when looking at what we can or can't do with layouts.