viewport_sized

Sizing text with the browser window

Resize this window. If you have javascript turned on, the text size in this column should resize. The header and navigation will not.

Here's a simple DOM scripting technique for sizing text content depending on the width of its containing element, or any other element for that matter, including the document body. This is useful if you want to:

maintain a (relatively) consistent reading line length in content columns
design a zoom layout that sizes text according to the viewport window
maintain more control over content layout for varying viewport sizes

Features include:

honours relative browser text size preferences
minimum and maximum sizes to stop things getting silly
no additional markup or CSS
unobtrusive script
degrades gracefully
small script size (2Kb)
configurable
independent sizing settings for different page elements, and
it doesn't compromise accessibility.

How it works

The HTML

Nothing special here. Just create your accessible, semantically wonderful markup as usual.

The CSS

Again, nothing very special is going on, but there are a few things you'll need to know:

Use a font size on the body element that you're happy with before using the script. Percentage or ems-based measurements are advised.
Don't put a line-height declaration on the body element. Some browsers maintain a static line height, even when font size changes. You're better off setting line-heights specifically for the elements that need it.
Use relative units for all font sizing to maintain the link with the parent element font size.

The script

The script works by taking the current display width of a reference element, and using that to determine the CSS font-size declaration for a target element, in percentage units. A ratio is set to determine how the font size is calculated. Text sizing takes place when the document loads and when the window is resized.

Additionally, optional minimum and maximum font size values for the target element can be supplied to make sure that the text doesn't get too small or stupidly big.

Follow these steps for text zoom happiness:

Download the file textZoom.js, place in your usual scripts directory and create a <script> tag to link to it.

Insert the following under your script reference:

<script type="text/javascript">
  var contentZoom = new TextZoom(
    "Content", // Reference element
    "Content", // Target element
    0.22, // Zoom ratio
    70, // Minimum font size (%)
    130); // Maximum font size (%)
  addLoadEvent(textZoomInit);
</script>

Amend the object properties as below (in order of appearance)

TextZoom object properties

ID of reference element (string): Pass the ID value of the element you want to act as the width reference. If you pass a blank string, the body element will be used.
ID of target element (string): Pass the ID value of the element you want to target for text zooming. If you pass a blank string, the body element will be used.
Zoom ratio (number): This is the constant ratio that is maintained between target element text size (in percentage units) and reference element width (in pixels). In the current page, the ratio value of 0.18 means that when the Content div is 600 pixels wide, the font size is set to 0.18 * 600 = 108%. Play around with ratio values for your layout.
Minimum font size: This specifies the minimum font size as a percentage value. Setting it at zero will enforce no minimum.
Maximum font size: This specifies the maximum font size as a percentage value. Setting it at zero will enforce no maximum.

That's it.

Example

Here's another example of the script in action using Matthew Levine's three column Holy Grail layout and a resizing image technique stolen from Richard Rutter, which seems to go rather well with this idea.

Browser support

Tested on Win IE 5.0, 5.5 & 6; Win & OS X Firefox 1.5; OS X Safari 2; Win Opera 8.5. Other browser support information gratefully received.

Disclaimer: This is a work in progress. Also, my scripting skills are a bit haphazard, so if you have improvements, suggestions or abuse, please comment over here.

Text Zooming