homepage Welcome to WebmasterWorld Guest from 54.161.202.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Inline Model Height Discussion
A critical pixel precise understanding of line height/font-size
JAB Creations




msg:1200193
 7:16 pm on Feb 21, 2006 (gmt 0)

I've passively noticed over time how the height of inline elements do not seem to add up correctly. I recently did a search online for a CSS inline model but could not find anything. For my questions I have a reference page below...

Here are some of my questions that I'm looking for clarification on...

How come font-size: 10px; has text rendered 8px in height? When font-size is set to 14px it renders the text 10px.

Besides the missing 2px in height of the font itself what is the additional 2px of padding coming from if the border, margin, and padding are all set to 0px?

Why does line-height act as a margin for spans but act as a padding for paragraphs? Which is the correct behavior?

It seems that paragraphs have had inline-block display yet other elements still are not supported? I know paragraphs are supposed to be inline but if they are how come their width expands like a block element?

Here are the examples I've been using with Firefox 1.5, Opera 8.01, 8.52, and 9PR2.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Inline Model</title>
<style type="text/css">
body
{
background: #000;
}
br
{
border: 0px;
margin: 0px;
padding: 0px;
}
p
{
background: #ff0;
font-size: 14px;
line-height: 14px;
border: 0px;
margin: 0px;
padding: 0px 0px 0px 20px;
}
p.p2
{
background: #0f0;
font-size: 14px;
border: 0px;
margin: 0px;
padding: 0px 0px 0px 40px;
}
span
{
background: #f0a;
font-size: 14px;
border: 0px;
padding: 0px;
margin: 0px;
}
span.s1
{
background: #f00;
font-size: 14px;
line-height: 14px;
}
span.s2
{
background: #0f0;
font-size: 10px;
line-height: 14px;
}
</style>
</head>

<body>
<div>
<p>P - THIS P'S FONT-SIZE IS SET TO 14PX BUT RENDERS AS 10PX.</p>
<p class="p2">P - SAME AS ABOVE BUT WITHOUT LINE-HEIGHT DECLARED.</p>
<span>SPAN - 14 PX NORMAL SPAN RENDERED 16PX HIGH WITH FONT-SIZE RENDERING 10 PX IN HEIGHT.</span>
<br />
<span class="s1">SPAN ONE</span><span class="s2">SPAN TWO</span>
<br />
<span class="s1">SPAN ONE</span>
<br />
<span class="s2">SPAN TWO</span>
<br />
<span class="s2">SPAN TWO</span>
</div>
</body>
</html>


 

bedlam




msg:1200194
 8:05 pm on Feb 21, 2006 (gmt 0)

Sounds as though a review of some basics is in order first:

How come font-size: 10px; has text rendered 8px in height? When font-size is set to 14px it renders the text 10px.

Where are you measuring from? Type is measured from the tops of the ascenders to the bottoms of the descenders [wiu.edu]. Add some lower-case letters to your examples, and you'll see this in action.

Besides the missing 2px in height of the font itself what is the additional 2px of padding coming from if the border, margin, and padding are all set to 0px?

First, top and bottom margins do not apply to inline elements [w3.org]:

w3c: These properties have no effect on non-replaced inline elements.

Secondly, it sounds like what you're talking about is the line-height [w3.org], also known as leading [en.wikipedia.org]. Traditionally, line-height is the distance from the baseline [en.wikipedia.org] of one line of type to the next--this means that if (line-height == font-size), the ascenders in the second line will touch the descenders in the first. In cases where (line-height > font-size), there will be extra space.

All of this is further complicated in html by the need to render things in boxes (so, line-height becomes the measure of the box a line sits in rather than a measurement from a point on one line to a point on the next/previous one) and the vertical-align [w3.org] property.

Why does line-height act as a margin for spans but act as a padding for paragraphs? Which is the correct behavior?

What does this question mean? Line-height has no effect at all on a paragraph per-se, only on its contents... You might want to re-read the w3c's description of Inline-level elements and inline boxes [w3.org], but it's tough going.

It seems that paragraphs have had inline-block display yet other elements still are not supported? I know paragraphs are supposed to be inline but if they are how come their width expands like a block element?

Not according to the specs -- html 4.01 strict [w3.org] html 4.01 transitional [w3.org] xhtml strict [w3.org] xhtml transitional [w3.org] -- they all list p as a block level [w3.org] element:

w3c:
<!ENTITY % block
"p ¦ %heading; ¦ div ¦ %lists; ¦ %blocktext; ¦ fieldset ¦ table">

-b

JAB Creations




msg:1200195
 8:23 pm on Feb 21, 2006 (gmt 0)

Thanks for such a quick and detailed reply...I was going to add that I found font-size-adjust.

Basically my goal is to set the font-size to be rendered as so. The way I am measuring this is by taking a screenshot of the text in the browser, taking it over to a graphics editor, crop the text at the top and bottom of an uppercase letter (such as I) and removing all vertical spacing above the top and bottom most portions of where the text reaches.

So my new question is how do I make font-size: 12px actually render the font as 12px tall? In physical measurement the very top and the bottom of an uppercase I would vertically measure 12px.

It makes absolutely no sense at all to subtract vertical height with other attributes when the font-size is specifically declared.

My understanding of font-size-adjust is of course vague. Is it a ratio? Will it work or not work when I use it to make 12px fonts to be rendered as 12px with the same ratio (if it is a ratio) between various fonts or are we marching straight in to NS4/IE6 type territory?

John

Wlauzon




msg:1200196
 10:08 pm on Feb 21, 2006 (gmt 0)

Just my personal observation, but I seem to have better luck using em's instead of pixels for fonts.

DrDoc




msg:1200197
 1:49 am on Feb 22, 2006 (gmt 0)

So my new question is how do I make font-size: 12px actually render the font as 12px tall? In physical measurement the very top and the bottom of an uppercase I would vertically measure 12px.

a) That depends on which font you are using
b) 12px!= 12px height


___________________________________________________TOP OF TEXT
/¦···¦\····/¦·······¦······················¦···\···
·¦···¦·\··/·¦·······¦··········¦···········¦····¦··
·1···¦··\/··¦····___¦····____··············¦___/···MIDDLE
·2···¦······¦···/···¦···/···¦··¦··\····/···¦·\·····
·¦···¦······¦··¦····¦··¦····¦··¦···\··/····¦··\····
·p···¦······¦···\___¦···\___¦··¦····\/·····¦···\···BASELINE
·x··························¦·······/··············
·¦··························¦······/···············
·¦/·····················\··/······/················BOTTOM OF TEXT
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

12px is measured from top to bottom, including any ascenders/descenders. But, 12px Verdana is not the same as 12px Times New Roman or 12px Wide Latin.

You simply have to figure it out for each font.

But, all that is explained in great detail, along with examples, in the link provided by bedlam: [wiu.edu...]

Wlauzon




msg:1200198
 4:23 am on Feb 22, 2006 (gmt 0)

In fact, 12px Verdana is about 20% bigger than 12px Arial....

bedlam




msg:1200199
 4:53 am on Feb 22, 2006 (gmt 0)

In fact, 12px Verdana is about 20% bigger than 12px Arial....

Nope. Not in terms of the way font size is specified it isn't. As mentioned above, 12px means that the distance from the bottom of letters such as p, g, q and y to to the tops of letters such as t, f, A etc. is 12px. If you take a screen grab of some 12px Arial beside some 12px Verdana, you will find that each measures 12px.

What is definitely much larger in Arial than in Verdana is the x-height [en.wikipedia.org] of the letters. In Firefox at least--the only place I looked--the default line-height for Arial seems also to be 15px versus Verdana's 14px. This could also make a noticeable difference over a hundred lines or so of text.

-b

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved