Quote:
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:
Code:
<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:
Code:
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