Aura HD Drop Cap coding help, please

[MacEachaidh]

Hi all, I'm trying to get the knack of drop caps in epubs. I thought I'd cracked it, because the following code works well in both Sigil and ADE, but it goes a bit bizarre on both my Kobos.

What I'm using is:

.C_DropCap {
font-family: "Palatino Linotype";
font-weight: bold;
font-size: 420%;
overflow: hidden;
float:left;
margin-top: -0.17em;
margin-bottom: -0.30em;
margin-right: 0.05em;
}

and what I'm seeing, on both the Touch (2.6.2) and the Aura (2.8.1), is the drop cap letter at least twice the size as it appears in ADE, displaced to the right by about 4 ems and upwards by about 3 ems, overlaying the body text and only roughly the bottom 1/3rd of the letter visible.

Can anyone help me understand why, and suggest how to fix the code?

(I know, I can just play around with settings until it works, and I'm willing to do that; but I'm not proficient at CSS, so I'd also like to understand why this is happening. Or does Kobo's renderer just not support drop caps?)

[jackie_w]

I don't have any definitive answers for you, but this is the simple css I've been using lately for both my Kobos:

.dropcap{
    float:left;
    font-size:3em;
    font-weight:bold;
    line-height:0.8em;
    margin-right:0.05em;
    margin-top:-0.1em;
}

The relative vertical positioning does seem to vary depending on which font I select in the font menu. I used to see the same thing on my Sony readers.

I'd be surprised if your setting of font-family: "Palatino Linotype"; was doing anything unless you have embedded the Palatino font inside the epub and you have also added the necessary @font-face statements to the css.

I normally make the dropcap display in the same font as the rest of the paragraph by not including the font-family: at all.

[DNSB]

Here's what I'm using for dropcaps. Likely not the best solution but it works for the few times I use dropcaps.

span.dropcap {
    display: inline-block; 
    float: left;
    margin-right: 0.1em;
    font-size: 3.2em; 
    line-height: 0.75em;
}

span.dropcap2 {
font-size: 400%;
font-weight: bold;
line-height: 1;
height: 1em;
float: left;
margin: -0.1em 0.125em -0.1em 0.25em;
}

My alternate is using 115x123 woodcut look graphics images for the first letter:

.lettrimg {
	float: left; 
	margin: 0 0.5em -0.1em 0.25em; 
	}

    <div class="lettrimg"><img alt="Y" src="../Images/Y.gif" /></div>

    <p class="paranon">ou can not know.</p>

I do find quite a variance in how dropcaps display on various devices so you may need to play a bit to find something that works acceptably for you.

The top part of the letter missing is likely due to your choice to hide parts of the letter that overflow the display space. Change overflow: hidden to overflow: visible to see those missing bits -- or just remove the overflow: line as visible should be the default.

Regards,
David

[GeoffR]

The dropcaps in books from Feedbooks seem to work well, you might have a look at how they do it.

[MacEachaidh]

Thanks for the replies, folks.

Jackie_w, yeah, the Palatino is embedded. I currently like to embed a chosen font for headings, and let the device choose the font for body text. I decided to use the headings font for the drop cap as well. That bit all works fine. Otherwise, I think our codes are essentially the same? Difference of bottom margin (which I added so the text wraps at the bottom of the drop as well) and the "hidden" code. I still don't understand why the code works on ADE and Sigil but not Kobo.

David, thanks for your stuff. I considered embedding graphics for the dropped caps, but it does swell the filesize of the book considerably, and of course it's not subject to changes in font size at the device level. May be the only way to do it reliably, I guess.

Geoff, thanks for the suggestion, mate. I'll check out a Feedbook or two, though if I remember correctly, the last time I looked at one of those the CSS made my head swim.

[davidfor]

You should also have a look in the epub section of the forum. There have been a few threads dedicated to drop caps. But, I can't remember if anyone had a Kobo specific suggestion.

[MacEachaidh]

Yeah, I went there first of course, and then posted here specifically because it's only on my Kobo I can't get drop caps to work.

[davidfor]

I should have known

I tried your code and it didn't work. As I know I have seen it work in the past, I hunted through my books but couldn't quickly find one with drop caps. But my search of the epub threads found https://www.mobileread.com/forums/sho...867#post328867. That one does work. But, looking at the code, I have no idea why.

[MacEachaidh]

Originally Posted by GeoffR

The dropcaps in books from Feedbooks seem to work well, you might have a look at how they do it.

Hey Geoff, do you happen to know which books might have drop caps?

I've looked through quite a few, and none of them seem to have them. Unless maybe they used to, but have adopted a new stylesheet.

If you can name any, I'd be grateful.

Anyway, maybe I should just change my mind about my formatting.

[Anak]

Originally Posted by MacEachaidh

Hey Geoff, do you happen to know which books might have drop caps?

I've looked through quite a few, and none of them seem to have them. Unless maybe they used to, but have adopted a new stylesheet.

If you can name any, I'd be grateful.

Anyway, maybe I should just change my mind about my formatting.

Dropcaps are trial-and-error. There is no proper way to implement it that looks good under all sorts of conditions.
It depends on (a combination) of font family, font size, line height. Might even be device/vendor specific, which font foundry created the font, font version number (may have different or revised font metrics).

Dropcaps look good but, in general, only look good on your own device at a specific line height, font size and font family.

[MacEachaidh]

Yeah, I can understand it would depend on the Caps height and x height written into the font, the ascender line relatve to the actual size of the glyph, but I would have thought that that could be addressed through the margin settings, and that if anything using an embedded font for the dropped cap, and calibrating the display to that, would if anything improve the likelihood of success.

If I were making a commercial epub, or one that needed to function on a device other than my Kobo, then I'd probably do what David (DNSB) suggested and embed graphics for the dropped caps.

I accept what you're saying, Anak, but I'd still like to try to get it to work. It doesn't seem to me like it should be so problematic; it should be a lot more straightforward, don't you think?

[jackie_w]

Originally Posted by MacEachaidh

If I were making a commercial epub, or one that needed to function on a device other than my Kobo, then I'd probably do what David (DNSB) suggested and embed graphics for the dropped caps.

The problem with that would be that a graphic which displays as a 'nice size' on a 600x800 screen (e.g. Kobo Touch) will look puny on an Aura and vice versa. One that looks good on the Aura will be a monster on the Touch.

[GeoffR]

Originally Posted by MacEachaidh

Hey Geoff, do you happen to know which books might have drop caps?

Try this one: http://www.feedbooks.com/book/4216/sjambak

[DNSB]

Originally Posted by GeoffR

Try this one: http://www.feedbooks.com/book/4216/sjambak

I took a look at that book. Interesting use of non-existent styles.

<p class="cap noindent"><span class="dcap"><span class="dropcap">T</span>HE QUIET VOICE</span>&nbsp;

The cap and dcap styles don't exist in any of the 6 stylesheets in the ebook.

so removing the non-existent, I got:

<p class="noindent"><span class="dropcap">T</span>HE QUIET VOICE&nbsp;

The dropcap style is:

span.dropcap {
  font-size: 300%; 
  font-weight: bold; 
  float: left; 
  margin: -0.1em 0.125em -0.2em 0em; 
  text-indent: 0em; 
  line-height: 1em; 
  height: 1em;}

which look quite similar to the one I use as dropcap2.

Regards,
David