W3C home > Mailing lists > Public > www-style@w3.org > December 2011

Re: line-height suggestions and easier alignment

From: Richard Le Poidevin <ric@betleywhitehorne.com>
Date: Thu, 29 Dec 2011 12:59:32 +0000
Message-ID: <4EFC6434.2000705@betleywhitehorne.com>
To: Alan Gresley <alan@css-class.com>
CC: www-style@gtalbot.org, "Tab Atkins Jr." <jackalmage@gmail.com>, www-style@w3.org
Hello Alan,

Using percentages may be better but it doesn't fix the problem I was 
outlining. In your example you've changed the padding of the containing 
elements to align everything. This is precisely the problem I am trying 
to avoid as it feels very hacky and if the content is dynamically 
generated you can't guarantee what will be displayed. For instance on 
some pages of a site the central column may need to display images, or 
text at a different size or any number of permutations. Also, if the 
text doesn't need a background colour there would be no need for the 
padding in the first place so adding it just for alignment feels sloppy 
and is harder to maintain.

On 29/12/2011 12:49, Alan Gresley wrote:
> On 29/12/2011 8:58 PM, Richard Le Poidevin wrote:
>> Hello,
>>
>> Sorry for not getting any examples to you until now - Christmas got in
>> the way.
>>
>> I've put together three pages that show how I believe line-height
>> currently doesn't work for all cases. One problem I discovered whilst
>> making these is that CSS columns don't align text correctly with
>> line-height added top and bottom. The vertical alignment is a few pixels
>> out. The examples are not pretty, they are just designed to show the
>> problem.
>>
>> http://www.betleywhitehorne.com/ric-lep/fix-css-line-height/
>>
>> I've never suggested anything for the spec before, so please let me know
>> if you require anything else.
>>
>> Kind regards
>>
>> Ric
>
> Example 1 (see code below for fixes). I would not recommend using 'pt' 
> or any other absolute units. Percentages '%' and 'em' values do quite 
> well.
>
>
> <!doctype html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>line-height example 1</title>
>
> <style>
>  body > p::after 
> {width:600px;background:red;height:1px;margin-top:4.5em;content: 
> '';position:absolute;left:8px;}
>  h1, p {
>   margin: 0 0 0.5em 0;
>             }
>  #column1, #column2 {
>   float: left;
>   margin-right: 20px;
>   width: 220px;
>   background-color: #DDD;
>  }
>  #column3 {
>   float: left;
>   margin-right: 20px;
>   padding: 0.8em 0.5em;
>   width: 80px;
>   background-color: #DDD;
> }
>  #column1 {padding: 0em 0.5em;}
>  #column2 {padding: 0.5em 0.5em;}
>
>  #column1 > h1 {
>                 font-size: 200%;
>                                 line-height:150%;
> }
>  #column2 > h1 {
>                 font-size: 125%;
> }
>  #column3 > p {
>   font-size: 75%;
>   line-height: 1;
> }
>  body > p {
>   margin-bottom: 40px;
>   width: 600px;
>  }
> </style>
>
> </head>
> <body>
>
> <p>In this example all the boxes have equal padding. The only changes 
> are the font-size and the line-height.
>             The line-height has been set to demostrate how the top 
> lines of each column donít align. This is because
>             line-height gets applied equally to the top and bottom of 
> each line. Aligning columns is a very common
>             requirement when building sites but is is currently much 
> harder than it should be.</p>
>
> <aside id="column3">
> <p>Lorem ipsum do lor</p>
> <p>Sit amet, conse ctetur</p>
> <p>adipi scing elit</p>
> <p>sed ante quis enim</p>
>
> <p>Proin a augue quam</p>
> <p>Nul lam iac ulis viverra</p>
> </aside>
> <article id="column1">
> <h1>This is my multi-line heading</h1>
> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed 
> ante quis enim ultrices facilisis.
>                 Proin a augue quam, id cursus sapien. Maecenas sit 
> amet leo eget nunc aliquam iaculis et quis elit.
>                 Nullam iaculis viverra eros, at viverra tortor iaculis 
> ac.
> </p>
> <p>Nullam blandit pharetra blandit. Sed porttitor mauris ac justo 
> scelerisque malesuada. Lorem ipsum dolor
>                 sit amet, consectetur adipiscing elit. Etiam facilisis 
> est vitae urna aliquet interdum. Vestibulum
>                 lacus nisi, gravida rhoncus venenatis non, accumsan 
> quis lectus. Duis eu libero a dolor semper ornare
>                 at id quam. Morbi blandit, odio quis ultricies ornare, 
> ante nisl tempor odio, ac cursus neque sapien
>                 sit amet purus. Sed sodales metus vel neque sagittis 
> eleifend.</p>
>
> </article>
> <aside id="column2">
> <h1>This is my multi-line heading set in a different size</h1>
> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed 
> ante quis enim ultrices facilisis.
>                 Proin a augue quam, id cursus sapien. Maecenas sit 
> amet leo eget nunc aliquam iaculis et quis elit.
>                 Nullam iaculis viverra eros, at viverra tortor iaculis 
> ac.
> </p>
> <p>Nullam blandit pharetra blandit. Sed porttitor mauris ac justo 
> scelerisque malesuada. Lorem ipsum dolor
>                 sit amet, consectetur adipiscing elit. Etiam facilisis 
> est vitae urna aliquet interdum. Vestibulum
>                 lacus nisi, gravida rhoncus venenatis non, accumsan 
> quis lectus. Duis eu libero a dolor semper ornare
>                 at id quam. Morbi blandit, odio quis ultricies ornare, 
> ante nisl tempor odio, ac cursus neque sapien
>                 sit amet purus. Sed sodales metus vel neque sagittis 
> eleifend.</p>
> </aside>
>
>
> </body>
> </html>
>
>
>
Received on Thursday, 29 December 2011 13:00:21 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:47 GMT