Quite some time ago, I posted in another thread about how I used the span tag to do drop caps. Others have also posted here about similar approaches.
While messing around recently, I came up with a much simpler method of creating a "pseudo" drop cap. While not as nice as a real drop cap, it doesn't look half bad. The real advantage of this method is that it doesn't require any extra HTML markup at all. The magic is all done in the stylesheet.
Comments are in the stylesheet. BTW, although I haven't posted in some time, I have been in lurk mode.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Pseudo Drop Caps</title>
<link href="sample.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 id="title">Book Title</h1>
<h2 id="author">Author Name</h2>
<h2 class="chapter">Chapter 1</h2>
<p>The first letter of this sentence should be red. Lorem ipsum dolor sit amet
consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et
semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi
at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit
Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit.
Nunc congue pretium.</p>
<p>This sentence should be normal. Lorem ipsum dolor sit amet consectetuer
Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna
eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et
et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper
in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p>
<h2 class="chapter">Chapter 2</h2>
<p>The first letter of this sentence should be red. Lorem ipsum dolor sit amet
consectetuer Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et
semper magna eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi
at lacinia et et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit
Proin. Semper in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit.
Nunc congue pretium.</p>
<p>This sentence should be normal. Lorem ipsum dolor sit amet consectetuer
Quisque pharetra velit nisl et. Scelerisque dignissim wisi sed et semper magna
eros consequat sapien platea. Nam hendrerit Donec Sed Aliquam mi at lacinia et
et molestie. Curabitur tempus at ut ut diam Nunc id Aenean velit Proin. Semper
in Sed ligula lacinia lacinia ac Duis ullamcorper velit elit. Nunc congue pretium.</p>
</body>
</html>
Code:
p {
line-height: 120%; /* This keeps the line heights consistent.
Try without this to see what goes wrong. */
text-indent: 1.2em; /* Adjust to suit. */
}
h1#title {
text-align: center;
}
h2#author {
text-align: center;
}
h2.chapter + p { /* No indent wanted on the first paragraph of a chapter. */
text-indent: 0;
}
h2.chapter + p:first-letter { /* This is the pseudo-dropcap. The first letter
of the first paragraph after a chapter heading. */
color: red; /* Change to suit. */
font-size: +3em; /* This looks good to me. Change if you want. */
vertical-align: -30%; /* Can't go much lower w/o overlapping next line. */
letter-spacing: -.15em; /* Tighten up spacing between the letter and the word.
IE8 needs more negative than this. Should I be surprised? */
}