Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Changing site-wide font size and using the YUI css files (advanced question)

Expand Messages
  • Nate Koechley
    Hey Michael, ... It s a good question. Let me try to explain the situation: This bit of CSS is the key CSS declaration that sets the base font size in YUI
    Message 1 of 2 , May 18, 2008
    View Source
    • 0 Attachment
      Hey Michael,

      On May 15, 2008, at 1:26 PM, Michael Hasenstein wrote:

      > The default is a
      > little small, especially when you also use smaller fonts in
      > paragraphs, to mark less important content. It's hardly readable.
      >
      > Not a problem, you say? Well... let's see...
      >
      > I could just set this CSS:
      > body {
      > font-size:108%;
      > }
      > The result is HUGE, not just a small increase.
      >
      > I could overwrite the YUI fonts.css default of
      > body {
      > font:13px/1.231 arial,helvetica,clean,sans-serif;
      > *font-size:small;
      > *font:x-small;
      > }
      > That seems dangerous. All measurements in the YUI CSS rely on this
      > setting. Page widths, margins... I get 801px instead of 750, if I
      > switch to 14px font(em)-size and use the 750px page layout, for
      > example. Should I re-write everything? I don't know how they got all
      > their MS IE corrections - when I claim to be an expert I must also add
      > I'm a firefox guy, and like to rely on the YUI CSS for this basic IE
      > compatibility. Besides, I would like to be able to offer to switch
      > between three basic sizes (hmmm, maybe I CAN do that using the second
      > method above, after all, it's going to be a user-made choice and then
      > it's their screen and business to live with the result).
      >
      > What I did so far was to specify for all elements individually a size
      > of 108% (that's 14px in YUI CSS), for p, li, and so on.
      > Problem:
      > <p>This is text and <strong>this is bold text</strong></p>
      > The text inside <strong> is LARGER than the other one! If I use <span>
      > instead of <p> in the same example it looks okay, but then I don't set
      > a size for <span>. And no, I also don't set a size for strong, only
      > font-weight:bold. No idea why the bold text would be larger??? (okay,
      > maybe I'm not THAT much of an expert? Well, let's see if YOU can
      > explain this... :-) )
      >
      > Any suggestions? Is everyone fine with the 13px default? Especially
      > end-user websites these days use less stuff on the page and larger
      > text. Not everyone designs a crowded portal page or AJAX webapp, where
      > a small font-size is fine and indeed wanted by users... How did you
      > solve this problem (if you had it)?



      It's a good question. Let me try to explain the situation:

      This bit of CSS is the key CSS declaration that sets the base font
      size in YUI Fonts. As you can see, it sets the font size three times,
      using a different technique in each case.

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


      Let's consider them them line-by-line: The first line sets a base size
      of 13 pixels. LIne-height is set to the equivalent to 16 pixels, but
      relatively and without units. We would be done here if not for IE,
      which, unfortunately, does not allow its users to adjust their font
      size when font-size is set in pixels. To preserve this important
      usability feature we override the pixel-based value with a relative
      keyword value instead. *font-size:small is equivalent to 13pixels when
      IE is in Standards mode. But when it's in Quirks mode small is
      equivalent to 16px. Therefor the third lines exploits another IE
      parsing error when it users the font shorthand property but only
      provides x-small. (Because only one of the many required shorthand
      values is provided, IE in Standards mode ignores this declaration.) In
      Quirks mode, IE renders "x-small" as 13px.

      In review: The first line is for everybody. The second line is IE when
      in Standards mode. The third line is IE in Quirks mode.

      The benefit to this approach is that all browsers' body's font size is
      13px (or the relative equivalent) and users' ability to adjust their
      own font size via browser controls is preserved.

      The downside is that setting non-13px base size is difficult.

      What I have most commonly suggested is that you made the global
      adjustment on a node descended from the lowest YUI Grids node. In this
      example everything within div#foo will start at 14px without impacting
      Grids' prerequisite settings:

      <style>#foo {font-size:108%;}</style>
      <body>
      <div id="doc" class="yui-t1">
      <div class="yui-g">
      <div class="yui-u">
      <!-- yui grids ends here; your content begins -->
      <div id="foo">

      While not as efficient/elegant as I'd like, an approach like above is
      general sufficient. Other there are a limited number of nodes that
      need to be set, sometimes as few as div#header, div#footer,
      div#sidebar, div#main...

      If that doesn't suit you, another option is to ignore IEs shortcomings
      and set all sizes in pixels. I don't recommend this drastic approach,
      but the choice if yours.

      Hope that makes sense. If you have thoughts or suggestions -- or more
      questions -- please let me know.

      Thanks,
      Nate
    Your message has been successfully submitted and would be delivered to recipients shortly.