View Single Post
Old 03-16-2010, 04:24 AM   #77
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: 548
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
Drop Caps Holly Grail?

After more experimentation (I can't leave well enough alone), I found a way to make a real drop cap without using span, or any additional HTML markup. Nothing but CSS.

Further tweaks and input welcome. As for me, it's late and I'm off to bed.

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. */
	margin-left: .4em;          /* Add some margin so we can move the dropcap left. */
	margin-right: .4em;
}

h1#title {
	text-align: center;
}

h2#author {
	text-align: center;
}

h2.chapter + p {
	text-indent: 0;             /* No indent wanted on first paragraph of a chapter. */
}

/* This looks really good in FF 3.6, but the drop cap is too high in IE 8. */
h2.chapter + p:first-letter {   /* This is the pseudo-dropcap. The first letter
								of the first paragraph after a chapter heading. */

	float: left;                /* This makes the drop cap work. */
	margin: -.1em;              /* Move the drop cap left a bit for looks. */
	letter-spacing: .1em;       /* Adjust spacing to rest of first word. */
	color: red;                 /* Change to suit. */
	font-size: +3.8em;          /* This looks good to me. Change if you want. */
}
jgray is offline   Reply With Quote