Minimum font size scaling

A demonstration of minimum font-size scaling using Javascript.

Warning: this page has only been tested under Firefox and, for now, definitely does not work under IE7.

There’s a problem with minimum font size on the web that, I believe, harms its usage. It would help if browsers scaled all font sizes on the page when minimum font size ‘kicks in’. Until then, here’s a simple demonstration of the effect using javascript.

Debug

The smallest font on this page is:
Your browser’s minimum font size is:

Sample content

These 3 elements (2 headings and a paragraph) will not be scaled according to minimum font size:

Heading, 14px

Heading, 12px

Paragraph, 10px

These 3 elements should be scaled if minimum font size is larger than the smallest font on the page:

Heading, 14px

Heading, 12px

Paragraph, 10px

To demonstrate scaling, try adjusting your browser’s minimum font size setting to between 12px and 16px (or greater). You’ll need to refresh the page each time you do this (so the javascript runs again). You should notice the difference between the non-scaled and scaled approaches.

Also note that, once the scaling has taken effect, standard text-zoom should remain fully functional.

The code

The code is very basic and, like most of my javascript nowadays, makes use of the jQuery library. First, we scan the entire document (not very efficient), looking for the smallest font size in use:

var min_font = 100;

$('body *').each(function() {
    if ($(this).css('display') != 'none')
    {
        var s = $(this).css('font-size');
        s = s.substr(0, s.length - 2);
        min_font = s < min_font ? s : min_font;
    }
});

The substring call removes the unit suffix which, in Firefox, is always "px". Once we have the smallest used font-size, we examine the user’s minimum font size setting. The best way I’ve found of doing this (so far) is to create an element with a tiny font size, then measure its displayed font size.

var m = '<div id="min-font-size-tester"';
m += ' style="font-size: 2px; line-height: 1;';
m += ' display: none;">M</div>';
$('body').append(m);
var min_size = $('#min-font-size-tester').height();

Funny things happen at sizes less than 2px, so I’m not catering for that ridiculous edge case. Finally, if we need to scale, we simply walk the DOM again, multiplying each element’s font size by the scaling factor:

if (min_size > min_font)
{
    var scale = (size / min_font);
        
    $('body *').each(function() {
        var s = $(this).css('font-size');
        s = s.substr(0, s.length - 2);
        $(this).css('font-size', s * scale);
    });
}

Note that the code isn’t portable yet as I’m only using it for this very specific demonstration. In due course (and if there’s any demand), I’ll release a general-purpose version.

References

Tweet

Comments

Sat 5 Mar 2011 19:22

golf swing speed

golf swing speed said:

thank you so much for giving this information.i will visit and watch updated article here for now.

http://www.golf-swing-speed.com

Leave a comment