DropcapsForEpub

From DPWiki
Jump to navigation Jump to search

Drop-Caps for EPUB and MOBI Editions

This page is begun 2018 Feb 3.

In an ideal world, it would be possible to display drop-cap images in the html, the epub, and the mobi editions, as they were shown in the original printed book being transcribed, but there are compromises with all the different methods of displaying them.

Warning: Note that in the modified versions suggested on this page, the compromise for displaying the drop-cap in mobile versions is that the first word in the chapter cannot be searched for, nor will it be read correctly by screen-reading software. This compromise applies to the HTML and mobile versions. The Best Practices code favors accessibility and allows searching and screen-reading, but will not display the illustration in mobile formats.

Also note that the code on this page uses the deprecated "@media handheld" method to control CSS on mobile devices.

Best Practices, and a Modification

The Best Practices code for HTML browsers, when translated by ebookmaker into epub format, does not work in Adobe Digital Editions (ADE), nor, presumably, in any of the many epub browsers that are derived from ADE. Therefore, the Best Practices documentation suggests that illustrated drop-caps not be displayed in mobile formats.

The following code contains two slightly modified versions of Best Practices code; both versions are modified to permit viewing the drop-cap in the epub and mobi editions. The first version, additionally permits exact sizing of the illustration; this one displays correctly in mobi, but is not readable in ADE. The second version displays correctly in mobi, and readably (meaning visibly but not via a screen-reader), but not correctly, in ADE. Attention: "color:transparent" is CSS3 but permitted by PG - just flag to the WWer that you have used this piece of CSS3.

css

body {
 margin: 0.5em;
 padding: 0.5em;
 font-size: 130%;
}
div,
p {
 margin: 0;
 padding: 0;
 max-width: 20em;
 line-height: 1.3;
}
p {
 text-indent: 1.5em;
 text-align: justify;
}
.pfirst {
 text-indent: 0;
}
.imgdropcap {
 margin: 0 0.5em 0 0;
 width: 5.4em;
 height: auto;
}
.pdropcap:first-letter {
 color: transparent;
 visibility: hidden;
 margin-left: -0.9em;
}
.divdropcapbox,
.imgdropcap {
 float: left;
}
.imgdropcap-e1 {
 width: 5.4em;
 height: auto;
}
.divdropcapbox {
 margin-left: 0;
 margin-right: 0.5em;
}

@media handheld {
 .divdropcapbox,
 .imgdropcap {
  float: left;
 }
}

html

<div><img class="imgdropcap"
  src="images/img1.png" width="102" height="114" alt="M"/></div>
 
 <p class="pfirst pdropcap">MARIE'S prediction proved a true
 one, for within another fortnight the mulberry buds were
 tipped with green, and it was evident they would be in leaf
 with the coming of a few more days of warm sunshine.</p>
 
 <p>"Our silk growing will begin in earnest now," declared
 Madame Bretton, "and before it does I think we'd better
 take one last careful survey of the silk-house to make sure
 that everything is all right."</p>
 
 <div class="divdropcapbox"><img class="imgdropcap-e1"
  src="images/img1.png" width="102" height="114" alt="M"/></div>
 
 <p class="pfirst pdropcap">MARIE'S prediction proved a true
 one, for within another fortnight the mulberry buds were
 tipped with green, and it was evident they would be in leaf
 with the coming of a few more days of warm sunshine.</p>
 
 <p>"Our silk growing will begin in earnest now," declared
 Madame Bretton, "and before it does I think we'd better
 take one last careful survey of the silk-house to make sure
 that everything is all right."</p>

The first of the two examples shown in the html section is Best Practices code, modified slightly to permit exact sizing of the drop-cap image, in em dimensions, and extended to epub/mobi via the @media handheld{} statement shown in the css section. This code works in mobi (tested in Kindle Previewer 3.17.1) but not in Adobe Digital Editions (tested in ADE 4.5.7.179634). The second example is Best Practices modified to work better in ADE. This version works fine in mobi, but in ADE the initial M of MARIE is not hidden as it should be. ADE evidently ignores the color:transparent and visibility:hidden attributes.

20180203-01.jpg 20180203-02.jpg

Suggested Improvement version 20180203-01

We may rather easily fix the Best Practices code to work in both mobi and epub (if we accept the accessibility compromises described above) by giving up the attempted suppression via css of the first letter of MARIE; just go ahead and eliminate it. Thus, this suggested version of drop-cap code is

css

body {
 margin: 0.5em;
 padding: 0.5em;
 font-size: 130%;
}
div,
p {
 margin: 0;
 padding: 0;
 max-width: 20em;
 line-height: 1.3;
}
p {
 text-indent: 1.5em;
 text-align: justify;
}
.pfirst {
 text-indent: 0;
}
.ddropcapbox {
 float: left;
}
.idropcap {
 width: 5.4em;
 height: auto;
}
.ddropcapbox {
 margin-left: 0;
 margin-right: 0.5em;
}

.x-ebookmaker .ddropcapbox {
  float: left;
}


with html

 <div class="ddropcapbox"><img class="idropcap"
  src="images/img1.png" width="102" height="114" alt="M"/></div>
 
 <p class="pfirst">ARIE'S prediction proved a true
 one, for within another fortnight the mulberry buds were
 tipped with green, and it was evident they would be in leaf
 with the coming of a few more days of warm sunshine.</p>
 
 <p>"Our silk growing will begin in earnest now," declared
 Madame Bretton, "and before it does I think we'd better
 take one last careful survey of the silk-house to make sure
 that everything is all right."</p>

This code renders as shown below.

20180203-03.jpg

If images are not available for display, the initial letter M is displayed correctly via the alt="M" attribute of the image.

Modification for Poetry Verse, version 20180203-02

Following is css and html for an example of an illustrated drop-cap in verse, taken from my PP project The Pleiades Club Year Book 1910.

css

body {
 margin: 0.5em;
 padding: 0.5em;
 font-size: 130%;
 border: medium gray solid;
 max-width: 25em;
}
div {
 margin: 0;
 padding: 0;
 max-width: 20em;
 line-height: 1.3;
}
.iglyph-d {
  height: auto;
  width: 5.5em;
}
.dpcapverse {
  margin-left: 0;
  margin-right: 3em;
}

.dpoemlft {
  margin: 0.3em 0 0.3em 1.5em;
}
.dstanzalft {
  margin: 1em 0;
}
.dpv00,
.dpv01,
.dpv20 {
  display: block;
  text-align: left;
  padding-left: 3em;
}
.dpv00 {
  text-indent: -3em;
}
.dpv01 {
  text-indent: -2em;
}
.dpv20 {
  text-indent: 49.1%;
}
.dpcapverse {
  float: left;
}

@media handheld {
  .dpcapverse {
   float: left;
  }
}

html

 <div class="dpoemlft"><div class="dstanzalft">
 <div class="dpcapverse"><img class="iglyph-d"
     src="images/ia036-t.jpg" width="140" height="154"
     alt="T" /></div>
 <div class="dpv00">HE
   trouble was, no word would rhyme with <i>month</i>.</div>
 <div class="dpv01">And that was why my lovely birthday sonnet,</div>
 <div class="dpv01">Meeting this obstacle, was wrecked upon it.</div>
 <div class="dpv00">“Oh, fairest day of springtime’s fairest month”—</div>
 <div class="dpv00">Thus I began, and there I stuck at “month.”</div>
 </div><!--dstanzalft--><div class="dstanzalft">
 <div class="dpv01">Her birthday is the first of May.</div>
 <div class="dpv20">“Dog-gone it!”</div>
 <div class="dpv01">I cried, “I can’t go on, now I’ve begun it—</div>
 <div class="dpv00">Unless, perchance, I write of May the <i>one</i>-th.”</div>
 </div><!--dstanzalft--><div class="dstanzalft">
 <div class="dpv00">Then went I to my lady love, with all</div>
 <div class="dpv01">The story of my tenderness and trouble—</div>
 <div class="dpv01">Explained how words in Poetry must double,</div>
 <div class="dpv00">And how my sonnet’s sweetness turned to gall</div>
 <div class="dpv00">Because I couldn’t find a rhyme for “month.”</div>
 <div class="dpv00">She laughed, and lithped the answer—“You’re a dunth!”</div>
 </div><!--dstanzalft--></div><!--dpoemlft-->

This poem is rendered in Kindle and ADE as shown below.

20180203-04.jpg

The ADE rendition is pretty accurate. Kindle generally ignores several categories of css; here it ignores the max-width specification for div, and it makes the illustration too small (it is supposed to be 5.5em wide). It always ignores line-height, I believe, but in this case its default seems to be near my own specification. Oh, well. It's readable, and looks pretty good.

P.S. Some of this code, including the max-width spec., is purely for display purposes for this wiki example; it's not all necessary or recommended for use in a book. 20180203 14:54 I welcome and request constructive suggestions, comments, and questions — Richard.