<div id="popup_box_thanks" style="display:none" onClick="close_popup_thanks('popup_box_thanks', 'ts')"><br>Thanks for submitting your tip! All submissions are moderated by an editor before appearing online. We've reset the form so you can enter another tip. Or you can close the tip submission box. <div class="x_close" id="thanks_upper_right"><a href="javascript:void(0)" onmousedown="close_popup_thanks('popup_box_thanks', 'ts'); return true;">Close</a></div></div>
<div class="tbf_row"><div class="tbf_wide_extra_top not_bold">Please submit only technical tips that will help other TidBITS readers better use their Macs, iPhones, and related software and hardware. All product announcements should be sent to <a href="mailto:releases@tidbits.com">releases@tidbits.com</a>.</div></div>
<div class="tbf_left">URL</div><div class="tbf_right"><input type="text" value="" name="tip_link_url" tabindex="3"><span class="tip_description"><br>Enter the URL to a Web page that supports your tip.</span></div>
</div>
<div class="spacer"></div>
<div class="tbf_row">
<div class="tbf_left">Linked text</div><div class="tbf_right"><input type="text" value="" name="tip_link_label" tabindex="4"><span class="tip_description"><br>Enter the name of the page linked above.</span></div>
<div class="tbf_wide"><input type="submit" value="Preview Your Tip" name="preview_tip" onClick="fill_preview('tipbits_enclosure_preview', 'ts', this.form); return false;" tabindex="7"> <input type="submit" value="Send Us Your Tip!" name="submit_this_tip" onClick="handle_tip_submission('ts', '', this.form, 'tip'); return false;" tabindex="8"></div>
</div>
<div class="spacer"></div>
<div class="tbf_row">
<div class="tbf_wide"><span class="fine_print">When you submit a tip, you give us permission to use it. Read <a href="javascript:void(0)" onClick="generic_show_hide('tip_terms')">our terms</a> for more details. All submissions are reviewed before publication.</span></div>
<div class="tbf_wide"><span class="fine_print">Our terms: By submitting a tip, you agree to assign TidBITS Publishing Inc., a non-exclusive, worldwide, perpetual license to reproduce, publish, and distribute your tip in connection with the TidBITS Web site and associated products in any media. You agree that you created the content you submitted, and that you have the right to assign us this license. You give us permission to use your name, but your email address won't be publicly displayed or shared. We review all submissions before publication, and reserve the right to select which submissions we feel are appropriate for our readers and to edit those we publish.</span></div>
<div id="comment_thanks" style="display:none" onClick="close_popup_thanks('comment_thanks', 'comm')"><br>Thanks for submitting a comment! Please check your email for a link that, when clicked, will verify that you're a real person and cause your comment to appear immediately. <div class="x_close" id="comment_upper_right"><a href="javascript:void(0)" onmousedown="close_popup_thanks('comment_thanks', 'comm'); return true;">Close</a></div></div>
<div class="tbf_wide"><span class="fine_print">Our terms: We reserve the right to edit or delete any comment, so please post thoughtfully. We use your email address <i>only</i> to send you a one-time verification message confirming that you posted this comment. We also store your address to allow you to verify using other Web browsers in the future. For more info, see our <a href="http://db.tidbits.com/privacy.html">privacy policy</a>.</span></div>
<li><a href="/feeds/tidbits.rss" title="Subscribe via RSS" class="gettb">RSS <img src="/images/feed-icon-12x12.gif" width="12" height="12" border="0" class="nav_img" alt="Subscribe via RSS"></a></li>
<li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=276986548" title="Subscribe to the podcast" class="gettb">Podcast <img src="/images/feed-icon-12x12_podcast.gif" width="12" height="12" border="0" class="nav_img" alt="Subscribe to the postcast"></a></li>
<li><a href="http://www.twitter.com/TidBITS" title="Get Article Updates via Twitter" class="gettb">Twitter <img src="/images/feed_icon_12x12_twitter.png" width="12" height="12" border="0" class="nav_img" alt="Get Article Updates via Twitter"></a></li>
<li><a href="http://www.facebook.com/pages/TidBITS/195314925519" title="Go to the TidBITS Page at Facebook" class="gettb">Facebook <img src="/images/feed_icon_12x12_facebook.gif" width="12" height="12" border="0" class="nav_img" alt="Go to the TidBITS Page at Facebook"></a></li>
<li><a href="javascript:void(0)" title="Sections" class="tabhead" onClick="return showhide('articleslist')">Sections <span id="articleslist_triangle"><img src="/images/nav_triangle_open.gif" width="9" height="9" border="0" class="navtriangle" id="articleslist_tri_image" alt="Click to show or hide the contents of this section."></span></a></li>
<li><a href="javascript:void(0)" onClick="return showhide('stafflist')" title="Staff" class="tabhead">Staff <span id="stafflist_triangle"><img src="/images/nav_triangle_closed.gif" width="9" height="9" border="0" class="navtriangle" id="stafflist_tri_image" alt="Click to show or hide the contents of this section."></span></a></li>
<li><a href="javascript:void(0)" title="Issues" class="tabhead" onClick="return showhide('issuelist')">Weekly Issues <span id="issuelist_triangle"><img src="/images/nav_triangle_closed.gif" width="9" height="9" border="0" class="navtriangle" id="issuelist_tri_image" alt="Click to show or hide the contents of this section."></span></a></li>
<li><a href="javascript:void(0)" onClick="return showhide('abouttidbits')" title="About TidBITS" class="tabhead">About TidBITS <span id="abouttidbits_triangle"><img src="/images/nav_triangle_closed.gif" width="9" height="9" border="0" class="navtriangle" id="abouttidbits_tri_image" alt="Click to show or hide the contents of this section."></span></a></li>
<div class="center_top">Thoughtful, detailed coverage of the Mac, iPhone, and iPad, plus the best-selling <a href="http://www.takecontrolbooks.com/?pt=TB-TAGLINE" style="color:yellow">Take Control</a> ebooks.</div>
<!-- begin centercolumn -->
<div id="centercolumn">
<!-- begin rightcolumn_container -->
<div id="rightcolumn_container">
<!-- begin rightcolumn -->
<!-- rightcolumn is embedded within centercolumn so featured text wraps around it -->
</div><!-- end tearoffbox_wide_container for watchlist items -->
<!-- begin tearoff box wide -->
<div class="tearoffbox_wide_container">
<div class="tearoffbox_wide_tips">
<div class="tip_display">
<div class="tips_sponsor_logo">
</div>
<h6>Untrash the Trash</h6>
<p><p>Feeling trasher's remorse? On Snow Leopard, you can open the Trash (click the Trash icon in the Dock) and "untrash" individual items there. Select one or more trashed items (files and folders) and choose File > Put Back. This returns the items to where they were when you originally put them in the trash. The keyboard shortcut is Command-Delete - the same as the shortcut for trashing an item in the first place, since in deleting something from the trash you are untrashing it.</p></p>
</div>
<div class="tearoffbox_wide_bottom_tips">
<div style="padding-bottom:35px"><div class="tip_display" style="float:left"><p><br><a href="/tipbits/210">Link to this tip</a></p></div><div class="tip_display" style="float:right; width:150px">
<div class="tbf_wide_80" id="hc_rc_4501">To help us avoid automated posts and misuse of our site, please enter the words below.</div><div class="x_close_row" id="hc_upper_right2_4501"><a href="javascript:void(0)" onmousedown="HidePopupContent('hc_4501', 'hc', '4501'); return true;">Close</a></div>
<div class="featured_meta"><div class="meta_article">20 Mar 2000 | <a href="/article/5859?print_version=1">Print <span class="shift_up"><img src="/images/printer_icon.gif" alt="Printer-Friendly Version of This Article" border="0" width="9" height="10"></span></a></div></div>
<H2>Building Characters: A Brief History of the Web War</H2>
<div id="article_box_4501"><P>A little over a year ago in <A HREF="http://www.tidbits.com/tb-issues/TidBITS-467.html">TidBITS-467</A>, I wrote about some historical and technical reasons why text on Web pages can be illegibly small when viewed on a Macintosh - especially pages designed by and for Windows users.</P><P><<A HREF="http://db.tidbits.com/article/05284">http://db.tidbits.com/article/05284</A>></P><P>The principles and problems outlined in that article are as true today as they were then, but new Internet standards and a new generation of Web browsers are beginning to offer possible solutions to both Web users and Web authors. This article examines some of the history of text presentation on the Web; future installments will examine new Web standards and new browser capabilities, plus offer concrete advice on preparing platform-friendly Web content.</P><P><STRONG>Text Rules</STRONG>-- Let's face it: much of the information we use on our computers is in the form of text. We write and edit documents, send and receive email, and browse and create Web pages. Compared to images, movies, and audio, text is a simple data type that crosses between platforms and operating systems with relative ease. So why does text so often display badly, especially on the Web? Why are we constantly fussing with window sizes, font sizes, and browser preferences when all we want to do is read text?</P><P>In a nutshell, text differs between operating systems mainly because each operating system makes a different assumption about how pixels on a display translate to physical measurements. The Mac OS assumes a resolution of 72 dots per inch (dpi) regardless of the physical resolution of a display device, and there's no way to change this setting. In contrast, Windows assumes a resolution of 96 dpi (or 120 dpi using Large Fonts), and this setting can be changed arbitrarily under recent versions of Windows. Unix systems typically use resolutions from 75 to 100 dpi and can usually be configured by the user.</P><P>The difference in assumed resolutions determines how many pixels the computer uses to render text. Assuming a point is 1/72nd of an inch, the Mac OS will use 12 pixels to render 12 point type, while a Windows system will typically use 16 pixels. If you display these characters side by side on the same display, the Windows characters will look 33 percent larger than the Macintosh characters.</P><P><<A HREF="http://www.tidbits.com/resources/522/mac-win-text.html">http://www.tidbits.com/resources/522/mac-win- text.html</A>></P><P>Using a larger number of pixels to render text has many implications, but here are two key concepts to keep at the back of your mind:</P><UL><LI><P>Text is rendered with more accuracy, so important features in a typeface (serifs, special symbols, relationships and spacing between letters, etc.) are more likely to be preserved or presented accurately.</P><LI><P>Fewer characters fit into an arbitrary region of your screen, like a Web browser window. Fewer characters convey less information to a user, so that region can be described as having a lower "information density" than it would if its text were rendered using fewer pixels.</P></UL><P><STRONG>Casualties of War</STRONG> -- Believe it or not, these platform-related differences in text rendering didn't go unnoticed in the Web development community - in fact, they substantially predate the World Wide Web. If the issue is so old, why hasn't it been solved by now?</P><P>The answer is complicated. Remember one truth that has been frustrating many Web authors for years: HTML wasn't meant to describe the physical or typographical presentation of a document; rather, HTML describes the <EM>structure</EM> of a document - which items are headings, which items are links, which items are lists, and so on - in a platform-independent manner. Decisions about a document's presentation were left up to individual Web browsers (or, more properly, "user agents"). They were supposed to look at the structure of the document and present it on their particular platform in a way that made sense.</P><P>This is where the forces of the computing industry reared their ugly heads. For years, operating systems tried to present users with a WYSIWYG world - What You See Is What You Get. Along with graphical user interfaces, WYSIWYG was one of the attractions that brought people to personal computing. HTML's abstract approach frustrated computer users of all stripes - personal, professional, corporate, and others - who expected WYSIWYG. Those expectations morphed into strident demands as the Web became a vehicle for publishing, then commerce.</P><P>When software developers hear strident demands from customers, those demands are translated directly to the phrase "market opportunity." Browser developers rapidly rolled out non-standard HTML tags which almost invariably described the presentation of a document rather than its structure. Netscape quickly muddied the water with CENTER tags, alignment attributes, colors, and ways to specify text wrapping. Web "designers" began publishing books on wringing WYSIWYG-like behaviors out of the browsers of the day (at best advocating extensive use of tables; at worst promoting "spacer GIFs" and violating virtually every principle of an adaptive, cross-platform technology). Although late to the game, Microsoft jumped in with contributions like MARQUEE, background sounds, and ways to slice and dice border colors. Simultaneously, a flurry of graphical HTML editors appeared, often producing markup that looked like the peckings of a thousand typewriter-equipped simians. And, of course, eventually Netscape went hog-wild, unleashing font tags, MULTICOL, the SPACER tag, and a "layers" technology that allowed arbitrary onscreen placement of objects.</P><P>In short, the browser wars were well underway, and much of the artillery was aimed directly at the core principles of HTML. Although folks at the World Wide Web Consortium (W3C) tried to keep a rein on things, 1996's HTML 3.2 specification ended up being a mishmash compromise between the abstract structural concepts of HTML and the presentation demands of an explosively growing industry. And nobody was happy about it.</P><P><<A HREF="http://www.w3.org/TR/REC-html32.html">http://www.w3.org/TR/REC-html32.html</A>></P><P><STRONG>Return to Standards</STRONG> -- As the Internet exploded, however, a funny thing happened. Although the main devices using the Web continued to be personal computers with graphical interfaces, alternatives methods of accessing the Web began to multiply. Text-only browsers not only survived but gained popularity as power users became disgusted with long download times and pointless graphics. WebTV promised to turn any television into a limited Internet appliance, and folks connected PDAs like Apple's Newton to the Web, not to mention Palm devices and cellular telephones. Similarly, ever-present accessibility issues - for users who are visually impaired, color blind, or unable to use traditional computers - weren't being served by the combative, proprietary course of HTML development. Suddenly the <EM>structure</EM> of an HTML document was becoming important again, since details of a document's presentation were irrelevant to these devices. After all, what's a black-and-white Palm device with a 160-by-160 screen size going to do with an HTML table which insists it must be fire engine red and 600 pixels across?</P><P>At the same time, the major browser vendors were hit with a backlash because their incompatible and often ill-conceived HTML extensions created confusion and impediments for both Web users and authors. Conformance to standards became a rallying cry, and standards-oriented efforts like Lynx and Opera gained substantial credibility (as has the Mac OS newcomer iCab). It didn't take long for the heavyweights to see the light, with Netscape spinning its Web browser development off to the Mozilla open source project, and Microsoft pledging to toe the line on standards, in part due to pressure from the ongoing federal antitrust case against the company.</P><P><<A HREF="http://lynx.browser.org/">http://lynx.browser.org/</A>><BR><<A HREF="http://www.opera.com/">http://www.opera.com/</A>><BR><<A HREF="http://db.tidbits.com/article/04593">http://db.tidbits.com/article/04593</A>><BR><<A HREF="http://www.icab.de/">http://www.icab.de/</A>><BR><<A HREF="http://www.mozilla.org/">http://www.mozilla.org/</A>><BR><<A HREF="http://db.tidbits.com/series/1152">http://db.tidbits.com/series/1152</A>></P><P>Nonetheless, demands that Web authors be able to indicate a document's presentation in addition to its structure weren't going to go away. The cat was already out of the bag, with hundreds of thousands of existing Web sites and millions of existing Web users, and more of each appearing every second. What could be done?</P><P><STRONG>The Cascade Effect</STRONG> -- Cascading Style Sheets, or CSS, offer a solution to the structure-and-presentation dilemma. CSS had been percolating quietly within the W3C during the browser wars and was adopted as a recommendation in late 1996, although no mainstream tools supported it. The basic idea behind CSS is to separate formatting information - positioning, sizing, margins, leading, type faces, and more - from the structure of a document, as represented by HTML.</P><P><<A HREF="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</A>></P><P>Style sheets may be integrated into an HTML document (using the STYLE tag) or exist as separately linked external files (convenient for multiple documents which share styles). Conceptually, CSS has similarities to styles used by a word processors: each CSS style, or rule, applies certain formatting characteristics to items. For instance:</P><BLOCKQUOTE><CODE> P { color: red; font-family: Palatino, serif; }</CODE></BLOCKQUOTE><P>Here, P is called a selector, and refers to any <P> tags in the current HTML document. The information in curly braces is called a declaration, and specifies the particular properties and values for a CSS rule. This rule says that the text within all <P> tags in the current HTML document should be presented in red, preferably using the Palatino font. If Palatino is not available, paragraphs should be displayed using the browser's default serif font. Using CSS, you can define a wide variety of display and presentation characteristics for any valid HTML tag in a document - including the document body, heading tags, table cells, links, and more - specific tags, or even unique instances of a tag.</P><P>For now, there are three important things to remember about CSS:</P><UL><LI><P>Unlike styles in a word processor, the display characteristics for any item are determined by the <EM>cascade</EM>, or the combination of multiple style sheets. At a basic level, at least three style sheets are always in play - the current document's, the user's, and the browser's default. Although a document's rules usually take precedence, they can be overridden by user or browser rules. Thus, in theory, a user can define his or her own style sheet so no text is ever displayed below 14 pixels in size, for example, no matter what size the document may specify for text sizing. This gives documents the capability to request particular formatting, while still accommodating the specific needs of users. Basically, documents <EM>suggest</EM> how they should be formatted, rather than demanding a particular presentation.</P><LI><P>Style sheets are the recommended method to control virtually all document layout and presentation in the current HTML 4 standard, although HTML 4.0 Transitional still includes most of the presentation attributes from HTML 3.2, such as specifying some objects' widths and colors. The second version of CSS, called CSS2, was adopted as a W3C recommendation in mid-1998, and expanded on the capabilities of CSS1 in significant ways.</P></UL><P><<A HREF="http://www.w3.org/TR/html401/">http://www.w3.org/TR/html401/</A>></P><UL><LI><P>Since CSS covers a wide range of formatting capabilities, it is extraordinarily complex to implement. As of this writing, <EM>no</EM> released browser fully supports CSS1 or CSS2, in part due to the fallout from the heated browser wars in the late 1990s. Some browsers support useful subsets of CSS1 and CSS2 - most notably the current versions of Microsoft Internet Explorer and Opera - although there are a myriad of significant bugs in current and older browsers. Netscape Communicator/Navigator 4.x makes no claims about supporting any aspect of CSS; instead, CSS support has been relegated to the Mozilla open source project. Some style sheets can influence the display of Web pages in current versions of Netscape, but more often than not the behaviors are incomplete or completely incorrect. This spotty support vastly complicates the use and deployment of style sheets.</P></UL><P><STRONG>To Be Continued</STRONG> -- Wait! What does all this have to do with how many pixels are used to draw text on the Macintosh screen? How does any of this technology improve your Web browsing experience, or let you create friendlier Web pages? Those and other mysteries will be revealed in our next installment.</P><!-- Building Characters: A Brief History of the Web War Geoff Duncan --></div>
<!-- end article text -->
<!-- PayBITS -->
<p> </p><div class="sponsorbox">
<div class="sponsortext"><A HREF="http://www.smithmicro.com/tidbits"><IMG SRC="http://db.tidbits.com/images/badges/StuffItDeluxe2010.gif" ALT="" HEIGHT="50" WIDTH="50" BORDER="0" ALIGN="left"></A>StuffIt Deluxe 2011 has everything you need to backup, encrypt,<br />share, and compress all of your photos, audio and documents.<br />Compress it. Secure it. Send it. Try StuffIt Deluxe 2011 today!<br />Click here for a free 30-day trial: <<a href="http://stuffIt.com/tidbits/">http://stuffIt.com/tidbits/</a>></div>
