Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 324

Listing 9-10. The Upper Layer (Compared to Listing 9-9)

#logo {
position: absolute;
width: 146px;
height: 120px;
margin-top: 20px;
margin-left: 20px;
z-index: 2;
}

■ Flash content requires an additional parameter that allows the developer to override the default setting that
renders Flash content in front of other elements (see the section “embedding Flash in XhtmL”).

Caution

Typography
Text has always been a fundamental web page feature. The first web documents contained mainly (if not exclusively)
text with black fonts over a white background. In the next few years, the Web gradually transformed to a full multimedia
platform. At the same time, more sophisticated whitespace handling and character encoding have appeared.
In contrast to topic and other printed media where proper type arrangements and type design have always been
ensured by typography, until recently the Web lacked these features.
After the introduction of TFT monitors and the ClearType fonts designed for them, characters have become really
clear on the screen. With the increasing popularity of web fonts, an endless variety of fonts appeared on the Web.
You must be careful to provide not only eye-catching fonts and type but also legible text. The technique required
to achieve that aim is known as web typography , which should also guarantee the proper appearance of characters
and whitespace.

Misused Characters
According to the World Wide Web Consortium, you should be careful to apply the proper punctuation marks on the
Web instead of their misused equivalents (Table 9-1 ) [10]. Which punctuation marks are typographically correct
depends on the natural language of the web page. For example, in British English, single quotes are often preferred
to double quotes, and commas generally park outside rather than inside the closing mark. In other languages, the
quotation marks might be inverted. Similar differences exist in the use of en and em dashes.

Table 9-1. Frequently Applied Punctuation Marks and Their Misused Equivalents

Character Name Entity/Entities Misused Equivalent(s)

“ “ "

Opening quote

” ” " Closing quote

' ’ ' Apostrophe

- – or – - En dash (ranges)

— — or — - or -- Em dash (change of thought)

… … or … ...

Horizontal ellipsis (an omission or a pause)