search

chharvey / chharvey.github.io

My personal web site.
https://chharvey.github.io/
MIT License
4 stars 1 forks source link

blockquote line-height #10

Closed chharvey closed 10 years ago

chharvey commented 10 years ago

Use JS to change the line height of block quotes to 1.5 times the usual amount.

Currently (2014-03-01), the line-height is 1.2, because font-size is 1.25rem and 1.25rem × 1.2 = 1.5rem = 1vru, where 1vru = 1.5rem = 24px, one "line".

Change line-height to 1.8 to increase vertical spacing between lines. That way, each line would be 1.25rem × 1.8 = 2.25rem = 1.5vru.

If the number of lines is even, the total would be a multiple of 1.5vru × 2 = 3vru, which is a whole number, so vertical rhythm would be okay. No need to adjust margin-bottom.

However if the number of lines is odd, the total would always be a multiple of 3vru plus 1.5vru, which would always be offset by 0.5vru = 0.75rem = 12px. So the margin-bottom must be set to -12px.

Use JS to determine the number of lines and adjust margin-bottom accordingly.

chharvey commented 10 years ago

See this jQuery Forum post for a suggestion.

  1. take the line-height (1.2)
  2. take the font-size (1.25rem) or in pixels (20px)
  3. multiply line-height by font-size (1.5rem or 24px) (this is correct, vru should always be 1.5rem=24px)
  4. take the height of the blockquote in pixels (e.g. 72px)
  5. divide height by vru (e.g. 72px / 24px = 3) this result is the number of lines

If the number of lines is odd, set margin-bottom: -12px;.