a javascript fix for text that's too tiny

a javascript fix for text that's too tiny a javascript fix for text that's too tiny the problem if you want your text to be resizable in all major browsers, and smaller than the default, you're probably using em units with values less than 1 in your style sheet, e.g. p {font-size:0.75em} as long as you're careful you've probably got it to work. but then someone complains that they browse the web with ie for windows set to a text size of smaller and your site is unreadable. you take a look, squint, and despair. you do similar tests on a mac and in netscape 6 and despair further. you're all set to join the pixels-are-the-only-way club. the solution this problem bothered me, and i needed a workaround for sites i was developing for myself and in my day job. using javascript i found a solution that, if applied with care, helps make many sites readable no matter what the text size setting. to see it in action, open up this test page, then make your text size smaller (head for view/text size in most browsers). much of the text on the screen should become tiny, possibly unreadable. to activate the fix, refresh/reload the page. you won't necessarily get the text back to precisely the size it was originally, but it should be an improvement and keep everything readable. how it works note: the function and sample page use xhtml; the function will still work with html 4, but purists may want to switch <br /> to <br> in the function's document.writeln. to use this fix, simply insert a function call just after the body tag: ... <body> <script type="text/javascript"><!-- emstweak(); //--></script> ... it can go at the bottom of the page instead, but the user may momentarily see the page with font sizes unadjusted just before the fix kicks in. the function can be placed either in the head of the page or in an external .js file: function emstweak() { if ((document.createelement) && (document.createtextnode)) { document.writeln('<div id="emstest" style="position:absolute; visibility:hidden; font-family:arial,helvetica,sans-serif">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br /></div>'); var scaling=100; if ((navigator.platform=="win32") && (navigator.appname=="microsoft internet explorer")) scaling=105; var h=999; if (document.getelementbyid('emstest').clientheight) h=parseint(document.getelementbyid('emstest').clientheight); else if (document.getelementbyid('emstest').offsetheight) h=parseint(document.getelementbyid('emstest').offsetheight); if (h<85) document.body.style.fontsize=math.round(scaling*90/h)+"%"; } } the fix only works in modern, dom-capable browsers; detection is taken care of by the first if statement. so far it's been tested in win ie5/5.5/6, mac ie5 and netscape 6. a hidden div containing a few lines of text is written into the page. its height is then measured, and if it's too small the font size applied to the body tag is increased to compensate. an extra 5% is added for win ie just to nudge it into being more accurate. all font sizes within the page must be in ems. you may get it working without problems simply by leaving the body tag without any font size set, but it's more likely you'll need to set it to 100%, along with font-size:100% for table, td and th if they have no existing font size, e.g. with the following in the style sheet: body,table,td,th {font-size:100%} see below for an explanation of this seemingly needless css... bugs, quirks and workarounds ok, now for the bad news. it isn't always possible to get this fix to work properly in all browsers for a particular site. the problems arise from strange and inconsistent behaviour in various browsers. tables are a real headache. if text within table cells is also within another tag which handles its formatting, e.g. ... body, table, td, th {font-size:100%} td {} p {font-size:0.8em} ... <td> <p>goodbye cruel world</p> </td> ... then as long as the font-size:100% 'bodge' is there it all works ok. without it win ie fails to resize any text within tables; with it win ie resizes text by a lesser amount when the text size setting is altered (smaller text isn't so small, larger not so large). i haven't a clue why this is. if text is instead formatted by the td/th (not wrapped in a paragraph) then it seems to stubbornly refuse to resize at all in mac ie and i've not yet found a workaround. nested tables can get yet more complicated. summary this fix should be suitable and work ok if... the site uses ems for font sizing, with one or more pieces of text set to <1em. you insert the function call just after the body tag. you insert the function into the head or external .js file. in your style sheet you apply font-size:100% to the body, and to table/td/th if required, and ensure your use of tables allows the fix to resize the text. it won't work for every site, or every browser, and relies on javascript being enabled, but it's allowed me to use ems rather than pixels for a few sites already. if you discover any improvements or additional workarounds let me know and i'll see if i can improve the code. matt round malevolent design malevole weblog matt round © 2002.  /  section home last updated: 06 jun 2002

Acceuil

suivante

a javascript fix for text that's too tiny  EAZ-FIX, Instantly undo your PC problems  Alpinisme -- Petites annonces - Re: [VDS] Fixations rando SECURA ...  video-gratuit : Clip Coldplay - Fix You (Live Video) video Musique ...  Installation Matrix Infinity + SubZero Fix [ Ps2/PsTwo install ...  Fix Your Digital Photos : CNET Online Courses - Tips, Tricks, and ...  Congress looks for price fix  Acheter Maillot de bain Tribord Tr 100 fix foulard lys ro  TOTAL : JEU du FIX MARDI 6 /11 / 2007  CREDIT AGRICOLE SA : fix 25.03 > plein de GAGNANTS >  Scan, Click & Fix : de l’analyse de vulnérabilités à la ...  Procédure d’utilisation de la fonction Facing Fix SANS utilisation ...  NASA delays spacewalk to fix broken solar wing: Scientific American  Rhodia : Rhodia rachete l’activite Mix & Fix Center de Quimica Dos ...  ID-FIX Groupe Rock  Fix font issue in Safari for Windows - Grupenet  ID'FIX : Education canine, formation, pension canine et Agility  AB Soft propose Fix-It et SystemSuite de V-Com  Hama LOT DE 5 SERRE-CABLES NOIR PEARL FIX comparer prix acheter ...  The Wheel Fix  skis atomic 130 fix look Article de sport Toulouse  Fix those Aluminium Keyboard woes - The Unofficial Apple Weblog (TUAW)  YUI Version 2.3.1: Bug-Fix Release » Yahoo! User Interface Blog  Fix You (Cover Tones fix you) (sonnerie.01net.com)  Crampons pour bois Krall-Fix.  Photojojo » Find Detail in Your Photos That You Thought Was Lost ...  La Voix du Sud > Sports > Une 1re défaite pour le Fix Auto  Photo : fix-1-255.jpg - vietnam - www.developpementdurableasie.com  Ljubljana - Fix le 03 Septembre 2007 - NC  CAMP - Ice Rider New Fix + Atb  Café Fix - Kontaktladen mit medizinischer Ambulanz  Trucs & Tuyaux - Bouteille avec des perles sur Fix-Tape  Fix Me!  Fix’ Mascara  Fix Problems With Copying Large Files in Windows Vista :: the How ...  MSN Fix .... besoin de renseignements URGENT  Excel 2007 Calculation Fix Weighs a Whooping 32 MB at Digital ...  Fix Blogger Sitemap XML Warnings Inside Google Webmaster at ...  Download AIM Fix 1.6.917.1023 - AIM Fix was created to remove all ...  Fix bug report!! [Archive] - The Saga of Ryzom  No Easy IT Fix for the IRS - CIO.com - Business Technology Leadership  ThoughtWorks, Inc. lance le premier moteur FIX C++ ouvert  Membre : Crazy Fix  Fix Ellinger Patricia  Fix-Masseau Pierre  slip tena fix :: tena, incontinence, matériel médical à bas prix  Find A Fix Auto Body Repair Shop. List Of All Auto Collision Shops ...  Daylight Saving fix for Windows 2000,XP, 2003, and NT (DST Patch/Fix)  votre porte-monnaie euros  Joomla! Extensions Directory - Ultimate PNG Fix Plugin (for IE up ...  » New Vista fix packs provide updates promised for SP1 All about ...  I Fix Computers, Inc  Fix Adobe Acrobat Reader’s “expr: syntax error” message » javier ...  Fix PST file  CONTES POPULAIRES DU MAROC, une oeuvre de FIX PHILIPPE, proposée ...  Fix You - Blog lemeltingpotdeclytia - Un peu comme un journal ...  Neowin.net - Apple Releases Fix for iMac Freeze  :: SUSHI FIX RESTAURANTS :: WELCOME  fix from FOLDOC  Pixoo.us Will Fix Your Hair (Or Anything Else You Dislike in Your ...  6 Tri-Fix & 8 Punaises, 4x3.5cm, LOT DE 4