Broken CSS line-height examples

I believe the current CSS line-height implimentation is broken for many use cases and makes precise alignment difficult. It is also inconsitent with how leading (that's the name for line-height in the print world) used in the print world. Traditionally otis added just the the bottom of each line. This allows the mixing type and leading sizes without breaking the vertical alignment.

I propose a new CSS propety called line-height-align that allows you to specify where the text starts from without breaking existing sites. It could work like so:

line-height-align: top;
line-height-align: middle; /* default */
line-height-align: bottom;

Ideally text handling would be taken a step further with a proper baseline grid for aligning different sizes of text across columns but that is beyond what I am suggesting now. Here are some images for any interested in baseline grids.