Re: line-height suggestions and easier alignment

On 23/12/2011 9:33 PM, Richard Le Poidevin 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.


The only problem with this approach is that this would cause inline 
boxes to drop below floated content. At the moment WebKit flow inline 
boxes around the floats from the top of the line-box (see below test) 
which is the reverse of what you report happening in InDesign, 
Illustrator etc.

There is some confusion in how line boxes, line-height and leading seems 
to work. Here are some lists messages discussing this [1] [2] in the 
archives.


<!DOCTYPE html>

<style type="text/css">
     div {font-size: 100px; background: rgba(0, 255, 127, 0.5);}
     span {background: rgba(255, 255, 0, 0.5);}
     #float-short {float:left;width: 100px;height:117px;background: 
red;opacity:0.5;}
     #float-long {float:left;clear:left;width: 
300px;height:100px;background: blue;opacity:0.5;}
</style>

<div id="float-short"></div>
<div id="float-long"></div>

  <div>X pÉ   <span>?</span>   X pÉ</div>

> 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.

See way below.

> This 'fix' will not work if the box has a background colour that also
> needs to align.

This would be better control by a wrapping element since you can not 
predict a user text-size settings.

> 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.
>
> Any thoughts?
>
> Regards
>
> Ric

Does this help.

<!DOCTYPE html>

<style type="text/css">
   body {padding: 20px;}
   div {float:left;background: lime;}
   h1 {background: skyblue;}
   #line-height1 {line-height: 200%}
   #line-height2 {line-height: 0%}
   #line-height2+* {margin-top: 2em}

</style>

<div id="float">X pÉ</div>
<h1>X pÉ</h1>
<p>X pÉ</p>

<br>

<div id="line-height1">X pÉ</div>
<h1 id="line-height2">X pÉ</h1>
<p>X pÉ</p>



1. http://lists.w3.org/Archives/Public/www-style/2011Dec/0394.html


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Sunday, 25 December 2011 16:29:33 UTC