How do you create a page that allows a user to select the font size?
Nik’s answer:
You can do this using CSS or Javascript or a combination of the two. Here is some sample HTML code with embedded CSS that demonstrates how it is done:
<html>
<style>
.xsmall { font-size: 0.5em; }
.medium { font-size: 1.0em; }
.large { font-size: 1.5em; }
.xlarge { font-size: 2.0em; }
.fauxLink { text-decoration: underline; cursor: hand; }
</style>
<body>
<p>This code demonstrates how to make a web page with user selectable font sizes. The trick is to use CSS with relative point sizes.</p>
<p>You can set the "font-size" CSS attribute to an "em" value. This is the value of the character box for a given font (i.e. the "M" character). Using an em value sets the font size to a relative value. For example, 1.3em is the same as 130%.</p> <p>
<span class="fauxLink" onClick="document.body.className='xsmall'">x-small</span> |
<span class="fauxLink" onClick="document.body.className='medium'">medium</span> |
<span class="fauxLink" onClick="document.body.className='large'">large</span> |
<span class="fauxLink" onClick="document.body.className='xlarge'">x-large</span>
</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eu sem. In commodo. Integer id lectus a enim fermentum molestie. Donec fringilla ligula vel justo. Aliquam elementum wisi luctus lacus. Etiam leo. Duis auctor elit quis mauris. Ut elit lectus, luctus quis, rhoncus sed, lacinia in, velit. Pellentesque vulputate congue magna. Proin luctus. Pellentesque rhoncus, metus eget laoreet ornare, lacus risus mollis nibh, non interdum augue sapien nec metus. Donec sem. Vestibulum rutrum, urna non cursus tristique, tellus erat sagittis turpis, at venenatis massa massa egestas pede. Praesent ultrices malesuada nisl. Etiam ac felis eget ligula venenatis suscipit. Suspendisse ultricies lacus eu eros. Aliquam bibendum adipiscing ante.
</div>
</body>
</html>
As you can see, it is very easy to accomplish this. However, this is only half the solution. Presumably the user wants the size selection to persist so it’s a good idea to use a cookie to store their preference. Then, no matter which page they visit on your site, text will be displayed at their preferred size. Furthermore, when they return to your site at a later date, depending on the duration of the cookie, the site will automatically adjust the size.
For DotNetNuke, I created a component that does this for you (by allowing the user to select a stylesheet for the page and remembering it for future visits). This is part of the Speerio SkinWidgets suite. You can see a demo here.