Dropcaps

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

< Easy Epub

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>

Story-of-silk.png

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:

Dropcap2.png

Result on Kindle:

Dropcap4.png

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:

Dropcap3.png

Result on Kindle:

Dropcap4.png

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 text-indent instead of zero. This may need to be different for different dropcap letters, and also needs setting back to your default value using the x-ebookmaker class.

Note that alignment may not be exact in all browsers, e.g. IE9

In the CSS

p.drop-cap {
  text-indent: -0.5em;
}
p.drop-cap2 {
  text-indent: -0.2em;
}
p.drop-cap:first-letter, p.drop-cap2:first-letter
{
  float: left;
  margin: 0.15em 0.1em 0em 0em;
  font-size: 250%;
  line-height:0.85em;
  text-indent: 0em;
}
.x-ebookmaker p.drop-cap, .x-ebookmaker p.drop-cap2 {
  text-indent: 0em; /* restore default */
}
.x-ebookmaker p.drop-cap:first-letter, .x-ebookmaker p.drop-cap2:first-letter
{
  float: none;
  margin: 0;
  font-size: 100%;
}

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>
<p class="drop-cap2"><span class="smcap">Most</span> likely, just two or three different values
of text-indent will suffice. Small values are suitable for letters like M and W, whereas L would
typically need a larger negative text-indent.</p>

Result in browser (e-reader versions are unchanged)

Dropcap5.png

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu