WEB STANDARDS CREATIVITY

178
When faced with the following set of CSS rules, a web
browser will set the specified text in Georgia Italic, which
is of course a different design from—and not merely a
slanted bastardization of—Georgia Regular.
font-family: Georgia;
font-style: italic;
However, if I were to add a rule of font-variant: smallcaps,
the text couldn’t be set in true small caps because
Georgia has none to offer. Likewise, the vast majority of
the most widely, publicly disseminated digital text faces
do not include a set of small caps. As a result, web
browsers use faux small caps by default. Before the dawn
of screen font-smoothing technologies like Quartz (Mac
OS) and ClearType (Windows), this wasn’t much of an
issue, since the subtleties of faux small caps’ proportional
differences were lost to the pixelated letters’ low resolution
(Figure 7-23). With screen font-smoothing becoming
increasingly prevalent, though, we can no longer rely on
the browser to cover up its own typographic faux pas.
Faux small caps now look more or less the same on the
screen as they do in print.
Figure 7-23. Pixelated small caps (top) vs.
smoothed small caps (bottom)
Though faux small caps have been the object of legitimate
scorn since long before the Web even existed, the
argument could be made that they are acceptable on the
Web, if only because true small caps simply aren’t available
yet. Conspicuous though they may be, they still
certainly have the power to enhance and enrich the page.
The decision of whether or not to use them is yours
to make.
More pseudo-element selectors in an
imperfect world
My last attempt at using a pseudo-element selector
ended in heartache (remember :first-letter?), but, for
the sake of small caps, I’m going to try again, this time
with :first-line. Unsurprisingly, :first-line affects its
targeted element’s first line of text. In this case, the targeted
element will be #about’s first paragraph.
#about p.first:first-line {
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .1em;
}
By now, these CSS rules should be fairly elementary, but
there is one line that may have raised a questioning eyebrow.
Why did I use text-transform: lowercase? The
reasons are both preferential and practical. Small caps
can, by their nature, function as either uppercase or lowercase
letters. Accordingly, words that would ordinarily
require capitalization (such as proper names) may or may
not begin with a full capital letter when set in small caps.
I usually prefer not to capitalize words set in small caps as
a matter of consistency, since acronyms typically use
small caps in place of the full caps that otherwise construct
them. As for the practical concern, I don’t want any
more attention drawn to the artificiality of my faux small
caps than is necessary. To have them sit alongside full
caps invites comparison and further exposes their inauthenticity
(as seen in Figure 7-23), so I prefer to keep
them among their own faux kind if I can.
This may be sound reasoning, but Internet Explorer and
Safari will hear none of it. Each has its own bug that
prevents the intended effect from happening. Internet
Explorer will not acknowledge any combination of
font-variant and text-transform rules, and Safari will
not acknowledge a text-transform rule applied to a
pseudo-element selector. As a result, Internet Explorer
and Safari both render the markup’s capital letters as full
caps. Firefox and Opera display the text correctly.
The Safari bug in particular makes it impossible for my
intended effect to render consistently across browsers, as
it's a combination of the pseudo-element selector firstline
and the text transform rule lowercase that I'm
trying to use here. Therefore, avoiding further changes to
my markup and ensuring that my small caps remain only
on the first line of text will require a compromise: Internet
Explorer and Safari will display a potentially mixed
bag of full caps and faux small caps. Looking at the finished
page (Figure 7-24), I think I could definitely do a lot
worse!