Page MenuHomePhabricator

Line-height in <pre> is too narrow, edges overlap in some environments
Closed, ResolvedPublic

Description

An annotated screenshot of the problem as seen in CodeReview

The line-height for pre-tags in Vector is 1.1em.

This CSS rule overrides the "line-height: 1.5em;" rule for div#bodyContent.

Attached is an annotated screenshot of a pre-tag (in this case within CodeReview). In the screenshot you can see where two lines overlap eachother.

As long as there isn't an inline background color, this is barely noticeable, and only a problem if two tall-characters are right below eachother.

But when adding background colors underscores and tall characters are chopped on the bottom.

Proposed fix: Increase line-height to 1.3em.


Version: 1.20.x
Severity: normal

Attached:

bug_.png (369×984 px, 68 KB)

Details

Reference
bz29307

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:28 PM
bzimport set Reference to bz29307.

Fixed in r89697.

This was also the reason the background-colouring in CodeReview was reverted (because it chopped off underscores) which was usefull for spotting whitespace changes.

How do you add those overlapping borders exactly? I can't seem to reproduce any overlap as of yet (and CSS borders tend to change the actual box size, making them tough to work with for these purposes)

I added the borders by applying CSS to <ins> and <del> in Firebug.

See also Tim's attachment in bug 27416 where the bug can be seen without borders.