Page MenuHomePhabricator

Category links need less spacing and better wrapping
Closed, ResolvedPublic


As reported at, the category links now look bad. There's extra (excessive) spacing and the separator is always at the start of the next line, both of which are awkward and goofy.

This can be resolved on a per-site basis, but the default should be saner.

Version: unspecified
Severity: normal



Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:47 PM
bzimport set Reference to bz31547.
bzimport added a subscriber: Unknown Object (MLST).

Any reason (besides IE7-8 supporting first-child but not last-child) not to use a border-right instead of border-left?

(In reply to comment #1)

Any reason (besides IE7-8 supporting first-child but not last-child) not to use
a border-right instead of border-left?

It'd be better to have MediaWiki simply wrap the first category in a distinct class or ID. That shouldn't be very difficult to implement at all and would remove the need for a pseudo-class altogether.

  • Bug 31551 has been marked as a duplicate of this bug. ***

To repeat from other duped bug - for reference: Bug 12261 / r92054 was originally where new categorylinks were introduced.

I haven't looked at this too closely, but I think there are two separate issues:

  • changing the HTML output to be a bit easier to work with
  • adjusting the CSS to be a bit more sane

If I were implementing this, I think it makes more sense to do a border-right on each <li> within catlinks. That keeps the separator on the same line as (at least) the word that precedes it, which is standard.

Foo | Bar |
Baz | Bing | Bam

Rather than:
Foo | Bar


The latter is awkward and strange to me. Then, rather than adding a class to the first category link, you'd output a special class on the last category link and then set its border-right to none.

A little display:inline; magic and some other tweaks can fix the word-wrapping and/or spacing issues.

a.d.bergi wrote:

What do you mean with "disply:inline"-magic? Afaik inline-block is needed for paddings and borders.

My arguments for less spacing (per Before the change there was one blank between the vertical line and the cateory link, and one blank in front of the list. A blank usually has a width of 1/4 quad (em), but since the change the spaces now have 0.7em, the one in front of the list is 0.4em additional to the blank. This may look OK in Vector, but for the older skins (expecially monobook) it looks horrible.
Please revert it to
.catlinks li {

		padding: 0 .3em; /* or even .25 */
		border-left: 1px solid /*black*/; /* just current-color as before */
		margin: 0; /* instead of 0.1em ore more */

.catlinks li:first-child {

		padding-left: 0; /* there's already a blank left to it */

in shared.css, of course you may set specific, bigger spaces or the grey line color in vector/main.css.
I'm not sure when this was introduced (r92054?), there are so many different revisions (r92245,...). E.g. r96775 was quite OK, I don't know what happened since then.

Created attachment 9240
Patch to reduce catlinks spacing

Patch to reduce catlinks spacing.

This patch only changes existing properties without introducing new ones, minimizing the change of any CSS conflicts. This code is currently live on's common.css.

attachment shared.css.catlinks.patch ignored as obsolete

The patch creates a problem in IE's compatibility view due to the line-height of 1em. I have adapted the patch.

Created attachment 9349
Patch to reduce catlinks spacing

New patch which is live in enwiki's common.css.

attachment shared.css.catlinks.patch ignored as obsolete

Your new patch doesn't apply cleanly against the shared.css in SVN.
Could you update it so I can apply it?

Created attachment 9369
Updated patch for catlinks spacing

New patch created against current revision.