Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.I believe that the technique described in the A List Apart article, as mentioned in the code comments, is not being applied correctly.
In order to achieve a consistent vertical rythm, the margins of different html elements are being calculated in proportion to the base font size.
However, the margins of the headings, for example, are set to 1em, the page's base font-size, instead of the base line-height, 1.333em. Secondly, the headings all receive a line-height of 1.333em, which is relative to their own font-size, and not a proportional derivative of the page's base line-height.
For example:
/*
* Headings
*/
h1
{
font-size: 2em;
line-height: 1.3em;
margin-top: 0;
margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
Remember, a margin specified in ems is relative to
the element's font-size, not to the pages' base
font size. So, for example, if we want a 1em margin
(relative to the base font), we have to divide that
length by the element's font-size:
1em / 2em = 0.5em */
}
should be:
/*
* Headings
*/
h1
{
font-size: 2em;
margin-top: 0;
margin-bottom: 0.6665em; /* 0.6665em is equivalent to 1.333em in the page's base font.
Remember, a margin specified in ems is relative to
the element's font-size, not to the pages' base
font size. So, for example, if we want a 1.333em margin
(relative to the base font), we have to divide that
length by the element's font-size:
1.333em / 2em = 0.6665em */
line-height: 0.6665em; /* or multiples of 0.6665em. In fact, when leaving this as the
page's base line-height, it may be omitted, because it is inherited. */
}
Attached patch corrects all occurrences of the erroneous line-height and margin declarations.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | Before.png | 163.87 KB | kdebaas |
| #2 | After.png | 164.98 KB | kdebaas |
| #2 | 481952_#2.txt | 9.24 KB | kdebaas |
| zen-line-heights-css.patch | 3.88 KB | kdebaas |
Comments
Comment #1
JohnAlbinYeah, the vertical rhythms in the default Zen are kind of ass.
If we're going to set them to some arbitrary value, let's get them looking slightly better. I'll review this patch before a 6.x.-2.0-beta-1 is released.
Comment #2
kdebaas CreditAttribution: kdebaas commentedAttached is a new patch against HEAD, and two screenshots of the webpage before and after. Here's what I did:
I used a 12px font size on the page, with a line-height of 18px, to keep calculations sane. Then, for the main content paragraphs, a font-size of 14px, to show how margins and font-sizes are calculated relative to the base font-size. I adjusted the headings accordingly, and corrected the calculations of their margins to be equal to the size of the base line-height instead of the base font.
I changed the margins on all block-level elements to reflect the base line-height, as well as the #with-navbar top margin in the respective layout.css files.
LIMITATIONS:
This patch is as far as I got with reasonable results for an out of the box vertical rythm experience. It doesn't work completely, for example I didn't change the styling of the tabs yet, which obviously break that rythm. Nor did I override any extra core css, such as taxonomy.css, nor the rendering of forms, all of which break the vertical rythm. And I switched off the logo, which obviously doesn't come at a convenient size that is a multiple of the page's line-height.
One could go crazy perfecting this kind of css hocus pocus, especially when you have to start calculating multiples of the line-height out of objects that have borders, padding and margins set, all in ems. The big question is whether that is really worth it for Zen, or how far one should go achieving perfect vertical rythm. But let's have a look at this, and let's at least get rid of the css which erronously set the margins of headings to the size of the base font instead of the base line-height.
[Edit: the proper link to the attachment is: http://drupal.org/files/issues/481952_%232_0.txt ]
Comment #3
Cliff CreditAttribution: Cliff commentedWhy exactly are we sizing the font in pixels rather than following the W3C's best practice, sizing fonts in ems?
Comment #4
kdebaas CreditAttribution: kdebaas commentedWe aren't.
Comment #5
barraponto CreditAttribution: barraponto commented@kbaas i can't access your file, can you repost it with a filename that doesn't include the # character?
Comment #6
kdebaas CreditAttribution: kdebaas commentedIt's been more than a year ago since this was posted. Even if I would be able to find the file again, it would probably not apply against HEAD anymore. Sorry about that.
If you feel like taking this up, have a look at the first patch. The essence of the problem lies, among other things, in a misunderstanding of how line-heights are calculated. i.e. what are they relative to:
The second patch was an unfinished attempt to carry through all the corrections that stem from these two misunderstandings. If I ever take this problem up again, it will most likely against the drupal 7 version, I regret to say.
The valiant may want to look at: Compose to a vertical rythm, which is a good guide to setting up the correct css.
Comment #7
JohnAlbinIndeed the margins for the block level elements where part of my pre-Drupal "base install" CSS that I wrote about 8 years ago. And I never revisited them. :-p
I've edited comment #2 to add the proper link to the patch. And I'm looking at this today.
Comment #8
JohnAlbinFixed! http://drupalcode.org/project/zen.git/commit/c1f07ee