Thread: Clara 2E Strange line-height issue
View Single Post
Old 06-27-2023, 11:57 AM   #17
Anak
Guru
Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.Anak ought to be getting tired of karma fortunes by now.
 
Posts: 603
Karma: 641742
Join Date: Mar 2012
Location: DE
Device: Kobo Glo
If you convert regular epubs to kepubs you can try somtething like:

In the CSS
Define the default behaviour of a class, i.e. "chapter-start":
Code:
.chapter-start{
margin-top : 1em;
text-indent : 0;
}
and automatically beautify this class with:
* first letter only,
Code:
.chapter-start::first-letter {
font-family : sans-serif;
font-size : 120%;
font-weight : bold;
}
and/or
* the first line of text, not the whole text bewteen <p class="chapter-start"> … </p>
Code:
.chapter-start::first-line {
font-family : "Bookery", serif;
font-size : 100%;
font-variant : normal;
text-transform : uppercase;
}
You do not need a separate class for dropcaps, thats done by ::first and/or ::first-line pseudo-elements.
.
.xhtml file example (using the classes defined in the css)
Code:
<p class="chapter-start">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit sed vulputate mi sit amet mauris commodo quis. Egestas egestas fringilla phasellus faucibus scelerisque. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sit amet justo donec enim. Urna nunc id cursus metus aliquam eleifend mi in. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Id velit ut tortor pretium. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Sagittis eu volutpat odio facilisis mauris. Nec feugiat in fermentum posuere urna nec tincidunt. Arcu risus quis varius quam. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Sed cras ornare arcu dui vivamus arcu felis bibendum.</p>

<p class="indent">Diam quam nulla porttitor massa id neque aliquam. Cras sed felis eget velit aliquet sagittis id consectetur purus. Eget magna fermentum iaculis eu. Neque laoreet suspendisse interdum consectetur libero id faucibus. Nec feugiat in fermentum posuere urna nec tincidunt. Netus et malesuada fames ac turpis egestas. Consequat nisl vel pretium lectus quam id leo in vitae. Sed felis eget velit aliquet sagittis id consectetur. Massa tempor nec feugiat nisl. In ornare quam viverra orci sagittis. Leo vel fringilla est ullamcorper eget nulla facilisi. Convallis a cras semper auctor neque.</p>
Sigil will show you a good preview of the above code.

Note: CSS pseudo-elements are also supported by Adobe Digital Editions/Adobe Reader Mobile (RMSDK) for epub3 files.
However, Kobo has not implemented the latest (or a more recent) version of RMSDK, that's why it does not work with plain .epub (epub3) files on Kobo ereaders.

Perhaps one day Kobo will update the outdated RMSDK release.

Last edited by Anak; 06-27-2023 at 12:00 PM.
Anak is offline   Reply With Quote