Skip to main content
remadepreacher
remadepreacher
Inspiring
November 8, 2018
Answered

Drop caps in ePub

  • November 8, 2018
  • 2 replies
  • 3873 views
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.)
This topic has been closed for replies.
Correct answer remadepreacher

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


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;

2 replies

rayek.elfin
rayek.elfin
Legend
November 15, 2018

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
remadepreacherAuthor
Inspiring
November 16, 2018

Thanks, rayek. This worked. Thanks!

remadepreacher
remadepreacherAuthor
Inspiring
November 16, 2018

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
remadepreacherAuthor
Inspiring
November 8, 2018

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
rayek.elfin
Legend
November 15, 2018

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
remadepreacherAuthor
Inspiring
November 15, 2018

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?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices