Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Allowing a user to change font size

    I'm posting this here because I thought this might be a css kinda thing - but please let me know if this is more of a javascript thing

    I know I've seen a post about it somewhere on this site about offering a site's viewers the ability to change font size - I've seen in implemented on this site using the ctrl+wheel which adjusts the browser text size

    on ABCnews.com they have clickable images that change the font size but it doesn't affect the browser text size - only that particular article's font size changes

    I looked at the source for the article on abcnews.com and there was a CDATA render readability() line in there so I don't know how it's done

    If anyone can point me in the direction of how abcnews.com does theirs I would be most appreciative...I also did a quick search on sites like dynamic drive thinking it might be a javascript but to no avail

    I tried to do a search in this site for that thread and maybe I just didn't use the right keywords but I couldn't find it

    Thanks!

  • #2
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harlequin2k5
    .. a css kinda thing - but please let me know if this is more of a javascript thing
    It's done with Javascript and CSS. There are some examples at dynweb: http://www.dyn-web.com/dhtml/sizefont/

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A simple way is to create different stylesheets for different font sizes then use a javascript style switcher to switch stylesheets.

    Edit, Beaten to it by two mins.
    Last edited by mark87; 12-02-2005 at 10:34 PM.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    As long as you don't specify font sizes in pixels or points and use one of the other methods of specifying font size your visitors will be able to override it to make the fonts larger or smaller using the font size option built into their web browser and no Javascript is required.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall
    As long as you don't specify font sizes in pixels or points and use one of the other methods of specifying font size
    If the entire site is set to 10px I can use 1em to achieve the same size right? and then be able to employ one of the methods listed previously?

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    If you use a Javascript method you don't need ems… All browsers can resize text sized in pixels except (wait for it…) Internet Explorer, which is why ems are preferred for accessibility.

    Personally, if resizing text was to be a priority in the design I would use the Javascript method over relying on the browser-based one (although I'd still use ems) as most users have no idea their browser can resize anything.

    Here's a recently published intro to the land of em: http://24ways.org/advent/an-explanation-of-ems

    Hope it helps...

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If the entire site is set to 10px...
    Not really a good idea to set the font size in pixels, IE does not allow the user to overide the size in their browser.

    I'm not quite sure if 10px = 1em. I always thought 1em was relative to something? Normally I just play with the sizes until I'm happy with it.

  • #8
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I think I set the font size to 10 px in the body and yes em's are relative to the size of it's div or whatever

    and thank you for the tip about ie and px - never thought of that - and now in a roundabout way I think you've offered me what may be a better solution

    my site is designed for 800x600 and I think it looks just fine - but in 1024x768 the right column is just a lil small and I want my users to be able to adjust this

    rmdedek - thanks for the article
    mark - I will look into the js style switcher
    span & felgar - thanks for your help too!


  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Take a look at this font resizing script

    http://www.dyn-web.com/dhtml/sizefont/
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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