www.webdeveloper.com
Results 1 to 4 of 4

Thread: Supressing broswer option to "decrease" font

  1. #1
    Join Date
    Apr 2006
    Posts
    2

    Question Supressing broswer option to "decrease" font

    Hi there,

    One of my customers has asked me to fix the minimum font of his site so that it cannot be reduced further. He is quite happy for people to be able to increase the font, but apparently several of his customers have experienced problems when "fiddling" with the increase/ decrease font size in the brower, rendering the site unreadable.

    The body font is set to .75 ems, which means that reducing the font size by even one "notch" results in unreadable font. Increasing the font to 1ems makes the site font too large but partially solves the "decrease font" problem.

    Setting the font to pixels seems to kill the increase/ decrease font functionality entirely - shoddy for accessibility.

    The ideal solution would be to "switch off" the "decrease font" button, or somehow make it so that the default font can only be increased.

    Can anyone help me with this? I have tried searching but tend to come up with solutions that modify ems/ pixels/ points and my attempts to use these solutions have failed.

    The live site is www.ldl.co.uk.

    Thanks so much for your help!

    Suzanne

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This 'fiddling' is a problem. A partial solution is using this script:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>font size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var obj=document.getElementsByTagName('div')[0]; // could also be a reference to a hidden div
    var h=14;
    if(obj.clientHeight) { // FF Opera
        h=parseInt(obj.clientHeight);
        }          
    else {
        if(obj.offsetHeight) { // IE
            h=parseInt(obj.offsetHeight);
            }
        }            
    if(h<14) { // change this value depending on the font-family and size!
        alert("Browser 'Text Size' is set too small.\nPlease change your option.");
        }
    }
    </script>
    
    <style type="text/css"> 
    body {
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:0.75em;
    }
    </style>
    
    </head>
    <body>
    	<div>some text</div>
    </body>
    </html>
    Set the browser Text Size to a smaller value and reload the document. The user is then alerted.
    It of course requires JavaScript enabled.
    In Opera it will not work if the zoom has been used, but it works if Ctrl-min is used

  3. #3
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The person who owns the browser has complete control over the fonts used to display your web page and what size that the page content displays at. If they want to display it using a 4 pixel font to make it ultra-small then there is noting you can do to stop them because their stylesheet and Javascript cmmands override any that you put in your page.

  4. #4
    Join Date
    Apr 2006
    Posts
    2

    Thank you!

    Thank you both for your input. I had a horrible suspicion that the browser would override the site's CSS but wasn't confident enough to go back to client and say that restriciting the "decrease" button wasn't possible.

    The "popup" solution is something I can suggest, but the client isn't too keen on popups.

    Thanks again!

    Very best wishes,

    Suzanne

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles