Re: line-height suggestions and easier alignment

Hello Alan,

You are quite right, I don't understand the complexities of of line 
layout in HTML, but appreciate it must be very complex.

Thank you for the examples, I have used em's in the pastand appreciate 
their valuebut found they get difficult when elements have been nested 
several levels deep but the rem should fix that once we have better 
browser support. I will experiment further myself.

I still think that my query is something that should be considered as 
it'll aid creating layout, I see it working exactly as it does now, but 
optionally all the space is applied below each line.

Also, as you noted headers in multi-column do need looking at - 
http://www.betleywhitehorne.com/ric-lep/fix-css-line-height/example2.html.

Thanks for considering my suggestions, it's what makes the Internet what 
it is.

Kind regards

Ric

On 01/01/2012 02:13, Alan Gresley wrote:
> CC www-style.
>
> On 30/12/2011 12:33 AM, Richard Le Poidevin wrote:
>> Hi Alan,
>>
>> My last statement remains true for this one.
>
> Richard,
>
> I not disagreeing that some solutions are inelegant but I don't 
> believe you fully understand how a line is layout in HTML and how this 
> gets more distorted with the multiple use of CSS (i.e. floats, inline 
> formatting and flow).
>
>> It's a very inelegant
>> solution and doesn't fix example 2 when using CSS columns (well it might
>> if start adding lots of padding for nothing, when then means you might
>> have too much space at the top of the element so need compensate for
>> that with yet more rules).
>
> Considering that margin-top:-100px on the <h1> doesn't work in example 
> 2 is more an issue with using multi-column in general. This does need 
> to be addressed but I believe this is an issue with multi-column.
>
>> Adding padding to the actual elements
>> wouldn't work well for example 3 if you want the text to be exactly 10
>> pixels from the top and left of the containing box unless you make rules
>> for each variation. However being able to set a line-height-align (or
>> whatever name would be best) would make it 'just work'
>
> Please see the code below (at the bottom of this reply) for a way to 
> fix example 3 (using margin-top:-0.4em for both <h1> headings).
>
> I have got it to work regardless of the user font-size setting. If you 
> don't know what I mean by user font-size setting, then you may be not 
> knowing the consequence of using absolute units. Please see this test 
> regarding 'pt' values.
>
> http://css-class.com/test/css/box/pixels-points-dpi.htm
>
> The use of 'em' values (some negative) may seem odd at first but if 
> you understand why some authors use 'em' units, it may make more sense.
>
>> I'm raising this issue as all professional design type setting software
>> behaves in a different, easier to control/update/maintain way than
>> browsers do.
>>
>> Regards
>>
>> Ric
>
> I do not know what these professional design type setting software are 
> doing. All I know is that browsers allow users to change text-size 
> settings and I myself have a different concept and understanding of 
> line-height, line box and inline formatting and how these interact 
> with floated content. The CSS2.1 is very misleading with this matter.
>
>
> <!doctype html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>line-height example 3</title>
>
> <style>
>  h1, p {
>   margin: 0 0 0.5em 0;
>  }
>
>  h1 {
>    font-size: 200%; /* CHANGED */
>    line-height: 1.4;
>    margin-top:-0.4em; /* ADDED */
>    padding-top:5px; /* ADDED */
>  }
>  h2 {
>    font-size: 16pt;
>    line-height: 1.4;
>  }
>
>  p {
>    font-size: 12pt;
>    line-height: 1.2;
> }
>
>  #box1, #box2 {
>    float: left;
>    height: 200px;
>    padding: 10px;
>    margin-right: 20px;
>    width: 200px;
>    background-color: #DDD;
>  }
>
>  #box2 > h1 {
>    font-size: 100%; /* CHANGED */
>  }
>  body > p {
>    margin-bottom: 40px;
>    width: 600px;
>  }
>
> </style>
>
> </head>
> <body>
>
> <p>Here we have some boxes that may be used for highlighting 
> information. The line-height implimentation is
>             causing two problems here. First, despite the padding 
> being the same on both boxes the text in the first
>             starts lower. Secondly, this also means the gap between 
> the top of the box and text is larger than the gap
>             between the left-hand edge of the box and the text - I 
> want 10 pixels between my box and the text as
>             specified by my padding.
> </p>
>
> <article id="box1">
> <h1>This is the primary box</h1>
> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
> </article>
>
> <article id="box2">
>
> <h1>This is a secondary box with a smaller heading as it is less 
> important</h1>
> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
> </article>
> </body>
> </html>
>
>
>

Received on Wednesday, 4 January 2012 09:25:37 UTC