Re: line-height suggestions and easier alignment

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 Sunday, 1 January 2012 02:14:13 UTC