Re: [WSG] working with line-height

[Simon Pascal Klein]

Line-height (leading) is measured from baseline[1] to baseline rather  
than from the ‘end’ of a glyph the the ‘tip’ of another. It is  
essentially impossible to align ‘perfectly’ the top of say an  
uppercase character to a horizontal line above it in CSS because of  
this, and because many uppercase glyphs often are ‘shorter’ than  
lowercase ascender glyphs (e.g. ‘h’ in ‘The’ will often be taller than  
the capital ‘T’; here the ‘h’ reaches the topline)—this occurs notably  
in serif typefaces. It is also important to note that optically size  
12 Arial may not be the same as another font at size 12, and thus can  
also apply for the standard leading when size and leading are set at  
1:1.


Finally differing font raster/sub pixel engines will render type  
differently (contrast ClearText with Apple’s engine and Apple Advanced  
Typography (AAT)).


I think here I would have to echo either Matijs’ comment regarding the  
pixel-perfect designs on the web or, alternatively, in aligning the  
top of a word or phrase to a horizontal line (say a to ‘hang’ from a  
coloured shape above it) just place it up high enough that even if  
another font or engine were used it’ll be overlapping with the shape  
enough to avoid dropping out of it due to some rendering or alternate  
font. For an example of this see the text “17 Ottobre ’09” on http://uxcamp.it/ 
 — it’s Helvetica Neue Bold and switching to Arial still keeps it  
looking spiffy. (:



1. http://en.wikipedia.org/wiki/Baseline_%28typography%29


Kind regards.

—Pascal


On 03/07/2009, at 8:56 AM, Paul Novitski wrote:


At 7/1/2009 07:19 PM, Ben Lau wrote:
This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif
So there'll be a div with padding top and bottom of 20px, and with  
text inside.



This doesn't look to me like a line-height topic at all. If you  
increase the line-height, the lines of text within each paragraph  
will separate from one another, and that isn't what your gif  
illustrates. It looks more like a (default) line-height of 1.


Instead, this looks like a simple matter of applying padding &  
margins to the wrapper div its paragraphs.


Now, if we're to take your gif literally, it looks like you've got  
17px between the two paragraphs.  That implies:


   div
   {
   padding-top: 20px;
   padding-bottom: 3px;
   }
   div p
   {
   margin-bottom: 17px;
   }

   
20px
   some text
17px
   some more text
17px
3px
   

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



---
Simon Pascal Klein
Graphic & Web Designer

Web: http://klepas.org
E-mail: kle...@klepas.org
Twitter: @klepas; http://twitter.com/klepas

This email is:   [ ] bloggable   [x] ask first   [ ] private.

Kaffee und Kuchen.



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Paul Novitski]

At 7/1/2009 07:19 PM, Ben Lau wrote:
This is what I'm trying to achieve: 
http://hellobenlau.net/wsg/eg.gif
So there'll be a div with padding top and bottom of 20px, and with 
text inside.



This doesn't look to me like a line-height topic at all. If you 
increase the line-height, the lines of text within each paragraph 
will separate from one another, and that isn't what your gif 
illustrates. It looks more like a (default) line-height of 1.


Instead, this looks like a simple matter of applying padding & 
margins to the wrapper div its paragraphs.


Now, if we're to take your gif literally, it looks like you've got 
17px between the two paragraphs.  That implies:


div
{
padding-top: 20px;
padding-bottom: 3px;
}
div p
{
margin-bottom: 17px;
}


20px
some text
17px
some more text
17px
 3px


Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Matijs]

>
> I frequently have to work with pixel-perfect design


http://aspnetresources.com/blog/dear_art_director.aspx


> , and I'm always having trouble with line-height in particular. Please take
> a look at this example: http://www.hellobenlau.net/wsg/index.html

 
>
> I'm wondering if there was a way to top align the text to its line-height.
> So say, with text size 20px, could the top of the 'T' be aligned to the top
> of the pink box?
> How does the 'gap' above and below the text gets calculated?


 As far as I know, browsers always render a bit of extra space above
and below to allow for accents, descenders, ascenders and such. Please
bear in mind that users tend to like line-heights of 1.2 or a bit
bigger. If you can, try to introduce a vertical rhythm in your texts
and your users will thank you even more :)


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] working with line-height

[Mark Henderson]

Joseph Taylor wrote:
> 
> David,
> 
> What form elements / what browsers do you mean?  I'm curious as I
haven't seen
> anyone make comments against "reset" stylesheets as of yet.
> 

To address the question (oops, forgot about that one) this is all I
could find in my bookmarks, but it is only in regard to the global reset
*{} but that is what David was referencing:

http://www.sitepoint.com/forums/showthread.php?t=517016  

And it looks like Georg (as per usual) has a decent working solution for
the problem.

Mark


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Gunlaug Sørtun]

Ben Lau wrote:


This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif
 So there'll be a div with padding top and bottom of 20px, and with 
text inside. If I do:


 some text 

The gap would include both the padding and the anonymous inline boxes
 (thanks Russ), which works out to be >20px. Could there perhaps be a
 way to calculate the amount of white-space for these anonymous
inline boxes?


Set the line-height in em, and approximate apparent whitespace for the
chosen font family - also in em, and you'll get something like this...

...with the same amount of whitespace (only the pixel-sized div-padding)
on top and bottom of div, regardless of font-size.

I have "broken" one paragraph in two, but you can use separate
paragraphs if you give the top and bottom one classes and only subtract
the apparent whitespace from top and bottom respectively.

I'm not trying to achieve exact look across all browsers, I 
understand it's impossible. But I'm trying to achieve to make it look
 like the design at least.. in 1 browser (just so my designers are 
happy).


Visual designers don't care much about reality on the web, so they
should be easy to please ;-)

FWIW: I often pull paragraphs and headlines this way, and most browsers
handle it quite well. I usually don't bother to count pixels though, as
in most cases it just has to look right.

Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Joseph Taylor]

To clarify what I do in the real world:

I use a reset stylesheet then reapply my own defaults so my own form 
elements appear fine.


You're correct about the !important declaration - that shouldn't be 
there for the resets.  My mistake.


Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 7/1/09 10:31 PM, Mark Henderson wrote:

Joseph Taylor wrote:
   

David,

What form elements / what browsers do you mean?  I'm curious as I
 

haven't seen
   

anyone make comments against "reset" stylesheets as of yet.

 


To reiterate David's point, I sent the below earlier (but due to server
updates many months ago my *true* email was changed, so it never made
it).

**

   

Ben,

On the spacing, the spaces you're fighting with are a combination of
line-height, margin and padding.

Each browser will implement their own defaults, so resetting the
defaults with a "reset" stylesheet has become a popular technique.
 


Agreed, and there are various implementations out there that do the job,
such as:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

although I personally find that to be slight overkill.


   

For example, if you apply a line like this to your page:

* {
   margin: 0 !important;
   padding: 0 !important;
   }

You should see everything collapse.

Follow that with a:

line-height: XXpx;

and you should see the results you're looking for.

 


That's a very big negative, given the use of !important on the global
reset (* {}) such an approach cannot be recommended. Actually, unless
I'm mistaken (and it is possible), the global reset has some issues with
forms and various other elements that once set cannot be undone, and has
since fallen by the way. There are other methods of achieving similar
results however (see Eric Meyer's reset link above).  At the very least,
if the global reset is your preferred choice, do *not* use !important
with it or all your margins and paddings are going to disappear on all
elements, and you are in for a world of hurt. Maybe you're a masochist
and that isn't such a bad thing :-P.

HTH
Mark


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

   



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] working with line-height

[Mark Henderson]

Joseph Taylor wrote:
> David,
> 
> What form elements / what browsers do you mean?  I'm curious as I
haven't seen
> anyone make comments against "reset" stylesheets as of yet.
>

To reiterate David's point, I sent the below earlier (but due to server
updates many months ago my *true* email was changed, so it never made
it).

**

> Ben,
> 
> On the spacing, the spaces you're fighting with are a combination of 
> line-height, margin and padding.
> 
> Each browser will implement their own defaults, so resetting the 
> defaults with a "reset" stylesheet has become a popular technique.

Agreed, and there are various implementations out there that do the job,
such as:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 

although I personally find that to be slight overkill.


> For example, if you apply a line like this to your page:
> 
> * {
>   margin: 0 !important;
>   padding: 0 !important;
>   }
> 
> You should see everything collapse.
> 
> Follow that with a:
> 
> line-height: XXpx;
> 
> and you should see the results you're looking for.
> 

That's a very big negative, given the use of !important on the global
reset (* {}) such an approach cannot be recommended. Actually, unless
I'm mistaken (and it is possible), the global reset has some issues with
forms and various other elements that once set cannot be undone, and has
since fallen by the way. There are other methods of achieving similar
results however (see Eric Meyer's reset link above).  At the very least,
if the global reset is your preferred choice, do *not* use !important
with it or all your margins and paddings are going to disappear on all
elements, and you are in for a world of hurt. Maybe you're a masochist
and that isn't such a bad thing :-P.

HTH
Mark


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Ben Lau]

Hi Georg,

Close, but this poses bit of layout issue surrounding the text.
This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif
So there'll be a div with padding top and bottom of 20px, and with text
inside. If I do:


   some text


The gap would include both the padding and the anonymous inline boxes
(thanks Russ), which works out to be >20px. Could there perhaps be a way to
calculate the amount of white-space for these anonymous inline boxes?

I'm not trying to achieve exact look across all browsers, I understand it's
impossible. But I'm trying to achieve to make it look like the design at
least.. in 1 browser (just so my designers are happy).

Thanks.
Ben

On Thu, Jul 2, 2009 at 10:34 AM, Gunlaug Sørtun  wrote:

> Ben Lau wrote:
>
>  http://www.hellobenlau.net/wsg/index.html
>>
>> I'm wondering if there was a way to top align the text to its line-height.
>> So say, with text size 20px, could the top of the 'T' be
>> aligned to the top of the pink box?
>>
>
> Is this what you want?
> 
>
> Note that you can't really get "pixel perfect" alignment across
> browser-land, as there will always be some em-to-pixel rounding deviation.
>
>Georg
> --
> http://www.gunlaug.no
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>

[]


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Joseph Taylor]

David,

What form elements / what browsers do you mean?  I'm curious as I 
haven't seen anyone make comments against "reset" stylesheets as of yet.


Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 7/1/09 7:49 PM, David Hucklesby wrote:

Joseph Taylor wrote re: http://www.hellobenlau.net/wsg/index.html

Ben,

On the spacing, the spaces you're fighting with are a combination of
 line-height, margin and padding.

Each browser will implement their own defaults, so resetting the 
defaults with a "reset" stylesheet has become a popular technique.


For example, if you apply a line like this to your page:

* { margin: 0 !important; padding: 0 !important; }

You should see everything collapse.

Follow that with a:

line-height: XXpx;

and you should see the results you're looking for.



Begging your pardon, but I think this solution may lead to new problems.
Using that "margin and padding reset" is likely to stop some form
elements working in older browsers. Better to define the margins and
padding you want on the elements that need them, in my opinion.

Specifying the line-height in pixels works differently from browser to
browser, some browsers increasing the line-height along with text size,
while others retain the same pixel height when text is enlarged.

I hesitate to post this, as I wish I had something more constructive to
contribute. Sadly, I don't know how to achieve what Ben asks.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Gunlaug Sørtun]

Ben Lau wrote:


http://www.hellobenlau.net/wsg/index.html

I'm wondering if there was a way to top align the text to its 
line-height. So say, with text size 20px, could the top of the 'T' be

aligned to the top of the pink box?


Is this what you want?


Note that you can't really get "pixel perfect" alignment across
browser-land, as there will always be some em-to-pixel rounding deviation.

Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[David Hucklesby]

Joseph Taylor wrote re: http://www.hellobenlau.net/wsg/index.html

Ben,

On the spacing, the spaces you're fighting with are a combination of
 line-height, margin and padding.

Each browser will implement their own defaults, so resetting the 
defaults with a "reset" stylesheet has become a popular technique.


For example, if you apply a line like this to your page:

* { margin: 0 !important; padding: 0 !important; }

You should see everything collapse.

Follow that with a:

line-height: XXpx;

and you should see the results you're looking for.



Begging your pardon, but I think this solution may lead to new problems.
Using that "margin and padding reset" is likely to stop some form
elements working in older browsers. Better to define the margins and
padding you want on the elements that need them, in my opinion.

Specifying the line-height in pixels works differently from browser to
browser, some browsers increasing the line-height along with text size,
while others retain the same pixel height when text is enlarged.

I hesitate to post this, as I wish I had something more constructive to
contribute. Sadly, I don't know how to achieve what Ben asks.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Joseph Taylor]

Ben,

On the spacing, the spaces you're fighting with are a combination of 
line-height, margin and padding.


Each browser will implement their own defaults, so resetting the 
defaults with a "reset" stylesheet has become a popular technique.


For example, if you apply a line like this to your page:

* {
  margin: 0 !important;
  padding: 0 !important;
  }

You should see everything collapse.

Follow that with a:

line-height: XXpx;

and you should see the results you're looking for.

Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 7/1/09 11:57 AM, Chris F.A. Johnson wrote:

On Thu, 2 Jul 2009, Ben Lau wrote:


I frequently have to work with pixel-perfect design,


There is no such thing.


and I'm always having trouble with line-height in particular. Please
take a look at this example:
http://www.hellobenlau.net/wsg/index.html


Where you state, "This text size is 11px." it is not; it is 18px
in my browser.

I'm wondering if there was a way to top align the text to its 
line-height.
So say, with text size 20px, could the top of the 'T' be aligned to 
the top

of the pink box?


Align it to the top of its container.


How does the 'gap' above and below the text gets calculated?


What do the W3C specs say? If they don't say, then browsers can
use whatever formula they like.





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Russ Weakley]

Hey Ben,

That additional space you see above the letters is set aside for  
diacritical marks (umlaut etc).


If you replace the content within the 23 pixel paragraph with the  
content below, you should see that all the special character marks  
sit above the letters and fill this empty space.


Try adding this to the 23 pixel paragraph:
ÙŸÖÕÔÓÒÑÏÎ 
ÍÌËÊÈÅÄÃÀ


How would you remove this space? The mind boggles. You are trying to  
mess with anonymous inline boxes. The actual inline boxes that wrap  
around text.

http://www.w3.org/TR/CSS2/visuren.html#anonymous

I do not think that reducing the line height will resolve the issue  
as this will more than likely close the space BETWEEN lines - not  
reduce the height of the anonymous inline boxes themselves.


Thanks
Russ


On 02/07/2009, at 1:20 AM, Ben Lau wrote:


Hi list,

I frequently have to work with pixel-perfect design, and I'm always  
having trouble with line-height in particular. Please take a look  
at this example: http://www.hellobenlau.net/wsg/index.html


I'm wondering if there was a way to top align the text to its line- 
height. So say, with text size 20px, could the top of the 'T' be  
aligned to the top of the pink box?

How does the 'gap' above and below the text gets calculated?

Thanks
Ben

[]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] working with line-height

[Chris F.A. Johnson]

On Thu, 2 Jul 2009, Ben Lau wrote:


I frequently have to work with pixel-perfect design,


There is no such thing.


and I'm always having trouble with line-height in particular. Please
take a look at this example:
http://www.hellobenlau.net/wsg/index.html


Where you state, "This text size is 11px." it is not; it is 18px
in my browser.


I'm wondering if there was a way to top align the text to its line-height.
So say, with text size 20px, could the top of the 'T' be aligned to the top
of the pink box?


Align it to the top of its container.


How does the 'gap' above and below the text gets calculated?


What do the W3C specs say? If they don't say, then browsers can
use whatever formula they like.


--
   Chris F.A. Johnson  
   ===
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] working with line-height

[Ant Tears]

Hi Ben,
It seems that the short answer to your question is a base line-height of 0.8 
(yup, unitless).
My guess would have been the value 1 but I don't know enough about browser 
default styles to say why 0.8 seems to work.
I've only checked this using IE8 and Firefox 3.5 using the developer tool bar, 
so there's a fair chance I'm talking crap, but it's probably an avenue worth 
investigating.

As with so many things CSS my knowledge comes directly from Eric Meyer, so I'll 
link his site.
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Cheers,
Ant

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Ben Lau
Sent: 01 July 2009 16:20
To: wsg@webstandardsgroup.org
Subject: [WSG] working with line-height

Hi list,

I frequently have to work with pixel-perfect design, and I'm always having 
trouble with line-height in particular. Please take a look at this example: 
http://www.hellobenlau.net/wsg/index.html

I'm wondering if there was a way to top align the text to its line-height. So 
say, with text size 20px, could the top of the 'T' be aligned to the top of the 
pink box?
How does the 'gap' above and below the text gets calculated?

Thanks
Ben

[]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


IMPORTANT NOTICE:
This email contains proprietary information, some or all of which may be 
legally privileged. It is for the intended recipient only. If an addressing or 
transmission error has misdirected this email, please notify the author by 
replying to this email. If you are not the intended recipient you must not use, 
disclose, distribute, copy, print or rely on this email. In addition you must 
erase all information contained in this email immediately after notifying the 
author. No liability is accepted for viruses and it is your responsibility to 
scan attachments (if any). Unless related to the business of the firm, the 
opinions expressed within this email are the opinions of the sender and do not 
necessarily constitute those of Conscia Enterprise Systems Ltd, whose 
registered address is 280 St Vincent Street, Glasgow, G2 5RL, United Kingdom.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] working with line-height

[Ben Lau]

Hi list,

I frequently have to work with pixel-perfect design, and I'm always having
trouble with line-height in particular. Please take a look at this example:
http://www.hellobenlau.net/wsg/index.html

I'm wondering if there was a way to top align the text to its line-height.
So say, with text size 20px, could the top of the 'T' be aligned to the top
of the pink box?
How does the 'gap' above and below the text gets calculated?

Thanks
Ben

[]


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***