Quote:
Originally Posted by jgray
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.
|
It does look good in Firefox. But not in Sigil, Safari or BBEdit (where the drop cap doesn't sit low enough) or, most importantly, in ADE, which doesn't support pseudo-elements.
Now, with a bit of luck, Apple's iPad will have it's own ePub rendering engine, so it might work well there. Which hopefully will encourage Adobe to improve ADE's support for the CSS elements it currently ignores.
So although use of pure CSS for formatting is delightful, I'd recommend putting in a first letter span (& possibly a first words span for fancier effects at the start of a chapter).
The other thing missing is a specification of the line-height of the first letter pseudo-element or span. This is why it renders so differently.
I find your code with a tweak or two works pretty well across browsers and also in ADE. Here's what I have:
Code:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Pseudo Drop Caps</title>
<style type="text/css">
/* */
p {
line-height: 1.2em; /* This keeps the line heights consistent.
text-indent: 1.2em; /* Adjust to suit. */
}
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. */
}
span.first-letter {float: left;
float: left; /* This makes the drop cap work. */
margin-right: 0.02em; /* small gap to next letter */
color: red; /* Change to suit. */
font-size: 4.2em; /* This looks good to me. Change if you want. */
line-height: 0.85em; /* to make it drop enough, but not too much. Will need to be bigger for drop caps with descenders. (e.g. Q) or the font-size will need to be smaller. */
}
span.first-words {
font-variant: small-caps; /* doesn't work in ADE :-( /*
}
/* */
</style>
</head>
<body>
<h1 id="title">Book Title</h1>
<h2 id="author">Author Name</h2>
<h2 class="chapter">Chapter 1</h2>
<p><span class="first-words"><span class="first-letter">T</span>he first letter</span> 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><span class="first-words"><span class="first-letter">T</span>he first letter</span> 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>