SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    controlling text size...

    how is it done, so no matter what browser our text size their viewing with the text stays the same. and tutorials or help that someone knows?

  2. #2
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "There's no justice like angry mob justice!" --Seymour Skinner

  3. #3
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the only way to have text size stay the same across the different browsers and screen resolutions is to use pixel (px) font sizing, but this has certain usability drawbacks so it shouldnt really be used for important areas, such as navigation and content.

  4. #4
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been using "pt" sizes and found I STILL can't change the text sizes. I wonder why?

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    geiger, points are an absolute font size measurement. Use relative sizing keywords to allow people to adjust the font size on their own.

  6. #6
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which sizing units are relative?

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    font-size: xx-small | x-small | small | medium | large | x-large | xx-large;

  8. #8
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm okay. Thanks. What are those relative to in normal point sizes?

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're relative to the individual user's browser settings. This is why they're not commonly used. You can't fully control their display properties.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    USA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use percent values for relative sizing, if you please.

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    You can't fully control their display properties.
    ...which is a good thing, because it means that your users can control the text size.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    found out how to controll it, i actually created my text into a table, heres what i did:

    <div align="left"><tr>
    <td width="67" height="72" align="right"><font style="font-family: Verdana, Arial, Sans-serif, tahoma; font-size: 10px; font-style: normal; text-decoration: none; color: #14262D">

    -and then created my text using the same code within the text, like this:
    <b><font style="font-family: Verdana, Arial, Sans-serif, tahoma; font-size: 10px; font-style: normal; text-decoration: none; color: #000000">[</b></font><b><a href="services.html">service</a></b><b><font style="font-family: Verdana, Arial, Sans-serif, tahoma; font-size: 10px; font-style: normal; text-decoration: none; color: #000000">]</b></font></td></div>

    -and walla! it works

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by iTec
    the only way to have text size stay the same across the different browsers and screen resolutions is to use pixel (px) font sizing
    Hi Nicholas,

    PX won't keep text size the same if screen resolution changes. For example, I had to change from 1600x1200 to 1182x864 because most web text was unreadable - too small.

    Doesn't work on all browsers either - Mac users will see a different size to Windows users due to different OS DPI.

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by geiger
    hmm okay. Thanks. What are those relative to in normal point sizes?
    Hi Geiger,

    Be aware that there are big variations from browser to browser for those keywords, especially at the extreme ends ["x" & "xx"]

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Joel
    You can also use percent values for relative sizing, if you please.
    Hi Joel,

    "em" might be better - if I remember my reading correctly, there are more bugs around using percent than using em.

    Besides, you'll often want to use percent for layout so it might be less confusion-prone to use em for text - especially if you're as easily addled as I am

    Another plus for "em" is that you can easily use it for things you would like to vary with text size - eg padding, spacing, line height, maybe margins. This would be difficult with percent, since it relates to the parent rather than to the font.

  16. #16
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What the hell is an em?

  17. #17
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    em is short for "m" space, which in typographic terms refers to the width of an "M". It goes back to the days of hand presses.

    However, while EM is the preferred method from the W3C, I don't use it becase of severe inheritance problems. Basically, if you style 2 elements using EM, then nest one inside the other, the child element will inherit the size of the parent IN ADDITION to the size of itself.

    For example, I had a P tag styled to .7em, then an anchor tag (A) style to .7em as well. The regular text was the correct size but the anchor was several sizes too small.

    I use point (pt) and have not yet encountered any problems with it.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by geiger
    What the hell is an em?
    em is in practice a relative measure for font size which works very like percent.

    As far as I know, all fixed font sizes [eg 16pt, 12px etc] actually refer to the length of the letter "m" - not sure though.

    For us, specifying a font size of 1em is the same as specifying 100% - in both cases, the font size of the parent item will be used. If you specify 1.2em, then the text will be 20% larger than the parent text [same as specifying 120%].

    I'm starting to form the opinion that a good compromise for pro designers in current conditions [client expectations] might be to specify a PX size for the <body> tag, and then use "em" for all page elements. This should be more forward-compatible than using PX all over the place, while still allowing the designer to control the base text size.

    If no font sizes are specified at all, then 1em will be equal to the user's default browser text size - which can vary quite a bit.

  19. #19
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very interesting topic

    Ok, i'm not getting all this.

    I've been using fixed font-sizes ( in pixels ) but i recently read an article that some people really need to have to option to enlarge the text-size.

    So what i'm actually asking is ... how can i set the size for every thing as links , normal text , ... and still give people the option to enlarge the font using the VIEW > TEXTSIZE of the browser ?

  20. #20
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a good question:
    Any way to use css to define text using the normal sizes of a webpage? "1", "2", etc.

  21. #21
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by geiger
    Here's a good question:
    Any way to use css to define text using the normal sizes of a webpage? "1", "2", etc.
    You'd best read this.

  22. #22
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    USA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use em's when I can, but for font-size they are too inconsistent. Percents are much more predictable and scale better for people that modify their browser's font size.

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Joel
    I use em's when I can, but for font-size they are too inconsistent. Percents are much more predictable and scale better for people that modify their browser's font size.
    Hi Joel,

    Are you saying that you get better results from using say 120% than from using 1.2em?
    If so, any idea why they differ?

    Thanks,

  24. #24
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    USA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike-

    It should be noted that (from my experience) this is an IE problem. I did not notice this problem when changing the browser text size in Mozilla or Opera.

    What I have found is that percents and em's are almost always identical when IE is set to the normal text size. However, when the browser setting is switched to a larger or smaller size, em's make a more drastic shift in size than do percents.

    I didn't notice this until one of my users (who has his text size set to "smaller") e-mailed me about the text on my site being tough to read. After a bit of troubleshooting, I found that it was the em sizes that were causing problems. Switching to percents solved it.

    Hope this helps!

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Joel,

    Interesting info - thanks

    Sounds like an inheritance quirk of some sort - weird!


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
  •