Enhancing Text Readability Online Through Code
- Getting Started
- Text Zooming
- Using the Text Zoom Component
- Component Reusability
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Web is the most efficient way to distribute information to the largest amount of people in the shortest period of time. Any time you have a large group of people, you usually have some diversity. Diversities are important to keep in mind if you care about your application’s users. For example, age can play a huge role in a user’s vision and, while it may look better to have smaller fonts on your web site, some users might not be able to read a damn thing.
In this article, we’ll take a look at how to enhance text readability through code by developing a JavaScript component for text zooming. This component enables users to dynamically increase or decrease the size of the text in the areas in which we allow it. We’ll also have the ability to maintain an initial text size for design aesthetics and restrict the enlarging to a reasonable font size. A live sample can be viewed here and the source code for the article can be downloaded here.
Getting Started
The first thing that we need to create is a simple HTML file that will demonstrate text a user could be viewing on our web site. The example that we’ll create will include a title and a couple of paragraphs of descriptive text.
Our sample page will start with a simple page border that will act as a container for the text we’ll be adding. The first piece of text is a bold title that contains style properties for its font size and line height and an id named title. After the title, we’ll add a couple of paragraphs of descriptive text to a div and give it an id named description. Just like the title, the description will also contain style properties for the font size and line height, which will act as our default sizes.
Creating a Sample Page (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformIT: Enhancing Text Readability Through Code</title>
</head>
<body>
<div style="width: 500px; padding: 20px; border: 1px #333 solid;">
<b id="title" style="font-size: 18px; line-height: 24px;">Enhancing Text Readability Through Code</b>
<br/><br/>
<div id="description" style="width: 500px; font-size: 11px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nisl erat, dictum at, pulvinar in, consequat et, leo. In hendrerit enim quis tellus. Quisque nunc felis, blandit id, tincidunt sed, gravida vel, mi. Nullam in mi quis lacus placerat viverra. Etiam eros. Proin pharetra. Nam mauris neque, molestie sit amet, malesuada et, rhoncus in, nisi. Pellentesque vehicula, massa ac semper varius, nunc diam venenatis leo, et aliquam ligula erat nec nunc. Integer rhoncus convallis odio. Suspendisse eget mi. Sed eget arcu non augue iaculis mollis. Fusce nibh leo, interdum id, mattis ut, rutrum eu, orci.
<br/><br/>
Mauris lobortis velit volutpat turpis. Phasellus ac felis eu diam venenatis pharetra. Ut laoreet enim id metus. Nulla facilisi. Etiam et velit. Curabitur tortor lectus, luctus ut, pharetra sit amet, ultricies ut, mauris. Vivamus pretium. Sed ligula. Morbi laoreet vulputate mauris. Proin sem dolor, lacinia ac, imperdiet ac, vehicula et, sapien. Cras augue nisi, vestibulum id, sollicitudin vel, facilisis vel, orci. Curabitur blandit ultrices nulla. Cras eu erat. Sed non lectus. Nulla feugiat, risus non venenatis commodo, nibh felis ullamcorper dui, vel laoreet mi augue tempor ligula. Sed et nulla. Nunc euismod nunc at pede. Curabitur consectetuer arcu in augue. Morbi ipsum augue, vehicula sit amet, ultrices rutrum, lobortis eu, augue.
</div>
</div>
</body>
</html>