www.webdeveloper.com
Results 1 to 5 of 5

Thread: Get Actual Font Size of rendered text

  1. #1
    Join Date
    Apr 2006
    Posts
    27

    Get Actual Font Size of rendered text

    Is there a way in Javascript to get the actual pixel size of the rendered text on a webpage?

    For example, if a user has increased the text size in their browser's View settings, or done something like check the "Ignore Font-Sizes" box in Internet Explorer's Accessibility settings--I want to be able to check the size of the displayed text and alter the font-sizes accordingly.

    My goal is to be able to generate (client-side) a document to be printed via a webpage form. This document must be very specifically formatted, which can be done via CSS, but all of that goes out the window if the users have some of these View and Font-Size options enabled.

    Any ideas would be appreciated. Thanks!

  2. #2
    Join Date
    Feb 2006
    Posts
    2,926
    You can create a temporary (hidden) div that contains a single 'M' character,
    read its offset size, delete the div and return the size you read.
    You'll get an array of [width,height]- usually the height is all you need, it is the font size in pixels on screen.

    Code:
    document.emSize=function(pa){
    	pa= pa || document.body;
    	var who= document.createElement('div');
    	var atts= {fontSize:'1em',padding:'0',position:'absolute',lineHeight:'1',visibility:'hidden'};
    	for(var p in atts){
    		who.style[p]= atts[p];
    	}
    	who.appendChild(document.createTextNode('M'));
    	pa.appendChild(who);
    	var fs= [who.offsetWidth,who.offsetHeight];
    	pa.removeChild(who);
    	return fs;
    }
    //test for default body text size:
    document.emSize()
    Last edited by mrhoo; 01-09-2008 at 12:46 PM.

  3. #3
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by postman
    Is there a way in Javascript to get the actual pixel size of the rendered text on a webpage?
    The browser's text size has no effect on the printed output.
    If font-sizes are overridden and you're concerned about the resultant page length, you could read document.body.scrollHeight and check that it doesn't exceed an arbitrary size.
    Scripterlative.com

    PM = 'PayPal Mode'

  4. #4
    Join Date
    Apr 2006
    Posts
    27
    Quote Originally Posted by Arty Effem
    The browser's text size has no effect on the printed output.
    I'm not sure about other browsers, but it sure does affect the printed output on Internet Explorer 6. I have 2 printouts to prove it. Both the "View > Text Size" and the "Ignore Font-sizes" Accessibility Option will affect the printed output.

  5. #5
    Join Date
    Apr 2006
    Posts
    27

    Talking

    Thank you mrhoo!! I like that "outside the box" idea. That's exactly what I need!


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