How Can I Make Hypertext Look Cool?

 < Day Day Up > 



Styling text is something that CSS can do well—oftentimes even in older browsers where more advanced CSS was never supported fully. In the past, designers and developers alike may have leaned on images for any instances where styling text beyond sizing or making it bold was required. SomPe sites began to take this too far, resulting in an accessibility nightmare that is simply not tolerable by today's standards. (Ever try to read a site whose text is mostly handled by images—in a text browser?)

In order to give you some alternatives to creating images and to answer the question posed previously, we'll take an unstyled block of hypertext and progressively add various CSS rules to transform it into something attractive.

Times They are a-Changing

To begin, let's look at the block of text we'll be manipulating when viewed with the default font of the browser—in my case, Times at 16 pixels. I'm using the Safari browser on Mac OS X, and because of it, we're seeing text being rendered as antialiased. Similar results will occur with ClearType enabled on Windows XP.

Times (or the variant Times New Roman) is the default font of many browsers—however, this could easily be changed by users to whatever they fancy, and of course shouldn't be relied upon.

Figure 13-1 shows us the unstyled text that we'll be using throughout the chapter: a simple title marked up with an <h1> tag, followed by three paragraphs of riveting home improvement advice.

click to expand
Figure 13-1: Heading and text as viewed by default in the browser

Changing Line Height

One of the simplest and most effective ways we can style text is by applying the line-height property. Providing some extra space between lines can make paragraphs more readable and attractive. It'll do wonders for your pages.

Adding the following CSS rule to the <body> element does the trick nicely. We could also add the following rule to any element we'd like—for instance, if we'd like only <p> elements to receive the increased line height.

 body {   line-height: 1.5em;   } 

We're essentially saying that above that text on the page should be a line height of one and a half times the height of the character. I like using em units for line-height, as they will increase or decrease relative to the font size.

Figure 13-2 shows the results of the line-height property being applied to our example.


Figure 13-2: Default text with increased line height

It's looking better already. It's amazing what a little line-height will do.

All in the Family

We can, of course, change the typeface as well, keeping in mind that we're limited to whatever fonts may be installed on the user's system.

Let's assign a set of preferred fonts for our example using the font-family property. The idea here is to specify a list of fonts separated by commas—in the order of preference. If the user doesn't have the first font on the list installed, the browser will choose the next in the list, and so on.

 body {   font-family: Georgia, Times, serif;   line-height: 1.5em;   } 

In the preceding example, we're saying, "Render all text using the Georgia typeface. If the user doesn't have Georgia installed, use Times. If the user doesn't have Times installed, use the default serif font."

Figure 13-3 shows the example text with the font-family property added.


Figure 13-3: Our example rendered with the Georgia typeface

Font Names with Spaces

For specifying font names that include spaces (e.g., Lucida Grande), we'll need to enclose those names with quotation marks.

In the example that follows, we're specifying Lucida Grande (a popular Macintosh font) as the preferred font, with Trebuchet MS (a popular Windows font) as the second alternative. Lastly, we'll add a catch-all sans-serif choice for the users' default sans-serif font, should they not have the previous two fonts installed.

 body {   font-family: "Lucida Grande", "Trebuchet MS", sans-serif;   line-height: 1.5em;   } 

Kerning (a.k.a. Letter-Spacing)

Kerning is a word used to describe the spacing between characters in the typography world. The equivalent CSS property is letter-spacing. Next, let's use the letter-spacing property on the <h1> element to spice up the title in our example.

By applying letter-spacing to <h1> elements, we can start to achieve stylish titles— without having to open an image editing application to create graphic text.

First, let's apply negative letter-spacing to tighten the letters in the title:

 h1 {   letter-spacing: -2px;   } 

This results in the example shown in Figure 13-4.


Figure 13-4: Negative letter-spacing applied to our <h1>

Alternatively, let's try adding a positive letter-spacing amount and also use the font-style property to make the title appear in italics.

 h1 {   letter-spacing: 4px;   font-style: italic;   } 

Figure 13-5 shows the results. Pretty stylish for just hypertext, isn't it? It's wise not to apply too much letter spacing in either direction, as it can easily begin to make the text more difficult to read. And who cares if text is stylish when it's unreadable, right?


Figure 13-5: Positive letter-spacing and italics applied

Drop Caps

Commonplace in print, drop caps add a certain panache and elegance to paragraphs of type—and yes, it's possible to achieve them without images, using only CSS.

First, we'll need to add a "style hook" to the markup so that we'll be able to call out the first letter of the first paragraph uniquely. We'll wrap the "I" with a <span> element and give it a drop class so that we may reuse it throughout a page or site.

 <p><span >I</span>f you're painting with latex paints, and the job ... 

start sidebar

It's possible in some modern browsers that get the CSS2 specification completely right to use the :first-letter pseudo-class to access the first letter of the paragraph—without adding the extraneous <span> element. While it's semantically superior, the effect would unfortunately not appear in many browsers.

end sidebar

Now that we have complete control over the "I" in the first paragraph, let's add the CSS declaration that will enable us to enlarge the letter and float it to the left (so that other text will flow around it). We'll also add a decorative background and border:

 .drop {   float: left;   font-size: 400%;   line-height: 1em;   margin: 4px 10px 10px 0;   padding: 4px 10px;   border: 2px solid #ccc;   background: #eee;   } 

Coupled with the styles we've been adding to the example thus far, Figure 13-6 demonstrates how the resulting drop caps would appear in the browser—all without the need for images, and using simply CSS and markup.


Figure 13-6: Drop caps example created with CSS

Text alignment

Again looking to the print world for inspiration, we could apply justification to our text using the text-align property. Justified text spaces words out so that each line is of equal length, making a tight, defined column.

The CSS for turning justification on for all text in our example would be as simple as

 body {   font-family: Georgia, Times, serif;   line-height: 1.5em;   text-align: justify;   } 

Figure 13-7 shows the example block of text, now justified!

click to expand
Figure 13-7: An example of justified text, using the text-align property

Notice that the text lines up evenly on both the left and right sides of the paragraphs. Other possible values for the text-align property are left, right, and center.

For instance, we could also apply the text-align property to the <h1> element to center the title of our example by adding the following rule:

 h1 {   letter-spacing: 4px;   font-style: italic;   text-align: center;   } 

Figure 13-8 shows the results of the centered title.

click to expand
Figure 13-8: Centered <h1> using the text-align property

Transforming Text

The text-transform property can modify the capitalization of text—regardless of how capitalization appears in the markup. For instance, in our example, our title is marked up with the following:

 <h1>A Painting Tip</h1> 

Using the text-transform property in our CSS, we could capitalize (or place in lowercase if we wished) the entire title—without changing the markup. In addition to the previous styles we've added to <h1> elements, the CSS to capitalize our title would be simply the following:

 h1 {   letter-spacing: 4px;   font-style: italic;   text-align: center;   text-transform: uppercase;   } 

resulting in what we see in Figure 13-9. Without having to mess about with the markup, we can change capitalization of certain elements on the page or even entire sites at will, modifying only the CSS.


Figure 13-9: Capitalization of the heading using CSS

Small Caps

Most browsers will recognize the font-variant property, allowing us to render type in small caps (where the text is capitalized with varying character sizes).

Let's apply the font-variant property to the heading of our example:

 h1 {   letter-spacing: 4px;   text-align: center;   font-variant: small-caps;   } 

Figure 13-10 shows us the results of our heading in small caps—yet another way to mimic the print world using only markup and CSS.


Figure 13-10: Our heading rendered in small caps

Paragraph Indentation

Looking again to the print world (gee, are you seeing a trend here?), we can indent the first line of paragraphs by using the text-indent property. Adding a positive value will indent the text by that amount.

Therefore, let's indent each paragraph in our example 3em—or about the maximum width of three characters. I'm going to go ahead and remove the drop caps from the results, so as not to interfere with the indentation of the first line of the first paragraph.

The CSS for indenting the first line of all <p> elements would go like so:

 p {   text-indent: 3em;   } 

Figure 13-11 shows the results, where you can see that only the first line of each paragraph is indented the amount we've specified. I chose to use em units, as the indentation's width will remain relative to the font size—especially helpful if users decide to increase (or reduce) the size of fonts themselves.

click to expand
Figure 13-11: Indented paragraphs as a result of the text-indent property



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net