The score for the 4 questions are 111, 1218, 261 and 5 respectively, but they display 2 digits per line. This is an obvious bug in design.
2 Answers
I suggest taking some advice from the user-profile tags page in terms of how large numbers are handled:
It allows for 3 characters easily, with abbreviations for 1000+ (k
for 1,000+, m
for 1,000,000+, ...). Some consideration is required for (large) negative scores though. While colouring (say red) is an option, it may be confusion/not immediately apparent to users.
The line wrapping problem is easily fixed just by forbidding it in CSS:
.answer-votes { white-space: nowrap }
(Yes, the class name for those vote counts is answer-votes
, even though the links are to questions, not answers. Go figure.)
This mostly fixes the problem for three-digit scores, but four-digit scores will overflow the box reserved for them, and run into the question title. For that matter, even for three-digit scores the fit's kind of tight.
As it turns out, the meta.SE style sheet already has rules for increasing the box width and reducing the font size for three- and four-digit scores. However, they do nothing (in the sidebar, anyway), because they're overridden by other rules tagged as !important
.
Just adding the !important
attribute to those rules helps a bit, but doesn't really look as good as it should, presumably because those rules are really remnants of whatever earlier style sheet the meta.SE style was based on. Based on some testing, though, the following rules look pretty good:
#sidebar .answer-votes.large { width: 32px !important }
#sidebar .answer-votes.extra-large { font-size: 11px !important; width: 32px !important }
With the extra styles above, the linked questions side bar for this question looks like this:
I'll be adding the CSS fixes above to the next version of SOUP, assuming that these styles don't get fixed before it's released. Those feeling adventurous can go grab the development pre-release version, which already includes this fix, from the GitHub repo here.
Ps. The existing .answer-votes.large
and .answer-votes.extra-large
styles do have an effect on the user profile answers tab, where these classes are also used. Alas, it's not really a good effect — they just mess up the vertical padding for no good reason. To fix this, the SOUP development version also includes the following extra rule:
.user-show-new .answer-votes { padding: 4px 4px 5px !important }
Really, the best solution would be to throw out the current broken .large
and .extra-large
styles entirely, and rewrite them from scratch to look something like the styles above.
-
2Looks like the first part of the fix suggested here (
white-space: nowrap
) has been implemented (here on meta.SE, at least; some other sites are still broken), but the width adjustment hasn't been, so large scores still overflow their boxes. Jun 27, 2014 at 22:05
#sidebar .answer-votes
width:40px