    |  Appendix III: Dimensions The Art of Scintography Edition 3.0 © 2008 Aurora Isaac www.scintography.com | ||||||||||||||||||||||||||||||||||||||
 III.1 Browser Dimensions | |||||||||||||||||||||||||||||||||||||||
|
When browsers were first used, pages contained little markup, and were primarily text with occasional images.
Viewers had control of font size, so text could be read on screen as easily by one viewer as another.
Monitors were small enough that the width of a line of text was similar to that on a printed page.
When printed, text wrapped neatly to fit on the paper, whatever its size or orientation.
This simplicity didn't last long. As computer fonts became more like printed fonts, the more diverse viewer options became. At the same time, page formatting became more refined, and authors were faced with the challenge of making pages look good on an ever growing variety of viewer platforms. Along the way, dimensions appeared more and more as part of page markup. Most of these dimensions were in numbers of pixels. How big is a pixel? As it happens, a pixel does not have a well defined size. How big a pixel is depends on the viewer platform. Units in HTML are still limited to pixels and percentage of available space. Pages with only HTML markup still offer the viewer some degree of control over font size. STYLE, on the other hand, gives authors more control over dimension. Inches and centimeters are commonly used to size blocks of elements on a printed page. Points and picas are commonly used in sizing fonts. Of course, we still have the problem that however a dimension is specified, before it appears on screen, it is translated into pixels, and before it appears in print, it is converted from pixels back into absolute, printable dimensions.
The most common screen densities are 72px/inch and 96px/inch. As screen technology advances, this density may become a virtual density, as it is for printers, where the density, often expressed in dots per inch, or dpi, is not neccessarily related to the density specified in content formatting. 96 pixels on a 96px/in monitor will be printed from the browser as (approximately) 1 inch, regardless of the number of dots the printer uses to print one inch. Because of the variety of presentation platforms, sizing fonts can be a problem. The HTML font SIZE attribute gave authors 7 font sizes to choose from. These sizes can be resized by the viewer by changing the browser text size option. STYLE offers this same option, but also allows authors to specify absolute, non-resizable font dimensions.
If you change the text size option on your browser and refresh this page, the absolute fonts will not change size, but the relative fonts will. Thus, a font intended to be about one sixth of an inch in size may range from 6 pixels or less to 32 pixels or more, which could significantly alter a page layout. So, how big is a pixel? There is no easy answer. The bottom line is, browsers attempt to make the screen rendition and the printer rendition of page elements about the same size as they would be on a traditionally printed page. Thus, readable font sizes are still between 8pt and 14pt, and readable lines of text are still about 4in to 6in, even on screens and printers the author of the page has never seen. Size your elements accordingly, but leave some leeway for variations in platform presentation. | |||||||||||||||||||||||||||||||||||||||
| III.2 Style Units | |||||||||||||||||||||||||||||||||||||||
The units em and ex are relative to the current font size. If % is applied to fonts, it is also relative to the current font, but if applied to a dimension such as width or height, it is relative to the available space. The unit px is relative to the screen density. Most viewers do not change the number of pixels per inch once it is set during configuration of the operating system. Although px dimensions may seem absolute to a single viewer, these dimensions may vary from platform to platform. The units in, pt, pc, cm, and mm are absolute. They should be approximately the same size on any system, but they cannot be resized by the viewer. In the table below, all the example fonts are about the same size on a monitor with the default font at 12pt (size 4). If you resize the browser text size, the absolute fonts do not change.
| |||||||||||||||||||||||||||||||||||||||
| III.3 Unit Conversion | |||||||||||||||||||||||||||||||||||||||
| III.4 References | |||||||||||||||||||||||||||||||||||||||
|
1
The Mad, Mad World of Pixels Per Inch (PPI) http://www.webdevelopersjournal.com/columns/ajs_ppi.html
2
Microsoft Developers Network Library
3
: The relationship between FONT SIZE and physical type size
4
: So Many Browsers - How Your Audience Can Make You a Better Web Developer, Mary Burk
5
FotoFinish: Understanding Resolution | |||||||||||||||||||||||||||||||||||||||
| All Contents © 2008 Aurora Isaac. All Rights Reserved. Legal Notices. | |||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||