Raised capital modifies line height

[senhal]

I've created an epub with a dropcap on the same baseline as the first line of text:



No problem with the epub, but when i convert it to mobi (with kindlegen) or AZW3 (with Calibre), the second line distance from the first became too large:



How can I fix the situation?

This is the style used:

PHP Code:

<p><span class="dropcap">L</span>orem ipsum dolor sit amet [...]</p> 


PHP Code:

body{font-size:100%;font-family:serif;}
p{margin:0;text-indent:0;line-height:1.2em;text-align:justify;font-size:1em;widows:2;orphans:2;}
.dropcap{font-size:4.7em;line-height:0.8em;margin-right:3pt;} 


[RbnJrg]

Originally Posted by senhal

I've created an epub with a dropcap on the same baseline as the first line of text:

...

No problem with the epub, but when i convert it to mobi (with kindlegen) or AZW3 (with Calibre), the second line distance from the first became too large:

...

How can I fix the situation?

What about this procedure?

https://www.mobileread.com/forums/sho...51&postcount=9

Regards

[senhal]

Thanks, I just read the thread...
https://www.mobileread.com/forums/sho...d.php?t=237323

I try.

[senhal]

It works great!
Thank you!

[RbnJrg]

Originally Posted by senhal

It works great!
Thank you!

You are welcome.

[dgatwood]

Using a custom SVG block per letter is probably overkill.

What you're seeing is that on some Kindle devices, you cannot set the line height to less than 1.2x the font size, because Kindle's interpretation of CSS is deliberately brain damaged by design.

However, assuming your descenders aren't too tall, you should be able to achieve the same effect by leaving the line height set to 1.2em and using negative bottom margins with overflow-y: hidden.

[senhal]

Originally Posted by dgatwood

Using a custom SVG block per letter is probably overkill.

What you're seeing is that on some Kindle devices, you cannot set the line height to less than 1.2x the font size, because Kindle's interpretation of CSS is deliberately brain damaged by design.

However, assuming your descenders aren't too tall, you should be able to achieve the same effect by leaving the line height set to 1.2em and using negative bottom margins with overflow-y: hidden.

With

PHP Code:

.dropcap{font-size:4.7em;line-height:1.2em;margin-right:3pt;margin-bottom:-1em;overflow-y: hidden} 


unfortunately, nothing changes...
SVG solves it, but it could be a long work (I used 3 svg for a «…Y )

[RbnJrg]

Originally Posted by senhal

SVG solves it, but it could be a long work (I used 3 svg for a «…Y )

Why? You only need one svg for «…Y.

[RbnJrg]

Originally Posted by dgatwood

Using a custom SVG block per letter is probably overkill.

What you're seeing is that on some Kindle devices, you cannot set the line height to less than 1.2x the font size, because Kindle's interpretation of CSS is deliberately brain damaged by design.

However, assuming your descenders aren't too tall, you should be able to achieve the same effect by leaving the line height set to 1.2em and using negative bottom margins with overflow-y: hidden.

You can use this alternative method:

1. In the .xhtml file:

  <p><span class="raised">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris.</p>

2. In the .css file:

p {
    text-align: justify;
}

.raised {
    float: left;
    display: table-cell;
    font-size: 3em;
    font-weight: bold;
    margin: -0.75em 10px -0.5em 0;
}

However, the bottom alignment of the raised cap could slightly vary with different fonts (in Kindle e-inks devices you have six font to choose). The perfect bottom alignment no matter the font or the Kindle model, you only can get it with a image (for raised caps). And the lighter kind of image (for this purpose) it's the svg. I attach an epub so you can experiment with it

Regards

[dgatwood]

Originally Posted by RbnJrg

However, the bottom alignment of the raised cap could slightly vary with different fonts (in Kindle e-inks devices you have six font to choose). The perfect bottom alignment no matter the font or the Kindle model, you only can get it with a image (for raised caps). And the lighter kind of image (for this purpose) it's the svg. I attach an epub so you can experiment with it

This is why you should always provide a custom font for drop cap glyphs. You need to be in control over the descenders to ensure that they don't descend into the next line of text, and the only way to do that is to actually control the font.

[JSWolf]

But the problem with the Kindles is that if there are embedded fonts, the default is for Publisher Default to be turned off. Amazon should change this so if there are embedded fonts, Publisher Default is on. The only thing you can do is put in a page saying there are embedded fonts and to set the fonts to Publisher Default.

[RbnJrg]

Originally Posted by dgatwood

This is why you should always provide a custom font for drop cap glyphs. You need to be in control over the descenders to ensure that they don't descend into the next line of text, and the only way to do that is to actually control the font.

Hi dgatwood;

About two years ago I spent a lot of time to find a method that worked with any model of Kindle. Even with a custom font, you can't get the perfect bottom alignment for all models (you can see the raised cap perfectly in e-ink devices but not in Fire models and viceversa ); the only way I found is to use an image. And in this case, the best kind of image is a svg. Of course, if we were working on epub, all this is not necessary since in epub we can control line-height (and as you well know, in Kindle we can't set a line-height lower than 1.2em).

Regards

[Notjohn]

I thought drop-caps were a splendid idea, until Amazon exploded the notion when they changed the line spacing default and I had to go back and remove them from several books. Very irritating.

Not only do I not use them now, but I notice that the same is true of a majority (if not most) books from mainstream publishers.

Self-pubbers on the KDP forums are forever arguing that e-books are different so shouldn't be held to traditional book-making standards -- for example, that e-books should be "left justified," oxymoronic as that may be. But they may have a point in the case of drop-caps. They may be vanishing now, just as the punctuation mark before or after the em dash vanished a century ago.

[HarryT]

Originally Posted by Notjohn

I thought drop-caps were a splendid idea, until Amazon exploded the notion when they changed the line spacing default and I had to go back and remove them from several books. Very irritating.

Can we be clear about whether we're talking about drop caps or raised caps? The thread title says "Dropcap", but most of the discussion actually seems to have been about raised caps!

[RbnJrg]

Originally Posted by HarryT

Can we be clear about whether we're talking about drop caps or raised caps? The thread title says "Dropcap", but most of the discussion actually seems to have been about raised caps!

You are right; the OP called drop cap what it was actually a raised cap. Said that, all this thread is about how to implement "raised caps" in Kindle devices. I think there is no problem to handle DROP caps in Kindle (that is, Kindles that support .kf8).