ansaurus

Question

Answer 1

A:

Here's a JavaScript function you can use to calculate the size of 1em in pixels:

function getEmSize(el) {
    // If you pass in an element ID then get a reference to the element
    if (typeof el == "undefined") el = document.documentElement;

    var tempDiv = document.createElement("DIV"); 
    tempDiv.style.height = 1 + "em";
    // Just in case the content of "el" takes up it's container's height :)
    tempDiv.style.marginTop = -1 + "em";

    el.appendChild(tempDiv);
    var emSize = tempDiv.offsetHeight;
    el.removeChild(tempDiv);
    return emSize;
}

I also wrote an article about Changing Text Size On Click. Just make sure you save the preference via a cookie or localStorage.

Hope that's useful.

Eric Wendelin 2010-08-25 14:19:29

I have a whole series of related pages. If I implement text size changes as discussed here there will be an expectation that the changes will persist between pages. (BTW, this is a good argument for this approach as opposed to browser features). If I save a cookie in one page, will I be able to retrieve it in another page? The pages will exist on the in the same directory on the server. Server belongs to my isp so can I expect problems when cookies are sent there?

Mike D 2010-08-25 23:55:51

Yes, you can read a cookie as long as it is in the same top-level domain (e.g. google.com)

Eric Wendelin 2010-08-26 00:01:18

Here's an awesome page with the whole shebang http://www.simon.kaulius.com/dynamically_change_text_javascript.htm

Mike D 2010-08-26 13:02:24

Answer 2

A:

The easiest thing to do is to change your page to not use pixels. If you used ems, all you would do is have to change the font size of the body element and everything else would adjust.

Most browsers have the ability to change the font size built in so coding this is really of no benefit if you code the page correctly to begin with.

epascarello 2010-08-25 14:19:49

The ability to change the font size for a set of related pages is important to me. IMHO, I find the fact that the browser (Firefox) remembers that font size has been increased for a given page annoying.

Mike D 2010-08-26 12:34:17

ansaurus

tags:

views:

answers:

HTML JavaScript font size changes

related questions