SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling font size?

    Is the user able to adjust font sizes if I set the font size in px?
    The reason I ask: if I have a 20px square div with text fitting in it snugly and the user changes their browser fonts to a larger size will some of the text not be seen?

    How can I set my fonts so that the user cannot destroy my layouts?

    Brad

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    px fonts can be resized in all modern browsers apart from MSIE/Win.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't this against all the accessibilty guidelines?
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to MSIE/Win's unique failure to meet that part of the developers standards, using px fonts is discouraged for site owners wishing to maximise the practical accessibility of their sites.

    px fonts sizes are an approved part of the W3C spec which puts the onus on the browser developers to ensure that px fonts can be resized by the user.
    The only modern browser failing to meet that particular specification is MSIE/Win.
    It's really only MSIE/Win's popularity that brings the accessibility of px into question (in practical terms) and spins the issue of accessibility against px fonts.

    The W3C WAI guidelines encourages the use of relative, rather than absolute, font sizes - which considers pt font sizes to be effectively the same as px font sizes in this regard.


    If you build your site according to standards (which endorses the use of px font sizes), then I strongly doubt anyone could officially challenge your use of them on the grounds that their browser of choice doesn't meet development guidelines.


    It basically comes down to interpretation of the following WAI passage:
    3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority*2]

    For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable
    http://www.w3.org/TR/WAI-WEBCONTENT/...e-presentation


    Additional reading:

    http://cookiecrook.com/sxsw/2004/demo/
    http://www.alistapart.com/articles/sizematters/
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    How can I set my fonts so that the user cannot destroy my layouts?
    Bill has given you all the information you need to make a decision on what to use I will only add that the only way to stop the text breaking out of your box is to make the box increase with the text. (I realise this may not be suitable for your layout especially if the box needs to be sized in relation to some other fixed element such as an image etc).

    Anyway it may be of some use
    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {font-size:100.1%}/* the .1 is for an opera bug - leave it out if you're not worried about it*/
    #outer{
    font-size:1.0em;
    width:1.8em;
    height:1.2em;
    border:1px solid #000;
    background:#ffffcc;
    }
    </style>
    </head>
    <body>
    <div id="outer">123</div>
    </body>
    </html>
    Paul

    [edit]
    A useful article about font-sizes can be found here:
    http://www.thenoodleincident.com/tut...x_lesson/font/
    [/code]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •