PC Alamode Magazine Online; The Lazy Webmaster, Obsessing about Type; Susan Ives

HOME

Calendar

Join / Renew

PC Alamode

About Us

HELP

Archives

Other

by Susan Ives

Index

The Lazy Webmaster

Obsessing about Type
September 2003

Susan Ives

Susan Ives is a past-president and past-webmaster of Alamo PC.

Although I am lazy in most things, I sometimes obsess about typesetting. I know, I know, we’re not really setting type on the Web and because of the fluidity of the medium we will never get the precision that we get with printed text. However, there are things we can do that take a little more time but make our pages look better. More professional. More trustworthy.
We live in a town where many names and words use — or should use — the Spanish alphabet. Jalapeño. César Chávez. ¿Qué pasó? Including diacritical marks is important. It shows respect for the language and makes the words easier to pronounce. Mañana does not rhyme with banana and it’s the tilde over the n that clues us onto this.
If you type your documents in MS Word, you can easily add the special characters and symbols from within the program. Go to the insert menu and select symbol. Highlight the symbol or special character that you want to use, then press the insert button, then OK. If you cut-and-paste a Word document into your HTML file (or save the Word file as HTML) the formatting should trot along with it.
Another way to get the special characters is to use the character map. The character map is hidden under Program Files – Accessories – System Tools – Character Map. Select the character you want to use, click on copy, then go into your word processing or HTML document and paste it in (Ctrl-V will paste.)

ASCII HTML

á á or á

Á Á or Á

É É or É

é é or é

Í Í or Í

í í or í

Ñ     Ñ or Ñ

ñ     ñ or ñ

Ó Ó or Ó

ó ó or ó

ú ú or ú

Ú &#218 or ú

¿     ¿ or ¿

¡ ¡ or ¡

An alternative is to use ASCII codes or HTML formatting. Just type one or the other of these codes instead of the letter or symbol in your HTML document. Mañana would be typed: mañana or ma&#209ana. If you need a grave accent rather than an acute, just substitute grave where it says acute in the chart:
Now, being lazy, I don’t actually type these codes. The HTML editor I use, HomeSite, has a special character tab that creates the code for me. If you are too cheap to spring for HomeSite, Ace HTML is available free from acehtml.com. It has a similar feature.
Now here is my next bugbear. Punctuation.
It is more elegant to use opening and closing quotes. The quote key on the keyboard produces, by default, closing quotes. They look funky when used to open a quotation, don’t they? MS Word senses whether you need opening or closing quotes and produces the correct one automatically. HTML doesn’t.
Another punctuation refinement is dashes. They come in two flavors — en dashes and em dashes. En is the small dash that you would use as word divider. For example: cut-and-paste. 9 a.m.-noon. The em dash is bigger and is used to set off a parenthetical expression — like this one. If you want to get technical, an en dash is half the point width of the font size and the em dash is the full width. I am typing this in 12 point; the en dash is 6 points and the em dash is 12 points. Here are the HTML codes:

Opening single quote
‘


Closing single quote and apostrophe
’


Opening double quote
“


Closing double quote
”


En dash
–


Em dash
—


I’m sure that you have deduced two things. First, these rules apply as much — if not more — to the printed page as they do to Web writing. Second, there are many more symbols than I have described here. Do you ever have a need for any of these? ¢£©®±¼½¾÷
That’s just a sampling of what’s available. Not all symbols are available with all fonts. Many free display true type fonts won’t even contain punctuation. But a full font set will have all this, and more.
For printed work, use the MS Word insert-symbol feature or the character map. For HTML there is a good guide.
Two final notes. HTML uses the greater-than and lesser-than signs as tags. If you use them straight from the keyboard they will not display on the screen and will mess up your code. Instead, use < for lesser than < and > for greater than >.
If you need superscript or subscripts, you use a tag. The tag for superscript is <SUP></SUP> which will render like this: 10⁴. Subscript is <SUB></SUB> which will render like this: ABC₃. The code puts it in the right place and makes it smaller. In MS Word, the super- and subscript are controlled from the Format-Font menu. The Word formatting, in this case will not transfer to HTML.