⚓ T31307 Line-height in <pre> is too narrow, edges overlap in some environments


Article Images

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

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)

Event Timeline

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.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits