SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Visitor Control Font Size On A Website

    Sitepoint Members,

    On a number of sites I see they have a small "A" next to a larger Awhich is next to an even laeger A. It indicates to the visitor that the visitor can chage the font size for just that site - not all the sites the visitor visits as View - Zoom on the browser does. You know where I can get the code to do that?

    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You'd normally do this with JavaScript. E.g.

    http://www.alistapart.com/articles/alternate

    But really, users can so easily change the font size themselves that I consider something like font-sizing buttons to be redundant.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,377
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Chris77 View Post
    It indicates to the visitor that the visitor can chage the font size for just that site - not all the sites the visitor visits as View - Zoom on the browser does.
    That depends on the browser. In Firefox, zoom only affects the site(s) for which I zoomed.

  4. #4
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,600
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    That depends on the browser. In Firefox, zoom only affects the site(s) for which I zoomed.
    But isn't that also true of the on-page buttons that Chris is referring too? In other words, whichever mechanism you use for changing the font size, it will only affect the current page or site. Or have I misunderstood the question?

    Mike

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,377
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    I think I might have confused the issue here. I thought Chris was asking about adding font resize buttons to a site, in order to add specific functionality not available via the browser. (i.e. if you use the browser to zoom, it zooms all sites, not just the one you happen to be viewing, whereas the buttons apply to the one site only.) I don't know about other browsers, but Firefox only zooms for a specific site (and remembers the zoom setting next time you visit), reverting to its default settings for other sites. I just thought it was worth mentioning.

  6. #6
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I was wrong on that. I thought View-Zoom would change font size for all websites. Still, I would like to have the ability to change size repeatedly by clicking again and again. It was getting popular for a while and now few sites have it. Those that do don't show the code for it in view source. I need it because font-weight is close to useless - no change between 400, 500, and 600, at least not on my site. The text is too heavy and the next actual change down in thickness of the letters is too light.

    Thanks,

    Chris

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    I was wrong on that. I thought View-Zoom would change font size for all websites.
    In most browsers it does – certainly in IE8 and Opera, the last set zoom becomes the default for any new windows or tabs, although it doesn't affect other windows or tabs that you already have open (even if you load a new page into them). I'm not aware of a way to set a site-specific zoom on Opera, other than by applying a custom stylesheet to particular sites.

  8. #8
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,600
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    That's right, Chris. The sort of buttons you described are site-specific. (And, when you think about it, that's how they should be. It would be bad behaviour for one site to interfere with the settings of another site.)

    If you are sure you want to add this feature to your site, there are plenty of examples available to help you out. For example, you might take a look at the code shown here: http://www.dynamicdrive.com/dynamici...extresizer.htm

    But I would question the need. You say it was popular for a while but not so much now. That's not surprising. After all, if you encounter a page where the text is too small, what do you do? Do you use the standard resizing feature built into your browser, or do you spend several seconds hunting around the page for a non-standard control which might or might not be present?

    Mike

  9. #9
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,600
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    in IE8 and Opera, the last set zoom becomes the default for any new windows or tabs
    I didn't know that. It's certainly not the case with Firefox.

    Ah, wait a mo'. I see that if you go to Tools / Options / Content in Firefox, you can change the default font size. But I guess that would only work if the web page you are viewing doesn't set its own (absolute?) font size.

    Mike

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Mikl View Post
    Ah, wait a mo'. I see that if you go to Tools / Options / Content in Firefox, you can change the default font size. But I guess that would only work if the web page you are viewing doesn't set its own (absolute?) font size.
    Yup, that's pretty standard. And it's why I continue to rail against people who say it's OK to use absolute font sizes now that IE6 is pretty much dead. It isn't. It completely screws things up for people who have changed their browser default size. Whereas (as a web author) changing the size of text by using %/ems will change the text relative to the font size in the user's browser settings, meaning that unless you change it by a ridiculous scale factor like 50%, it should still be reasonably legible even for people who have a huge font size.

    Zoom is all very well, but it should rarely be necessary for people to use it. In-page text size widgets likewise – except that not only should they be unnecessary but they imbue a sort of learned helplessness, where people are habituated into solving the wrong problems in the wrong way.

  11. #11
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Zoom is all very well, but it should rarely be necessary for people to use it. In-page text size widgets likewise – except that not only should they be unnecessary but they imbue a sort of learned helplessness, where people are habituated into solving the wrong problems in the wrong way.
    I'd say zooming is the standard way.

    The people having trouble reading a web page will usually have problems reading a text document or a spreadsheet or a pdf document or an image from a local folder. All these have one thing in common: the zoom solution. And people often use it.

    Teaching web authors to respect a random custom setting in the browser is easily superseded by making the web user understand that zooming is standard and it works on web also, very much the same way.

    To that concern, I'd say the practice of changing the default text size in browsers being regarded as a better solution, in fact it breaks the usability pattern for the user in a bad way.

    Plus, it has in common the usability patterns for touch screens, where zooming is an easy to achieve and intuitive solution. Users will look for ways to emulate that. The reverse would be counter productive.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Here's a proof of concept, using jQuery, for brevity and clarity.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<title>Font size with jQuery</title>
    </head>
    <body>
    	<a href="#" id="largerText">A+</a>
    	|
    	<a href="#" id="smallerText">A-</a>
    	<p>E tu, "Lorem ipsum" ?!</p>
    	
    	<script>
    		$("#largerText").click(function() {
    		  $("body, input, select, textarea, button").css("font-size", (parseInt($("body").css("fontSize")) * 1.1) + "px");
    		});
    
    		$("#smallerText").click(function() {
    		  $("body, input, select, textarea, button").css("font-size", (parseInt($("body").css("fontSize")) * 0.9) + "px");
    		});
    	</script>
    	
    </body>
    </html>
    It works by multiplying the body font size by a 1.1 factor for larger text and by a 0.9 factor for smaller text.

    There are a number of form elements that are not affected by the body font size value. That's why those are listed along with the body element in the jQuery multiple selector: input, select, textarea, button. This means, of course, you should take care of them in more detail than I did above.

    The main issue is that you have to use relative values for the elements affected by the body font size changes: em or %. Using px font sizes for them it means they will not inherit the font size anymore.

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,377
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    I have Firefox's default text size set to a size that suits me nicely for most sites. However, after the last style changes, I found the forums tiring to read at the default setting, so I used Firefox's "zoom text only" to get the size that suits me. That setting is remembered every time I return to Sitepoint, but doesn't over-ride my generally-preferred default setting. Another reason why I prefer Firefox.


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
  •