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

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • david.karr

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

    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

    #2
    Re: What does "font:1 3px/1.231" syntax mean?

    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/

    Comment

    • david.karr

      #3
      Re: What does "font:1 3px/1.231" syntax mean?

      On May 1, 10:30 am, John Hosking <J...@DELETE.Ho 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."

      Comment

      • Felix Miata

        #4
        Re: What does &quot;font:1 3px/1.231&quot; syntax mean?

        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/

        Comment

        • John Hosking

          #5
          Re: What does &quot;font:1 3px/1.231&quot; syntax mean?

          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

          Comment

          Working...