Dropcaps
The problem
Whether there is a problem or not, depends on the code you have used for your dropcaps, and whether they are illustrated dropcaps with an image replacing the letter, or just a large letter. Since there is a wide range of practice, the only way to be sure is to check your file in epub format (see Easy Epub/Viewing for how to do this).
With illustration
The suggested method for dropcaps in the Best Practices document uses a CSS 3 feature, and historically PG would only accept CSS 2.1. As of August 2014, PG will now accept the CSS 3 "color:transparent", but the remainder must be valid CSS 2.1. You also need to inform the WWer (or PPVer) that you have used color:transparent for dropcaps.
Since August 2017, PG will also accept other CSS 3 provided the CSS 3 used is code that has been marked as "completed work," and has "REC" (for Recommendation) status according to the W3 specifations. As with dropcaps, it is necessary to add a note to the WWer (or PPVer) concerning what CSS3 has been included. (This is a very new policy and may be adjusted based on an issues experienced with submissions, so Project Gutenberg has asked DP volunteers to watch http://upload.pglaf.org/ for changes.)
Best Practice solution
This method uses the color:transparent CSS 3 feature to make the first-letter transparent since it is represented by the illustrated dropcap. This method has the advantage that screen readers will read the first word correctly as "Marie", rather than "arie" or "Emm-arie" as happens with other methods.
In the CSS
img.drop-cap
{
float: left;
margin: 0 0.5em 0 0;
}
p.drop-cap:first-letter
{
color: transparent;
visibility: hidden;
margin-left: -0.9em;
}
.x-ebookmaker img.drop-cap
{
display: none;
}
.x-ebookmaker p.drop-cap:first-letter
{
color: inherit;
visibility: visible;
margin-left: 0;
}
.upper-case
{
text-transform: uppercase;
}
In the HTML
<div> <img class="drop-cap" src="images/drop-m.png" width="100" height="113" alt=""/> </div> <p class="drop-cap"><span class="upper-case">Marie’s</span> prediction proved a true one,...</p>
Old CSS 2.1 solution - no longer needed
This method hides the first letter of the paragraph behind the dropcap image (by using z-index:1 in the CSS). This historical method had the advantage of not needing color:transparent, but the disadvantage that different width letters will need different classes with slightly different values. The CSS using the x-ebookmaker class hides the illustration and restores the values to their defaults.
In the CSS
img.drop-capi {
float: left;
margin: 0 0.5em 0 0;
position: relative;
z-index: 1;
}
p.drop-capi, p.drop-capi2 {
text-indent: 0em;
}
p.drop-capi:first-letter, p.drop-capi2:first-letter {
padding-right: .2em;
}
p.drop-capi:first-letter {
margin-left: -1.5em;
}
p.drop-capi2:first-letter {
margin-left: -1.3em;
}
.x-ebookmaker img.drop-capi {
display: none;
visibility: hidden;
}
.x-ebookmaker p.drop-capi:first-letter, .x-ebookmaker p.drop-capi2:first-letter {
padding-right: 0em;
margin-left: 0em;
}
In the HTML
<div> <img class="drop-capi" src="images/drop-m.png" width="100" height="113" alt=""/> </div> <p class="drop-capi"><span class="smcap">Marie's</span> prediction proved a true one, ...</p> ... <div> <img class="drop-capi" src="images/drop-a.png" width="100" height="113" alt="" /> </div> <p class="drop-capi2"><span class="smcap">At</span> the beginning of the paragraph is a dropcap image. This text will wrap around the dropcap image, since the image is floated on the left. Once past the dropcap image, the text will continue full-width.</p>
You can experiment with adjusting the margin-left value to ensure the first letter of the paragraph is hidden but the second letter shows. The above example shows the value -1.5em (approximately correct for a capital "M") and -1.3em for a medium width letter like "A". Try -0.9em for an "I".
Result in browser:
Result on Kindle:
Without illustration
Since this does not require use of the color:transparent feature, it is valid in CSS 2.1.
In the CSS
p.drop-cap {
text-indent: 0em;
}
p.drop-cap:first-letter
{
float: left;
margin: 0.15em 0.1em 0em 0em;
font-size: 250%;
line-height:0.85em;
}
.x-ebookmaker p.drop-cap:first-letter
{
float: none;
margin: 0;
font-size: 100%;
}
and in the HTML
<p class="drop-cap"><span class="smcap">At</span> the beginning of the paragraph is a dropcap image. This text will wrap around the dropcap image, since the image is floated on the left. Once past the dropcap image, the text will continue full-width.</p>
The CSS sets the first letter to float on the left, so that text wraps round it, adjusts the margins to position it just right, and makes it larger. The use of the x-ebookmaker class restores the first letter to non-floating, normal size, with no margin adjustment.
Result in browser:
Result on Kindle:
Optional letter spacing improvement
If you are confident with the above, and wish to improve the look by reducing the space between the "A" and the "T", you can set a small negative margin-left on the span around the first word. This may need to be different for different dropcap letters, and also needs setting back to zero using the x-ebookmaker class.
Note that alignment may not be exact in all browsers, e.g. IE9
Add to the above CSS
span.drop2 {margin-left: -0.2em;}
.x-ebookmaker span.drop2 {margin-left: 0;}
span.drop6 {margin-left: -0.6em;}
.x-ebookmaker span.drop6 {margin-left: 0;}
In the HTML, add the appropriate span.drop class to the span around the first word of the paragraph:
<p class="drop-cap"><span class="smcap drop6">At</span> the beginning of the paragraph is a dropcap image. This text will wrap around the dropcap image, since the image is floated on the left. Once past the dropcap image, the text will continue full-width.</p> <p class="drop-cap"><span class="smcap drop2">Most</span> likely, just two or three different values of margin-left will suffice. Small values are suitable for letters like M and W, whereas L would typically need a larger negative margin-left.</p>
Result in browser (e-reader versions are unchanged)
