HTML and CSS Reference
In-Depth Information
Case Problem 1
Use JavaScript
and relative units
to resize the text
of a Web page
article.
Data Files needed for this case Problem: fontdown.png, fonttxt.js, fontup.png,
kuhlman.png, modernizr-1.5.js, tlmtxt.css, twinlife.png, twinstxt.htm
Twin Life Magazine
Elise Howard is the editor of
Twin Life
, a magazine for parents of
twins, triplets, and other multiple births. The magazine is upgrading its Web site and
Elise has approached you to help with the site design. She would like to give readers
the ability to increase or decrease the font size of the articles the magazine publishes
to make the text easier to read, or to allow readers to view an entire article on the same
screen. Although readers can use their Web browsers to zoom in and zoom out of the
Web pages, Elise wants an app that will affect only the article text and accompany-
ing photo, while leaving the rest of the page features—the magazine logo and list of
links—unaffected.
To create this effect, her sample page has two buttons: one to increase the font size
and the other to decrease it. All text and page objects that are to be resized have been set
using the relative
em
unit, while the other page text and objects that are to remain fixed in
size have been set in pixels. Thus, to change the size of all of the resizable objects, your
code simply needs to change the default font size of the document page body; all of the
resizable objects will change proportionally based on the default font size. Figure 13-39
shows a preview of the article and resizing buttons that you'll work on for
Twin Life
.
Figure 13-39
twin life magazine article page
Alena Ozerova/Shutterstock.com
