Code sample background does not line up with text; hard to read

NEW
Unassigned

Status

developer.mozilla.org
Design
5 years ago
4 years ago

People

(Reporter: basta, Unassigned)

Tracking

Details

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
Created attachment 8340700 [details]
Example

Notice that the background for code samples does not line up with the text. The background features a grid but the gridlines do not line up with the typographic line spacing, meaning the text in the code sample has lines pass through it at uneven intervals.

Instead, the background should be scaled such that the major gridlines pass through the text at even intervals, or pass between the lines (by setting the size of the grid to a multiple of the code's line-height).

You can accomplish this, perhaps, by resizing the image to a known height and/or by using `background-size: <foo>em <foo>em;`

Updated

4 years ago
Component: General → Design / user experience
You need to log in before you can comment on or make changes to this bug.