Pete’s Guide: Web Presentation/Typesetting Test
Pete’s Guide to Technology and Everything Else Pete’s Guide to Technology and Everything Else

Presentation/Typesetting Test

This is a test and demonstration of how the use of Unicode, typesetting characters, and careful attention to long-standing typsetting practices can make the text on Web pages much easier to read and much closer to the quality of type you see in high-quality books.

The two paragraphs below contain the identical information but the first uses the formatting typically found on the Web (virtually none, in other words). The second uses as many typsetting and Web technologies I could think of that can make text look better.

Note: Since some of the characters used are from the Unicode standard—and not all printer drivers support Unicode—you may see a different result on paper than on screen.

I'd like to share some interesting facts with you. Here is No. 1 on my list: Most Kinko's copy shops are open 24x7, and the one nearest to me is located at 37-degrees, 37-minutes North by 122-degrees 23-minutes West. The company's slogan is "Tap Into the Network"--something that makes sense, but isn't all that catchy. Most locations have counters that are exactly 4-feet, 6-1/2 inches high. Pricing for 15 copies of a 50-page report with coil binding should be +/-$180, depending on the location ($0.15 double-sided copying x 50 sheets + $4.95 binding x 15 - 5% Internet discount).

Many newspapers specify that the dateline be set with small caps and followed by an em dash (as in May 25st, San Francisco--An anti-war protest...). Also visible in San Francisco from one of the freeways is a sign for eCoverage, mounted on the side of a residential loft unit. I estimate the height of this sign to be 13-15 feet high. Personally, I'd rather see a sign for Toys "R" Us on the centerline of the building. Send complaints c/o Building Management.

I much prefer 20-degrees Celsius to 20-degrees Farenheit, O2 to CO2, and I could keep on going with more typesetting examples for infinity, but won't, at least until the year MMXII.


I’d like to share some interesting facts with you. Here is № 1 on my list: Most Kinko’s copy shops are open 24×7, and the one nearest to me is located at 37°, 37′ N × 122° 23′ W. The company’s slogan is “Tap Into the Network”—something that makes sense, but isn’t all that catchy. Most locations have counters that are exactly 4′-6½″ high. Pricing for 15 copies of a 50-page report with coil binding should be ±$180, depending on the location (15¢ double-sided copying × 50 sheets + $4.95 binding × 15 − 5% Internet discount).

Many newspapers specify that the dateline be set with small caps and followed by an em dash (as in May 21, San Francisco—An anti-war protest…). Also visible in San Francisco from one of the freeways is a sign for eCoverage, mounted on the side of a residential loft unit. I estimate the height of this sign to be 13–15 feet high. Personally, I’d rather see a sign for Toys “Я” Us on the ℄ of the building. Send complaints ℅ Building Management.

I much prefer 20℃ to 20℉, O₂ to CO₂, and I could keep on going with more typesetting examples for ∞, but won’t, at least until the year ⅯⅯⅫ.

Some other difficult characters for browsers to display are “thin spaces”, “em spaces”, “en spaces”, non-breaking spaces, the Euro dollar (€) sign, and math symbols such as “therefore” (∴).

Browsers should also be able to handle composed characters—the combination of normal letters with accent characters. This is necessary to correctly render phonetic marks used to indicate prononciation of words, as commonly used in dictionaries. There are actually two types of these accent characters. The type used in most American dictionaries derive from Webster’s, and consist of various accent marks added to normal letters. The entry for “Aaron’s beard” in Webster’s should be rendered as “Ãaʹrŏn’s bēard”.

Here are a couple examples of dictonary entries from Webster’s:

abʹȧ‧c̱us
  1. among the Romans, a cupboard or buffet.
  2. an instrument for doing or teaching arithmetic.
abʺär‧ticʺū‧lātion
in anatomy, the kind of articulation or structure of joints which allows free motion in the joint.
abʺī‧ō‧loġʹic̱‧ăl
relating to the study of lifeless matter; not biological.

Definition from Miriam Webster’s:

ar‧chi‧tect \är-kə-ˌtekt\ n [MF archiecte, fr. L architectus, fr. Gk architektōn master builder, fr. archi- + tektōn builder, carpenter — more at TECHNICAL] (1563) 1 : a person who designs buildings and advises in their construction 2 : a person who designs and guides a plan or undertaking <the ⁓ 〜 of American foreign policy〉

The above tilde should be a swung dash.

Among the punctuation characters that software should support are the hyphen (‐) and the non‑breaking hyphen, the en dash (–), the em dash (—), the fraction slash (¹⁄₃₂ and 1⁄32), and the superscript (⁰¹²³⁴⁵⁶⁷⁸⁹) and subscript (₀₁₂₃₄₅₆₇₈₉) numerals. Also important are the combining marks (?⃠—no questions, right? Or for the international information sign: ℹ⃝.)

Math and technical symbols that should also be supported include ℄ (centerline), № (numero sign), Ω (ohm sign), ⅊ (property line), ∟ (right angle), ≠ (not equal to), ⌀ (diameter sign), and ⌭ (cylindricity).

Other symbols that are useful include ☠ (poison), ☢ (radioactive), ☣ (biohazard), (☡) caution, and the various recycling symbols (♲♳♴♵♶♷♸♹♺♻♼♽).



Valid XHTML 1.1! Valid CSS!