What does "font:13px/1.231" syntax mean?

[david.karr]

I'm a CSS newbie, but I was browsing through the css files in the YUI
library, and I noticed the following line:

body {font:13px/1.231 arial,helvetica ,clean,sans-serif;*font-
size:small;*fon t:x-small;}

I understand everything but the "/1.231". Is that something like a
multiplier on the EM size? I can't find an example of that in the CSS
spec.

[John Hosking]

david.karr wrote:

I'm a CSS newbie, but I was browsing through the css files in the YUI
library, and I noticed the following line:

body {font:13px/1.231 arial,helvetica ,clean,sans-serif;*font-
size:small;*fon t:x-small;}

I understand everything but the "/1.231". Is that something like a
multiplier on the EM size? I can't find an example of that in the CSS
spec.

It's line-height, cleverly hidden at
http://www.w3.org/TR/CSS21/visudet.h...ef-line-height , which one
can find (if one thinks to look there) by looking at
http://www.w3.org/TR/CSS21/fonts.html#font-shorthand .

Yes, without units it's a multiplier of the element's font size (viz.
http://www.w3.org/TR/CSS21/visudet.html#x25).

If you understand everything else, you understand they're suggesting a
somewhat small font-size, fixed in px so that e.g. IE6 users can't
increase the text to make it more legible.

What *I* want to know is, what does *font-size:small;*fon t:x-small; mean?

--
John
Read about the UIP: http://improve-usenet.org/

[david.karr]

On May 1, 10:30 am, John Hosking <[e-mail] sking.name.INVA LID>
wrote:

david.karr wrote:

I'm a CSS newbie, but I was browsing through the css files in the YUI
library, and I noticed the following line:

body {font:13px/1.231 arial,helvetica ,clean,sans-serif;*font-
size:small;*fon t:x-small;}

I understand everything but the "/1.231". Is that something like a
multiplier on the EM size? I can't find an example of that in the CSS
spec.

It's line-height, cleverly hidden athttp://www.w3.org/TR/CSS21/visudet.html#pr opdef-line-height, which one
can find (if one thinks to look there) by looking athttp://www.w3.org/TR/CSS21/fonts.html#font-shorthand.

Yes, without units it's a multiplier of the element's font size (viz.http://www.w3.org/TR/CSS21/visudet.html#x25).

Thanks.

If you understand everything else, you understand they're suggesting a
somewhat small font-size, fixed in px so that e.g. IE6 users can't
increase the text to make it more legible.

What *I* want to know is, what does *font-size:small;*fon t:x-small; mean?

From the "Learn YAHOO" book:

"The final two rules in the <bodyselector , *font-size:small and
*font:x-small, are used to set the font-size in IE (which makes better
use of the CSS keywords for font-size than it does of percentages) and
addresses text-rendering peculiarities in older versions of IE, which
can incorrectly interpret the font-size keywords specified by the CSS1
standard thus making all of your fonts appear bigger than they should."

[Felix Miata]

On 2008/05/01 10:10 (GMT-0700) david.karr apparently typed:

I'm a CSS newbie, but I was browsing through the css files in the YUI
library, and I noticed the following line:

body {font:13px/1.231 arial,helvetica ,clean,sans-serif;*font-
size:small;*fon t:x-small;}

I understand everything but the "/1.231". Is that something like a
multiplier on the EM size? I can't find an example of that in the CSS
spec.

It means Yahoo recommends web authors couple tiny text with line-height (leading) equal to 123.1% of the text size. 13px is a good recommendation to avoid (as is font-size:small and font-size: x-small), though the /# CSS
syntax is a perfectly fine method of unifying native line-heights that might otherwise be undesirably large or small. http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
--
". . . . in everything, do to others what you would
have them do to you . . . ." Matthew 7:12 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://fm.no-ip.com/

[John Hosking]

david.karr wrote:

On May 1, 10:30 am, John Hosking wrote:

>david.karr wrote:

>>I'm a CSS newbie, but I was browsing through the css files in the YUI
library, and I noticed the following line:
body {font:13px/1.231 arial,helvetica ,clean,sans-serif;*font-
size:small;*f ont:x-small;}

>What *I* want to know is, what does *font-size:small;*fon t:x-small; mean?

From the "Learn YAHOO" book:

"The final two rules in the <bodyselector , *font-size:small and
*font:x-small, are used to set the font-size in IE (which makes better
use of the CSS keywords for font-size than it does of percentages) and
addresses text-rendering peculiarities in older versions of IE, which
can incorrectly interpret the font-size keywords specified by the CSS1
standard thus making all of your fonts appear bigger than they should."

Okay, I can appreciate the IE font-size keyword problem (although I've
never had to wrestle with it myself).

What I'm more puzzled by is the "*font-family" notation. I've never seen
it before, and I can't get it to validate to any CSS level. Is there
some interpreter in the Yahoo YUI thingy that does something useful with
these weird declaration formats (and then cleans it out of the style
sheet presented to the browser)? Does the asterisk mean something in
particular?
--
John