Clara 2E Strange line-height issue

[Leonatus]

I just realized that there exists something like a patch for this, but with the aim of expanding the possibilities of line-spacing of the device. In fact, however, the pre-setting for the first line is always added to the chosen line-height values. Not really helpful in my case.

[Anak]

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":

.chapter-start{
margin-top : 1em;
text-indent : 0;
}

and automatically beautify this class with:
* first letter only,

.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>

.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)

<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.

[Leonatus]

Thank you, Anak, for your advice! They are mainly based, you say it yourself, on pseudo-elements. I have given up to work with them for a long time, as there are many devices that have problems with them. And as my books are mostly aimed to be uploaded here, I try to avoid disturbances. But, for the use of my own, I shall try it.
By the way: My own books are transformed into Kepubs by j.goguen's extended driver.

[Leonatus]

I tried it, but the space between the lines persists. I still suspect that it is the assembly of the Clara itself that causes the issue. I should consider to remove any decorative text elements.

[JSWolf]

Originally Posted by Leonatus

I tried it, but the space between the lines persists. I still suspect that it is the assembly of the Clara itself that causes the issue. I should consider to remove any decorative text elements.

Can you show us the code that's causing the problem?

[Leonatus]

I thought I had basically explained everything in #1, to which you had already left a comment. My purpose was to enlarge somewhat the first letter of a chapter by using the <span class="first">-tag. Is there still something missing to be clarified?

[Leonatus]

I made a new test, setting the line-height of the whole paragraph to 0, with the result that all lines melted into one, and leaving only the first line to exceed a little. No doubt that the first letter has an - obviously unchangeable - effect on the height of the first line.

[JSWolf]

Originally Posted by Leonatus

I made a new test, setting the line-height of the whole paragraph to 0, with the result that all lines melted into one, and leaving only the first line to exceed a little. No doubt that the first letter has an - obviously unchangeable - effect on the height of the first line.

You just want the span to have a line height of 0.

CSS:

.bigletter {
  font-size: 1.5em;
 line-height: 0;
}
.noindent {
  text-indent: 0;
}

HTML:

<P class="noindent"><span class="bigletter">T</span>This is a test."</p>

[Leonatus]

Thank you! My own code of the first letter is:

.first {
  font-family: "FoglihtenNo04";
  font-size: 1.29167em;
  font-weight: bold;
  line-height: 0;
  letter-spacing: .1em;
}

That seems to me quite similar to yours, or do I miss something?

[JSWolf]

Originally Posted by Leonatus

Thank you! My own code of the first letter is:

.first {
  font-family: "FoglihtenNo04";
  font-size: 1.29167em;
  font-weight: bold;
  line-height: 0;
  letter-spacing: .1em;
}

That seems to me quite similar to yours, or do I miss something?

I find numbers like 1.29167 to be silly. Why not just use 1.3? Also, you don't need letter-spacing as it's only one letter. But otherwise, it's similar and will work to fix the first line's larger height.

[Leonatus]

Originally Posted by JSWolf

I find numbers like 1.29167 to be silly.

Right, but I didn't choose it myself. When i work my books out with Sigil and Calibre, at last such values seem to appear automagically, and I eventually refrain from changing them.
And to the rest: no, there is no effect to the line height.
The letter spacing I chose, because the font I use has sometimes certain ornaments that reach to the next letter.
Edit: I tried the code also at the Tolino, where there is no issue at all.

[Quoth]

Originally Posted by JSWolf

I find numbers like 1.29167 to be silly. Why not just use 1.3? Also, you don't need letter-spacing as it's only one letter. But otherwise, it's similar and will work to fix the first line's larger height.

It's maybe 15.5 pt. Some numbers just look strange to humans. Actually 15.5 pt converted to em is 1.2916666666 repeating 6, so rounds to 1.29167
It's not true for paper (where an em makes less sense), but for ebooks (maybe only) 1em = 12pt. All margins, fonts and padding should be in em for ebooks, or at worst pt (though pt doesn't work correctly for margins on kepub, does for mobi, azw3/KF8 and epub on almost everything as 12pt = 1em)
Only paper should use inches, centimetres etc.
Nothing should use rem or pica

Edit:
Text, margins or padding should not use px or %
The px or % are for images on ebooks.

[Leonatus]

Originally Posted by Quoth

It's maybe 15.5 pt. Some numbers just look strange to humans. Actually 15.5 pt converted to em is 1.2916666666 repeating 6, so rounds to 1.29167

I assumed something like that, kind of translation.

Nothing should use rem or pica
px or % for images on ebooks.

Do I understand correctly? Percent should not be used for images? This would be new to me.

[Quoth]

Originally Posted by Leonatus

I assumed something like that, kind of translation.

Do I understand correctly? Percent should not be used for images? This would be new to me.

No, mostly px.
Sometimes the css might have auto for width and a % for height, or vice versa if you want the image to be as big as possible. The enclosing <p or <div would have zero margins and centre as if styling text.
No auto for margins.
The don't use was rem and pica
The px and % ONLY for images, not text.

Edited ambigious & confusing post. Sorry.

[DNSB]

Originally Posted by Quoth

It's not true for paper (where an em makes less sense), but for ebooks (maybe only) 1em = 12pt.

Oddly, I still have my trusty line gauge (pica stick, em ruler, etc.) from a long ago era when we used Linotypes to generate the text and then manually laid out the pages before photographing them for the actual printing process. Not a trace of computers in the process. And yes, 1 em was 1 pica was 12 pts was the way the sizes were stated. I never managed to use the agate measurement running down the center of the gauge. Also, this was prior to the computer folks redefining 72 pts as 1 inch instead of the 72.27 pts used in the typesetting business.