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