Quote:
Originally Posted by mandy314
thank you for your replies 
@RbnJrg
Nice drop caps - but I wouldn't know how to align the float with the text baseline (and keep the Kindle option for resizing the font) to get a raised cap. Always fascinating to see what css is supported (and what not). |
Try this:
1. In your css stylesheet write:
Code:
@font-face {
font-family: "Marnie";
font-weight: normal;
font-style: normal;
src: url("../Fonts/Marnie.ttf");
}
h1 {
font-size: 1.4em;
text-align: center;
margin-bottom: 2em;
}
p {
font-size: 1em;
text-align: justify;
text-indent: 0;
}
p + p {
text-indent: 1.2em;
}
.raised_cap {
float: left;
font-family: "Marnie";
font-size: 4em;
margin-top: -0.75em; /* play with this value */
margin-bottom: -0.6em; /* play with this value */
height: 1em;
}
2. Write the following in your .xhtml file:
Code:
<body>
<h1>This is the title</h1>
<p><span class="raised_cap">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.</p>
In Sigil and ADE doesn't look fine but in Kindle Previewer (AND YOU ARE SEEKING SOMETHING FOR KF8
) looks very nice (not only for KPW but also for KFHD); watch for yourself:
Of course, you'll have to write some code to manage the old Kindle devices since the code I wrote only works for devices who support the .kf8 format. Below you can see the respective epub.
Regards
Rubén