Tutorial: HTML5 Dynamic Font Resize

Source Code & Working Example font-sizes

Every modern webbrowser today has variable font sizes. There are two reasons for this: 1. It was a fairly trivial addition for browser makers. 2. It made the web more accessible to people with disabilities. On the later, it is important to note as the population grows older, vision becomes strained – and therefore adding an option to resize fonts is an important feature.

NOTE: This Working Example works in your webbrowser and on your mobile device; adding config.xml will allow it to build with Phonegap Build.

Today with responsive web, it is a matter of a few lines of code. However, there are a few issues that you will run into.

  • One issue is where to hook the font-size change.
  • The other is margins and padding.

Both of those will be covered after a walk through the example. Note, if you have trouble with the buttons, recycle the webpage.

Initial Size

font-size = 100%

font-size = 100%

The default size set for the <html> element is font-size=100%. In the emulator, the page layout looks very similar to the image with the caption font-size = 100%.

Bigger Size

font-size = 125%

font-size = 125%

If you click the button [bigger], the entire page will have the all the fonts increased in size – to 125% of the original. The emulator results are visible in the image with the caption font-size = 125%. The code to change the font-size looks like this:

document.body.parentNode.style.fontSize = '125%';

Smaller Size

font-size = 75%

font-size = 75%

If you click the button [smaller], the entire page will have the all the fonts decreased in size – to 75% of the original. The emulator results are visible in the image with the caption font-size = 75%. The code to change the font-size looks like this:

 document.body.parentNode.style.fontSize = '75%';

Hooking the font-size Change

If you look at the code in app.js, you will see the modifications to the font-size made three (3) different ways. The code snippet below outlines the different methods. For all intensive purposes, the first two (2) lines are equivalent.

document.getElementById('allOfIt').style.fontSize = '100%';
document.body.parentNode.style.fontSize = '100%';
document.body.style.fontSize = '100%';

The first two (2) references above are for the document element – the one and only <html>. The third reference is for <body>. They will all do the same thing, when you make a change to fontSize.

However, if you change to <body>, you will notice that the [reset] for the first two (2) references (<html>) do nothing at all. This is because the changes are compounding (or inherited, or scoping – depending on your point of view). This means, if make the font bigger for <html>, then that makes the font bigger for <body>. IF THEN, the final font size is 125% bigger for <html> + 125% bigger for <body>. In px this means, we start with 16px, then increase by 125% for <html> – making it 20px, then increase by 125% for <body> – making it 25px!

In the end, <body> seems to be the better choice. However, even after making this decision. There is another hidden pitfall, namely – margins and padding.

margins and padding

When I design my pages I do NOT use px or percent (%); as px is fixed and would require me to hunt down every instance of px and change it — And percent (%) would require similar. I use em, but even this has the infamous css compounding problem (google search link).

So you should be aware that for dynamically font resizing, there are two (2) possible solutions – em and rem.

  • em is equal to the size of the font that applies to the parent of the element. (So, this suffers from compounding.)
  • rem is equal to the size of the font that applies to the root html element, not the parent element.

In general, em works for padding, and rem works for margin. However – excluding headers, I tend to stick to one font. So, you’ll have to make your own judgement – but be diligently consistent!

Sidenote, some designers use 0.625em as a design reference. This Google search will help you research this point.

Bottom Line

Having Dynamic Font Resize is fairly trivial, but requires diligence when design – even for mobile device.

Addendum

Kerri Shotts has suggested also adding a user device preference from phonegap-plugin-mobile-accessibility.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s