Drop cap in epub3 for Kindle

[increase]

I have created a drop cap as follows
<p><span class="first-letter">T</span>

with css

.first-letter {
font-family: 'English';
color:#986335;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
float: left;
font-size: 3.91625em;
height: 1.1em;
line-height: 0.8em;
padding: 0%;
margin: 0% 0.04em
}

My issue is that in the Kindle previewer 3, this code works perfectly, however when I use the KDP edit and launch the previewer, the Drop Cap is as shown in the attached image.

I have tried many different coding from the forum, but all with the same result.

Is there a way of applying Drop Cap, using epub3 in Sigil?

[Deskisamess]

As a reader, I despise drop caps.

Carry on.

[Quoth]

1) I don't like them on printed works either.
2) They only seem to work on some formats.

[JSWolf]

That is NOT a drop cap. That's an enlarged first letter and it doesn't work on a Kindle because the first line is too far away from the second line. You can do this in ePub, but not in Mobi, KF8, or KFX.

A drop cap is when it is a larger letter and it descends 2 or 3 lines and the top of the letter is at the top of the first line with the text to the right of the larger letter.

[DNSB]

I despise using drop caps since they basically need to be tweaked for every format and ereader. That being said, the larger the font size for a drop cap compared to the body text, the harder it is to to make it look half decent on multiple platforms. One book I worked on used a cursive font for the drop caps. I ended up with a separate class for each letter used as a drop cap and another class for the case where a double quote preceded the first letter. It ended up looking half decent on 768x1024 or larger displays but the CSS was a dog's breakfast.

The basic code looks like this with the margins being tweaked for the individual characters:

.first-letter-t {
float: left;
font-size: 300%;
margin-left: 0.03em;
margin-top: -0.3em;
margin-right: 0.12em;
margin-bottom: -0.36em;
font-weight: bold;
}

[JSWolf]

Originally Posted by DNSB

I despise using drop caps since they basically need to be tweaked for every format and ereader. That being said, the larger the font size for a drop cap compared to the body text, the harder it is to to make it look half decent on multiple platforms. One book I worked on used a cursive font for the drop caps. I ended up with a separate class for each letter used as a drop cap and another class for the case where a double quote preceded the first letter. It ended up looking half decent on 768x1024 or larger displays but the CSS was a dog's breakfast.

The basic code looks like this with the margins being tweaked for the individual characters:

.first-letter-t {
float: left;
font-size: 300%;
margin-left: 0.03em;
margin-top: -0.3em;
margin-right: 0.12em;
margin-bottom: -0.36em;
font-weight: bold;
}

This is CSS for a dropcap. The CSS in the first post is not for a dropcap.

[DNSB]

Originally Posted by JSWolf

This is CSS for a dropcap. The CSS in the first post is not for a dropcap.

The OP did say he was creating a drop cap using the code he posted. Yes, what he is generating is technically an initial cap which is probably the easiest to code. Hopefully, he will get some help in generating code that will result in a drop cap if that is what he wants.

If worse comes to worse, using images tends to be the best answer for drop caps across multiple platforms.

One of the earliest guides I ran into is Drop Caps: Historical Use And Current Best Practices With CSS. One of the things I liked is that she did not present any one best answer but instead looked at the various ways of doing drop caps.

I seem to remember that there was another useful entry on Elizabeth Castro's Pigs, Gourds and Wikis page but I can no longer locate it.

[increase]

Originally Posted by DNSB

I despise using drop caps since they basically need to be tweaked for every format and ereader. That being said, the larger the font size for a drop cap compared to the body text, the harder it is to to make it look half decent on multiple platforms. One book I worked on used a cursive font for the drop caps. I ended up with a separate class for each letter used as a drop cap and another class for the case where a double quote preceded the first letter. It ended up looking half decent on 768x1024 or larger displays but the CSS was a dog's breakfast.

The basic code looks like this with the margins being tweaked for the individual characters:

.first-letter-t {
float: left;
font-size: 300%;
margin-left: 0.03em;
margin-top: -0.3em;
margin-right: 0.12em;
margin-bottom: -0.36em;
font-weight: bold;
}

Thank you, I ended up using your code

[DNSB]

Originally Posted by increase

Thank you, I ended up using your code

Glad to hear it helped. <sound of ego expanding>

[hobnail]

Sigil's TagMechanic makes short work of drop caps; Action type=delete, Tag name=span, Having the attribute=class, Whose value is="dropcap", and walla, all gone and into the bit bucket.

[JSWolf]

Originally Posted by hobnail

Sigil's TagMechanic makes short work of drop caps; Action type=delete, Tag name=span, Having the attribute=class, Whose value is="dropcap", and walla, all gone and into the bit bucket.

Diaps Editing Toolbag for Calibre also does this in the editor.