Clara 2E Strange line-height issue

[Leonatus]

I bought a new Clara 2E. So far, so good. There are, however, some strange behaviour issues. One of them is this:
I use to enlarge the first letter of a chapter for decorative matters. The code ist:

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

The text looks in Calibre's code view for example like this:

<p><span class="first">H</span>eu*te, am 2. No*vem*ber 1881, ha*be ich be*schlos*sen, das Ge*heim*nis auf*zu*schrei*ben, das das Le*ben, den Reich*tum und die Kraft mei*ner See*le aus*macht. We*der mei*ne Ver*wand*ten noch mei*ne Freun*de schöp*fen, so*weit ich weiß, ei*nen Ver*dacht hier*zu. Nur ei*ne le*ben*de Per*son in Ita*li*en hat von mir et*was dar*über er*fah*ren, aber sie ist so ver*läss*lich, dass sie es si*cher nie er*wähnt hat.</p>

It should render, and it does in Calibre's reader, in Sigil's book view, and in my old Kobo Touch, as is shown in the image below ("Calibre_View"). But in my Clara, it looks as in the other image below ("Clara_View").
In the code, I changed various times the line-height (1, normal, 0, and other values), but there is always the too large space between the first and the second line. Even if I set the font-size to 1em, there is no change concerning the line spacing.
Now, I have no more clue what I could do. Does someone have an explanation?

Edit: The asterisks in the text are due to the soft-hyphens.

[DNSB]

Here's a sample of the code I used at one time for dropcaps. It was a bit of a pain since the different x-heights of the letters were not accounted for and I finally gave on up on such decoration after I realized that I had a collection of dropcap-a to dropcap-z classes with varying right, left and bottom margins and while those looked good on my Forma, they were not optimal for any of my other ereaders.

.dropcap {
  float: left;
  font-size: 2.5em;
  line-height: 1.5;
  margin-bottom: -0.4em;
  margin-right: 0.05em;
  margin-top: -0.35em;
}

Killed a couple of minutes digging into my old notes and stuff and this was the last simplified multiple class dropcap version I played with.

.first-letter1 {
  float: left;
  font-size: 250%;
  margin-bottom: -0.31em;
  margin-right: 0.05em;
  margin-top: -0.35em;
}

.first-letter2 {
  float: left;
  font-size: 250%;
  margin-top: -0.35em;
  margin-right: 0.05em;
  margin-bottom: -0.05em;
  margin-left: 0.22em;
}

.first-letter3 {
  float: left;
  font-size: 250%;
  margin-bottom: -0.31em;
  margin-right: 0.03em;
  margin-top: -0.35em;
}

.first-letter4 {
  float: left;
  font-size: 250%;
  margin-bottom: -0.31em;
  margin-right: 0.09em;
  margin-top: -0.35em;
}

.first-letter5 {
  float: left;
  font-size: 250%;
  margin-bottom: -0.31em;
  margin-right: 0.07em;
  margin-top: -0.35em;
}

.first-letter6 {
  float: left;
  font-size: 250%;
  margin-bottom: -0.31em;
  margin-right: 0.08em;
  margin-top: -0.35em;
}

[Karellen]

Originally Posted by Leonatus

I use to enlarge the first letter of a chapter for decorative matters.

I have used this method across countless books and had no problems with spacing.

<p class="scene"><span class="firstletterscene">R</span>espectable London was quiet at night.</p>

The css...

.scene {
  padding-bottom: 0.01em;
  padding-top: 2em;
  text-indent: 0;
}
.firstletterscene {
  font-size: 1.5em;
  line-height: 1em;
}

Attachment 202054

[JSWolf]

Originally Posted by Karellen

I have used this method across countless books and had no problems with spacing.



The css...

.scene {
  padding-bottom: 0.01em;
  padding-top: 2em;
  text-indent: 0;
}
.firstletterscene {
  font-size: 1.5em;
  line-height: 1em;
}

Attachment 202054

A large first letter like this looks terrible on a Kindle.

[Karellen]

Originally Posted by JSWolf

A large first letter like this looks terrible on a Kindle.

Why?.

[Leonatus]

Thanks all!
@DNSP: I'm aware that Dropcaps are no good idea for epubs. For a time, I was experimenting myself with them, but they render different on each device, and even on one single device it depends on the individual settings. But larger first letters are a different thing. A similar problem with too large a line space occurs with <sup>-tags. I usually achieved satisfactory results by setting the line-height to 0, but in the case described there is no difference.
@Karellen: I'll give that a try, thank you. But what makes me wonder is that the code I use makes no problem on other devices, only on the Clara. I suspect that there is a sort of Kobo pre-setting that causes the issue rather than an erroneous code.
@JSWolf: I don't know how larger first letters look on Kindle, but I would be interested, too, to have a look at it. Would you kindly (Kindle-y) try with my code or look hat one of my books (they are epubs, however)?

[DrChiper]

Originally Posted by Leonatus

[...]But what makes me wonder is that the code I use makes no problem on other devices, only on the Clara. I suspect that there is a sort of Kobo pre-setting that causes the issue rather than an erroneous code. [...]

Yes, that might also be true for other e-readers. I always start my CSS by making sure that the ones I want to change will initially start at their default values by explicitly resetting them.

* {
  margin: 0;
  padding: 0;
  line-height: normal;
  text-decoration: none;
  ...
  etc.
}

However, it is by no means guaranteed that this will always and everywhere work

[Leonatus]

I tried with Karellen's suggestions, incorporating as well DrChiper's ideas. Karellen's code does not contain the font that I generally use, and when I insert it, the effect is the same as with my own code. Do I leave the font away, things become slightly better, but there still persists an enlarged space between the lines. Do I leave away the font in the code of my own, there is the same effect.
There are still other oddities: If you compare the chapter headings in the images of #1, you'll see that the chapter number in Calibre_View exceeds the frame, whereas in Clara_View it fits exactly into the frame. Originally, it has been just the other way round: fitting in Calibre's Viewer etc., the chapter number fell out of the frame downwards in the Clara. I reduced the font size and got the result as shown.
What do we learn? Keep any decorative elements in epubs to a minimum, otherwise there will always be users that can not be satisfied.

[Leonatus]

One more test: I set the line height value of p to 1.2. Effect: the same.

[JSWolf]

Originally Posted by Karellen

Why?.

Because a Kindle uses a fixed line-height and you cannot change the line height of the first line with the larger starting letter. So the first line will have a different line-height.

But publishers still do it even though it doesn't work because that's how the pBook was done.

[Karellen]

Originally Posted by JSWolf

Because a Kindle uses a fixed line-height and you cannot change the line height of the first line with the larger starting letter. So the first line will have a different line-height.

Right. I didn't know that. I use my Libra 2 as my ereader. My dead Kindle is tucked in a drawer somewhere.

It looks fine on Kindle Previewer 3, though.

But as these are my own books, not shared or made available for distribution, I only need to worry about what works for me.
If I had a selection of ereaders, I'd probably try a bit harder and test, but that's not the case.

[JSWolf]

Originally Posted by Karellen

Right. I didn't know that. I use my Libra 2 as my ereader. My dead Kindle is tucked in a drawer somewhere.

It looks fine on Kindle Previewer 3, though.

But as these are my own books, not shared or made available for distribution, I only need to worry about what works for me.
If I had a selection of ereaders, I'd probably try a bit harder and test, but that's not the case.

Kindle Previewer doesn't work well enough to be a replacement fore testing your eBooks on an actual Kindle. For one, it respects line-height where Kindles do not. There could be other gotchas with Kindle Previewer where it doesn't work properly.

[DNSB]

Originally Posted by Leonatus

Thanks all!
@DNSP: I'm aware that Dropcaps are no good idea for epubs. For a time, I was experimenting myself with them, but they render different on each device, and even on one single device it depends on the individual settings. But larger first letters are a different thing.

The definition of dropcaps that I've seen used is a larger letter used to indicate the start of text. There is no requirement for emulating the illuminated/historiated letters popular in medieval manuscripts.

And yes, using a larger first letter opens pretty much the same can of worms that you will find when using an image for an historiated/illuminated dropcap.

You might want to check Laura Franz's Drop Caps: Historical Use And Current Best Practices With CSS which is a decent introduction and review of some of the problems using dropcaps.

After realizing that I was going to need multiple classes just for one device and likely a vist to media queries for multiple devices. A can of worms that I decided to forget about until such time as I have a couple of months/years to spare.

[Quoth]

I regard them since 17th C as publisher egotism. You don't need them for a chapter or section start, because changing indent and top margin and prior heading does that. They also break up the first word and reduce reading comprehension.

Seeing then as I don't approve of them on paper I'd never implement them in an ebook and if I'm having to edit a book for other reasons I'll remove all drop cap styling. Easier taken out than fixed.

Edit:
Similarly the practice of using SMALL CAPS at the start of the paragraph at a new section is historic and now simply adds unwanted complexity and slows reading. Traditionally they are not even simply smaller caps, but a related face.

[Leonatus]

Originally Posted by JSWolf

Because a Kindle uses a fixed line-height and you cannot change the line height of the first line with the larger starting letter. So the first line will have a different line-height.

It seems to me that - at least the Kobo Clara - has a similar setting, so that one can increase the line-height by css, but reduce not exceeding a certain level. Might this be a topic for a patch?