One more comment on internationalization and ellipsis, Wikipedia is our friend https://en.wikipedia.org/wiki/Ellipsis#In_different_languages
And a [[ https://codepen.io/Volker_E/pen/eYWKdmm | reduced test case with Chinese with text-overflow ]], verifying my gut reaction and showing that the browser doesn't localize ellipsis automatically. Should be “……” instead of “…” for Chinese according to article above.

After looking at this more today and unless I'm missing something, I think the fade out technique works better on elements that don't also have a hover state like our user menu links. Notice when the user hovers over the talk link, the gray hover state appears with the fade at the end which could be confusing:

Is there a better alternative? @alexhollender @Volker_E

I'll move this to blocked in the meantime.

As an aside and fwiw, text-overflow might eventually get a native fade support [1], but it doesn't appear to be supported by any browser yet.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#fade

Or I guess we could use a :hover:after selector to match the hover color to make it not look weird 🙂. Assuming this is what we want when hovered? :

In T287522#7254300, @nray wrote:

Or I guess we could use a :hover:after selector to match the hover color to make it not look weird 🙂. Assuming this is what we want when hovered? :

@nray that looks good for the hover state. Also happy to just have ellipsis if we need to simplify things here.

Change 709829 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add max-width to user menu and text-overflow: ellipsis

https://gerrit.wikimedia.org/r/709829

Change 709848 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/MinervaNeue@master] Add max-width to AMC user menu

https://gerrit.wikimedia.org/r/709848

• Once merged in Vector copy the same rules across to the mobile equivalent for non-AMC users

The Mobile site (non-AMC mode) already has a ellipsis but we have also made the menu's max-width be 80% of the viewport. @alexhollender Please let me know if we'd like to change that or if that's fine as is:

Change 709829 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add max-width to user menu and text-overflow: ellipsis

https://gerrit.wikimedia.org/r/709829

Change 709848 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add max-width to AMC user menu

https://gerrit.wikimedia.org/r/709848

Okay, these patches are finally on beta.

@alexhollender If you'd like to check, login to https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page so you can see the user menu. The AMC user menu also has a max-width applied to it (https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page making sure to enable AMC mode).

If approved, I think this can be moved to sign off.

Vector

looks good:

long username	other long menu item

Minerva

the ellipsis are a bit high up — @nray do you wanna fix that here or separate task?

long username	other long menu item

Change 710363 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/MinervaNeue@master] Remove .toggle-list-item__icon selector

https://gerrit.wikimedia.org/r/710363

@alexhollender The patch to fix this has been merged and will be on beta soon (I'll let you know when it lands)

Change 710363 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove .toggle-list-item__icon selector

https://gerrit.wikimedia.org/r/710363

@alexhollender Okay, you can now check the fix for the alignment issues on beta. The alignment of the text was not vertically centered which caused the alignment of the ellipsis to appear off

Change 711231 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/core@master] Use flexbox to vertically center .mw-ui-icon-before text instead of vertical-align

https://gerrit.wikimedia.org/r/711231

Change 711235 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/MinervaNeue@master] Use text-overflow: ellipsis on .mw-ui-icon-before span elements

https://gerrit.wikimedia.org/r/711235

Patch looks fine with the design template. But let's please get for example a Chinese speaker to provide feedback on ellipsis from an i18n standpoint as laid out at T287522#7250614

@Volker_E I'm also curious how confusing the ellipsis are in different languages (and also how that compares with a fade out in a ui menu), but given the ubiquitous usage of the text overflow ellipsis throughout mediawiki including its own mixin in core, shouldn't that question be scoped to its own ticket? I feel the answer to that question is not unique to the several menus described in this ticket and has much broader implications. Attempting to answer that here feels like a big increase in scope to me and an unnecessary blocker

I understand the resistance to broaden the scope, but like to emphasize that I come from a position of not additionally accumulate i18n debt. So is the ellipsis here helping more users than adding a language agnostic solution?
If you all feel so, I won't block this from merging, already said “patch looks fine” above.

In T287522#7274515, @Volker_E wrote:

Patch looks fine with the design template. But let's please get for example a Chinese speaker to provide feedback on ellipsis from an i18n standpoint as laid out at T287522#7250614

I got some feedback that this may be irrelevant as most Chinese names are unlikely to be that long, given Chinese characters are quite expressive. A quick browse of active users seems to confirm that (https://zh.wikipedia.org/w/index.php?title=Special:%E6%B4%BB%E8%B7%83%E7%94%A8%E6%88%B7&dir=prev&limit=500)

However a Chinese speaker would be able to work out that the ellipsis means more content. The example that is given however caused a lot of confusion, given the mix of nonsensical characters.

Here's a better one (Chinese name of Joseph Gordon Levitt 约瑟芬·戈登·罗维特):

Change 711231 abandoned by Nray:

[mediawiki/core@master] Use flexbox to vertically center .mw-ui-icon-before text instead of vertical-align

Reason:

Given the potential impact of this patch, this probably deserves its own ticket

https://gerrit.wikimedia.org/r/711231

Presumably a max-width is needed for this one too?

^^ good point! @alexhollender do you have a desired max-width for that?

Change 711235 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use text-overflow: ellipsis on .mw-ui-icon-before span elements

https://gerrit.wikimedia.org/r/711235

Moving to design review for T287522#7280312

some notes...

Ideally we'd have a sense of the average length of usernames in pixels across various projects, which turns out to be somewhat difficult to determine (different scripts have different character widths, each username is unique, not all usernames use the default script of the project they are associated with, etc.).

Using this query we can get the average length of usernames in characters across various projects, e.g.

• 80% of username lengths in en, de, ar, ja, and hi are between 6 and 16 characters long
• 80% of username lengths in zh are between 6 and 12 characters long

Alternatively this query looks at all usernames across all projects (they all get registered on Meta), and shows that 91% of usernames are between 5 and 18 characters long

But again, how wide is a 16 or 13 character username? It can vary quite a bit.

A second, much more limited, approach:

• go to Recent Changes on various wikis
• take a random sample of usernames (with a bias towards picking longer usernames)
• paste the usernames into the username button in the site header and measure their lengths in pixels

The upper range of what I found (again from a very small sample size) is 180px wide (username コロナワクチン闇だらけ on Japanese Wikipedia)

The average was 139px.

@nray @Jdlrobson assuming the general goal here is to establish a max-width that results in most (let's say 80%?) of usernames not getting truncated/clipped...

I've tried to determine how much space we have available to us, given the other items in the header:

• On Commons & Wikidata for the logged-in state we're already clipping elements in the header once we get to ~1030px (which probably means for those projects we need to be collapsing some elements at the 1200px breakpoint)...this only gets worse as the username gets longer, so let's ignore that for now
  
• On Wikipedia it seems like the max-width the username button could be currently, without causing other items to get clipped (before things start collapsing below 1000px) is 173px, which includes padding.
  
• Then factoring in the Watchlist icon, which we'll be adding to the header, the max-width available goes down to 155px. Which, according to the rough analysis in the comment above, means a significant portion of usernnames might get clipped. So: could we have a max-width of 200px when the browser width is above 1200px, and then a max-width of 155px when the browser width is below 1200px? That way the usernames will only get clipped when people are below 1200px...

thanks @alexhollender, I'll take a look into this when I complete the sticky header spike

Change 715827 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Set responsive max-width on username in header

https://gerrit.wikimedia.org/r/715827

Change 715827 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Set responsive max-width on username in header

https://gerrit.wikimedia.org/r/715827

Yeh I think it's fine for this to skip QA. Design review should be enough here.