Drop caps in ePub

[remadepreacher]

One problem with producing the ePub from Indesign — I can't get dropped caps to work. I tried building them manually in text boxes but no difference.

I found this suggestion on twitter "are you aware that you can use p::first-letter{-webkit-initial-letter: 3;} to render native DropCaps in iBooks?" I tried placing this in first paragraph a couple of places in HTML (using Sigil)but get an error.

Can anyone tell me where to place it in this first sentence?

<p class="Non-chapter-Heading-2-"><a id="_idTextAnchor000"></a>Prologue</p><p class="_st-Paragraph"><span class="Drop-Cap">I</span>was in a place I never dreamed I would be.

(Note: drop cap is only set to use another font for the first letter.)

[remadepreacher]

I should explain a bit more. Drop caps were created in the print version in CC 2018. When exported to ePub 3, they disappear. With a little tweaking I can get them to show up in the iBook but above the whole paragraph. Nothing seems to make a difference. I then tried creating them manually in their own text box but it will not get in the right place either.

I really don't know anything about CSS and HTML but was giving it a try.

[rayek.elfin]

Try this code with an intro paragraph with a .paraintro class for a multi-line dropcap. You will have to adjust the font size and other properties for your own project, and leave out the float if you don't need drop-cap text wrap. Or apply to the dropcap class.

.paraintro::first-letter {

color: #903;

float: left;

font-family: Georgia;

font-size: 93px;

margin-top: 8px;

padding-right: 8px;

margin-left: -8px;

}

[remadepreacher]

Thanks, Rayek. I tried just putting this in a few places and taking some out (with Textura substituted for font) but get the "not a well formed XML" message.

Here is what the code looks like currently:
<p class=“_st-Paragraph”><span class=“Drop-Cap”>I</span>was in a place I never dreamed would be.

Drop-Cap is the name of character style.

How and where should I put your code?

[rayek.elfin]

Have you tried this?

<p class=“_st-Paragraph”><span class=“Drop-Cap” style="color:#903;float:left;font-family:Textura;font-size:93px;margin-top:8px;padding-right:8px;margin-left:-8px;">I</span>was in a place I never dreamed would be.</p>

[remadepreacher]

Thanks, rayek. This worked. Thanks!

[remadepreacher]

The leading on the drop cap grabs an extra line in text wrap. I have the character leading set to 0 in the Character style but it is obviously a lot larger than this.

[remadepreacher]

Spoke too soon. The drop cap does not show up in the iBook.

[remadepreacher · Accepted solution]

With the help of someone else, I was finally able to change the drop cap by replacing the information directly in the character style rather in the paragraph in Sigil. I removed the information between brackets and replaced with the following:

font-family:Textura, serif;

line-height: -38%;

height:0.95em;

font-size: 420%;

margin-right: 0.075em;

margin-top: -0.15em;

float:left;font-style:normal;

font-weight:normal;