Re: line-height suggestions and easier alignment

On Fri, Dec 23, 2011 at 2:33 AM, Richard Le Poidevin
<ric@betleywhitehorne.com> wrote:
> Hello,
>
> I've often been frustrated by how line-height works in CSS. The value is
> added equally to the top and bottom of each line. This is different to the
> behaviour of programs such as InDesign, Illustrator etc which add leading
> (line-height) to the bottom of each line. I believe this behaviour to be far
> easier to control and useful.
>
> Examples:
>
> I have a site with three columns. The text in each column needs to line up
> vertically, however the central column has a header set in larger type and
> requires a bigger line-height. If I increase the line-height it gets applied
> top and bottom to each line pushing the title down the page a few pixels. I
> then need to use a horrible hack such as a negative top margin to to fix
> this.
>
> This 'fix' will not work if the box has a background colour that also needs
> to align.
>
> I think we either need a rule to supplement line-height such as
> line-height-align/line-height-origin. Or perhaps base-line: top / middle /
> bottom.
>
> Or maybe have a leading rule that behaves in the same manner that has been
> used since movable type was first invented and where it gets it's name
> from.I could then ditch line-height all together as I find it had to find
> any practical uses for the current implementation.

The idea of controlling where the leading gets placed (or
equivalently, where the text is placed within the line-height) makes
sense to me.  Your use-case (a heading in a larger font, and thus
larger line-height, where you want the top of the heading to line up
visually with the top of the first lines in the other columns) is
definitely reasonable.

We can't change the default behavior regarding leading distribution
now, as there's tons of content that depends on the existing
definition.  However, I can get behind a new property that allows some
control over this.  For consistency with similar properties, it would
be better to do 'line-height-align' or 'line-align', with values
"before | middle | after" (or perhaps "over | middle | under" to align
with the over/under directions defined in
<http://dev.w3.org/csswg/css3-writing-modes/#line-directions>),
defaulting to "middle".

~TJ

Received on Tuesday, 27 December 2011 18:58:20 UTC