Web Page Units of Measure

Creating a Web page usually involves placing elements on the page in such a way that the viewer sees the content in a manner that makes sense. In order to obtain this presentation, you must describe element placement in a manner the browser understands using one of several units of measure. HTML5 Programming with JavaScript for Dummies, CSS3 for Dummies, and Web Matrix Developer’s Guide all discuss units of measure to some extent. However, readers have asked me to explain the units of measure in a little more detail.

Some units of measure work better than others do in obtaining a specific result. For example, when you specify placement in pixels (px), you tell the browser to define element placement with regard to the physical units of a display. This is the most precise, yet least flexible, method of defining units of measure. In addition, it can create issues with mobile devices because these devices typically don’t offer that many pixels of display area and may not allow scrolling of information that doesn’t appear in a single screen (the part that appears to the right and toward the bottom of the page).

More flexible units of device-specific measure include the inch (in), centimeter (cm), and millimeter (mm). In this case, the browser converts the measurement to pixels using the device’s conversion metric. For example, a typical PC display uses 96 pixels-per-inch. However, the user can change the metric so that an inch could consume 120 pixels instead (making the elements larger than normal). Whether this flexibility solves the problem of working with mobile devices depends on the mobile device and the metric it uses to convert physical units to pixels.

Besides device and physical measures, you can also use printer’s measures that include the point (pt) and pica (pc). These units of measure theoretically work the same as physical measures because a point is 1/72nd inch and a pica is 12 points (or 1/6th inch). In reality, it’s possible that a browser will convert the units of measure based on the size of the fonts that the device uses. However, you can’t count on this flexibility and must assume that these printer’s measures are simply a different kind of physical measure.

Fortunately there are two units of measure that are guaranteed to reflect the size of a font on the display. The em is a measure of the actual font size. One device may use a 12 point font while another device uses a 10 point font. An em will equal 12 points on the first device and 10 points on the second device without any modification of the code on your part. This feature makes the page quite flexible and usable with any device. The other unit of measure is the ex, which is the measure of the x-height of a font (the median of all of the characters in a particular letter set). As with the em, the ex automatically scales to consider the point size of characters used by a particular device.

All of the units of measure so far are absolute. You place elements on a screen in a precise position. Modern Web design dictates that pages employ Responsive Web Design (RWD) to ensure that the page will work on any device. A part of RWD is to use relative placement wherever possible so that the page and its elements automatically resize to meet the needs of a device. You use the percentage (%) unit of measure in this case, where an element uses a percentage of the available space, whatever that space might be. Of course, this approach means that all devices see the entire page. However, a disadvantage of this approach is that the elements might be so small on some devices as to make them unusable.

What are your thoughts about units of measure? Which do you use most often? Let me know at John@JohnMuellerBooks.com.

 

Author: John

John Mueller is a freelance author and technical editor. He has writing in his blood, having produced 99 books and over 600 articles to date. The topics range from networking to artificial intelligence and from database management to heads-down programming. Some of his current books include a Web security book, discussions of how to manage big data using data science, a Windows command -line reference, and a book that shows how to build your own custom PC. His technical editing skills have helped over more than 67 authors refine the content of their manuscripts. John has provided technical editing services to both Data Based Advisor and Coast Compute magazines. He has also contributed articles to magazines such as Software Quality Connection, DevSource, InformIT, SQL Server Professional, Visual C++ Developer, Hard Core Visual Basic, asp.netPRO, Software Test and Performance, and Visual Basic Developer. Be sure to read John’s blog at http://blog.johnmuellerbooks.com/. When John isn’t working at the computer, you can find him outside in the garden, cutting wood, or generally enjoying nature. John also likes making wine and knitting. When not occupied with anything else, he makes glycerin soap and candles, which comes in handy for gift baskets. You can reach John on the Internet at John@JohnMuellerBooks.com. John is also setting up a website at http://www.johnmuellerbooks.com/. Feel free to take a look and make suggestions on how he can improve it.