View Single Post
Old 03-16-2010, 02:38 AM   #75
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 512
Karma: 1018067
Join Date: Mar 2008
Device: Galaxy Tab 10.1 & Note II
Pseudo Drop Caps

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? */
}
jgray is offline   Reply With Quote