Getting Clever with Text
Since dinosaurs ruled the earth, web designers have sought ways of breaking free of the restrictions forced upon them when it comes to styling text. As a result, numerous cool methods of bridging the gap between print and web design have materialized. Some of these methods incorporate existing (X)HTML elements, while others rely on nifty combinations of CSS values you have learned so far.
Quote Me on This
The (X)HTML element <blockquote> is a very useful tool for singling out a quote or creating a pullquote (a key sentence selected from a body of text and used as a draw for the reader). Take the existing document called text.html and add the <blockquote> element into it:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Content is King</h1>
<p>This is a paragraph. Nothing particularly special about it,
but the visitor is going to read it anyway, so it may as well say
something useful.</p>
<h2>True Fact</h2>
<p>Useful. OK. Did you know that a shrimp's heart is actually in
its head? It's true.</p>
<blockquote>Collison stands by his statement that a shrimp's heart
is actually in its bottom, and doggedly refuses to believe that he
is wrong.</blockquote>
</body>
</html>
Save text.html and reload it in your browser. Now, the rendered page should look as it does in Figure shown below. The block quote’s default styling sees it indented by approximately 40 pixels while inheriting existing font styling from the body selector.
The additional, unstyled block quote appears underneath the existing text.
By overriding the inherited font styles, the <blockquote> element can be styled to stand out from the surrounding text, by declaring a different font, size, and style. Also, the default margin can be overridden to pull the text a little closer to the container’s edge:
/* Style the blockquote */
blockquote {
margin: 0 0 0 20px;
line-height:150%;
font: italic 15px Georgia,Times,serif;
}
The result can be seen in Figure below. The quote is clearly defined to contrast heavily with the existing page text.
Now the block quote is clearly defined against the surrounding text.
Indenting Paragraphs
Another device you will be familiar with from the print world is that of indenting the first line of a paragraph. This acts as a clear hook for the reader, drawing the eye to the beginning of each paragraph, and is especially useful where line-height is quite narrow. CSS gives us the text-indent property for this.
/* paragraph styling */
p {
font: 12px verdana,arial,sans-serif;
text-indent:15px;
}
The result of this 15px text-indent can be seen in Figure.
A 15-pixel indent is added to the paragraphs.
Ye Olde Drop Caps
Drop caps might be more familiar to you as those wonderfully illustrated opening letters of paragraphs in spell books and very olde bibles, but it is a device that has been used in probably every magazine and newspaper since mass printing began. The technique sees the very first letter of a paragraph singled out and treated differently from the rest of the text, typically many times larger than the other characters, and possibly bolder and colored differently. The drop cap may also be boxed inside its own container.
Creating a drop cap requires no extra markup in the (X)HTML, although to avoid applying this method to every paragraph, it is advisable to single out the paragraph requiring the drop cap by giving it a class.
<h1>Content is King</h1>
<p class="dropcap">This is a paragraph. Nothing particularly
special about it, but the visitor is going to read it anyway,
so it may as well say something useful.</p>
This dropcap class ensures only this paragraph will be affected, and acts as a hook for the CSS.
Introducing the first-letter Pseudo Element
Now for a clever trick. Here, a pseudo element is introduced to the new p selector, separated by a colon. Pseudo elements are used to add special powers to selectors, and can single out the first letter of a paragraph or the first line, or be used to insert a CSS rule after an (X)HTML element. This example uses first-letter to single out the first letter of any paragraphs given the dropcap class.
/* Create drop cap characters */
p dropcap:first-letter {
float: left;
width: 40px;
font: 60px "Lucida Grande",Arial,sans-serif;
line-height: 50px;
}
Note that float:left is declared to ensure that the remaining paragraph text “floats” around the enlarged drop cap. Floats will be discussed in more detail later in the book. The width is defined to ensure the drop cap has enough space in which to sit, and obviously the font-size is increased significantly to enlarge the character, as you see in Figure.
The first letter of the paragraph is turned into a drop cap.
The font size and width need to be adjusted depending on the actual font you use. For example, a 60-pixel Georgia character demands a little more space than one rendered in Lucida Grande.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]