What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 150 Stack Exchange communities.

If you go to this question and are a 4k+ user on Anime.SE, you will see the following:


There is one reopen vote on this question, but the reopen vote count is displayed on a different line than the word "reopen". This is slightly silly, and would perhaps benefit from converting reopen (1) to reopen (1), and likewise for close and delete votes. (Or any other way of preventing a line break between the vote type and the vote count.)

A repro (the close link) from here on Meta:

share|improve this question
Hmm, no repro here. Are you zoomed out by any chance? – Adam Lear Jan 9 '14 at 0:53
@AnnaLear Nope. Windows 7 on Chrome 31.0.1650.63; no userscripts running on the site. Zooming in and out doesn't move the "(1)" back on to the same line as "reopen", either. – senshin Jan 9 '14 at 0:54
What's your screen resolution? – Adam Lear Jan 9 '14 at 0:55
@AnnaLear 1920x1080 – senshin Jan 9 '14 at 0:55
For what it's worth, I've seen this occasionally too. – Al E. Jan 9 '14 at 0:56
Here's a full screenshot of the page on my machine (full-screened, but it happens even when non-full-screened): i.imgur.com/kcZ8qTi.png – senshin Jan 9 '14 at 0:57
I've seen this occasionally on code golf but never bothered to report. +1 – Doorknob Jan 9 '14 at 1:51
I've reproduced this, just by changing "mod" to "protect". Since the only breaking space is the one before the (1), that's where it wraps. – Shog9 Jan 9 '14 at 3:14
@Shog9 Ahhh. I somehow missed "protect". – Adam Lear Jan 9 '14 at 3:14
@senshin I've looked up ilk in a dictionary but I still don't understand what the word means in this context. – Stijn Jan 9 '14 at 9:09
@Stijn "and its ilk" = "and things of that sort", meaning "and also things like 'close (1)', 'delete (1)', etc.". I'm sure ELL or ELU would be glad to answer in greater depth if you want to ask there! :) – senshin Jan 9 '14 at 9:14
With the addition of the "rollback" link, this can now be reproduced right here on Meta. – michaelb958 Apr 19 '14 at 13:40
@Anna is this Jin's area, or can any dev fix it? Just asking... ;) – Shadow Wizard Sep 15 '14 at 12:41

1 Answer 1

A big part of the problem is that the line cannot break at the spaces between the links, since they're not actual spaces, but rather | characters styled to look like spaces:

<span class="lsep">|</span>

A fairly simple way to fix this, without messing with the existing styles on various Stack Exchange sites (on some of which the | characters are actually visible, and on some of which they're not) would be to modify the code that generates the menus to insert a Unicode zero width space (U+200B) after each separator bar. This would allow browsers to insert line breaks after the bars, making it much less likely that breaks get inserted within menu items.

You can test the effect of this change locally by opening the JavaScript console in your browser, while looking at a post affected by this issue, and running the following command:

$('.post-menu .lsep').append('&#x200B;')

As for the original issue of line-breaks being inserted inside menu links, a simple way to prevent that would be to add the following CSS rule:

.post-menu a { white-space: nowrap }

In fact, the zero-width spaces could also be inserted using the CSS :after selector:

.post-menu .lsep:after { content: '\200B' }

Edit: I made that into a user script for GreaseMonkey / Chrome users. All it does is inject the two CSS rules shown above into all pages. Here's a screenshot:


(Note that the screenshot is also demonstrating another user script of mine.)

Edit 2: Turns out that content: '\200B' doesn't help in Chrome, but the following does:

.post-menu .lsep:after { content: ' '; font-size: 0px }

I've incorporated this new fix into a collection of various minor user script fixes and workarounds that I'm calling the Stack Overflow Unofficial Patch.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .