Re: line-height suggestions and easier alignment

Just to add two cents here: mismatch in leading model (and in vertical
spacing) is indeed a huge pain for tools like InDesign. It can be
partially worked around (if there are no backgrounds) with negative
margins, but not in paginated or multi-column environment. There needs to
be another property that would control top margin of the elements that
have page/column/region break inside them (call it margin-top-break).
Currently margin is defined to be zero in such cases.

If leading model is going to become more flexible, it would be nice to
review how it works in various authoring tools and also address
block-progression spacing at the same time (because they are related - if
I remember it right leading of the last line in not counted in paragraph
hight and spacing after the paragraph is responsible to separate it from
the next one).

Peter

On 12/31/11 6:13 PM, "Alan Gresley" <alan@css-class.com> 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>
>
>
>
>-- 
>Alan Gresley
>http://css-3d.org/
>http://css-class.com/
>

Received on Wednesday, 4 January 2012 19:29:18 UTC