Re: line-height suggestions and easier alignment

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>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 29 December 2011 12:50:34 UTC