5px line-height for h2 title in wp-admin.css

[bertilow]

The stylesheet "wp-admin.css" has the following rule:

h2 {
  border-bottom: .5em solid #e5f3ff;
  color: #333;
  font: normal 32px/5px serif;
  margin: 5px 10px;
}

The value "32px/5px" sets the line-height to five pixels.
That gives disastrous text-overlapping if an h2-title does
not fit in one line.

The rule should be changed to:

h2 {
  border-bottom: .5em solid #e5f3ff;
  color: #333;
  font: normal 32px serif;
  margin: 5px 10px;
}

That sets the line-height to "normal".

I attach a screen-shot that shows text overlapping.

(In general it's better not to fiddle with line-height.)

[JeremyVisser]

+1. Cooking up patch.

[JeremyVisser]

Patch for removing line-height property for better display.

[JeremyVisser]

Actually, this has a problem. The border will no longer show underneath the text with this patch applied.

[JeremyVisser]

Before patch is applied

[JeremyVisser]

After patch is applied; note the side-effect

[JeremyVisser]

I think we should discuss this at tomorrow's bug hunt.

[matt]

That rule is deliberate to put the line behind the text. H2s should not be so long as to wrap.

[JeremyVisser]

Yeah, I got that impression already. However, as you can see from bertilow's screenshot, sometimes they do wrap, and when they do, it's bad.

[rob1n]

Replying to matt:

That rule is deliberate to put the line behind the text. H2s should not be so long as to wrap.

Usability > aesthetics.

[andy]

The line-height trick is clever and it looks good. It falls apart when it wraps and this happens too often to be dismissed.

The blue line does not look good at any distance away from the text. It looks good under the bottom half. That's when there's one line of text. When it wraps, that line has to go somewhere. It belongs at the bottom so it should always be partly overlapped by the lowermost line of text.

I suggest that line be kept right where it is: halfway up the bottom line. I also want the line-height rule and the bottom-border rule removed. Compromise? Background-image! Anybody interested in implementing that?

[JeremyVisser]

I'll have a bash.

[JeremyVisser]

Background image for the H2.

[JeremyVisser]

Makes the H2 use background-image instead of border. Fixes text wrapping problem.

[JeremyVisser]

Works like a charm (at least on Fx2/Ubuntu).

[JeremyVisser]

Oh, forgot to mention. Patched against trunk 5375.

[JeremyVisser]

Let's have a respin of that.

[rob1n]

I like it.

[rob1n]

(In [5430]) Make H2's in the admin wrap nice, and some CSS cleanup. Props JeremyVisser. fixes #4119

[matt]

This image is far too tall, the proportions are off and ugly.

[rob1n]

Looks the same to me...

[rob1n]

Looks fine for me.

[JeremyVisser]

Screenshot, Matt?