Suggestions for ::first-letter (:first-letter)?

[Tex2002ans]

Originally Posted by DaveLessnau

Well, that's interesting. I swear I tested that ::first-letter and it worked in Calibre's editor/viewer as well as on my Kobo (as KEPUB).

Do not trust Calbre's viewer as if it's an ereader. It's like a browser, and it will accept and display very advanced (or mangled) code. Actual ereaders may not support that stuff or look that way... which is why it's best to test on real devices.

Kobo also has different renderers if you're reading:

• KEPUB (an EPUB converted to their special .kepub file)
• EPUB3
• EPUB2

You can read a little bit about that in my post:

• 2019: "Epub-problems in tablets" (Post #27)

Originally Posted by DaveLessnau

I just went back to double-check and it's not working. I have no idea what changed.

Gremlins!!! It happens to all of us.

[enuddleyarbl]

Once I fixed the typo I noted above, ::first-letter also works fine on my Kobo Forma as a KEPUB (source is epub3 in Calibre). That's everything I use here.

Now, I just have to figure out where else I included that typo. It's fine in the file I use as a template for CSS styles. But, was wrong in that particular book's stylesheet.

[bookman156]

I have yet to get ::first-letter selector working well on web-pages for drop caps. As epub readers are way behind the web probably be 50 years before we can make use of this.

[bookman156]

Even spans are inconsistent between browsers for drop caps. Get it perfect in Vivaldi and you're overjoyed, then try it in Firefox and it's misaligned. Imagine the situation with epub readers you've never even heard of. Best to leave drop caps in Indesign and print.

[RbnJrg]

Originally Posted by bookman156

Even spans are inconsistent between browsers for drop caps. Get it perfect in Vivaldi and you're overjoyed, then try it in Firefox and it's misaligned.

Depend on the code you use to set drop caps. Try using the following code:

p {
   text-align: justify;
   margin: 0;
   text-indent: 1.2em; 
   line-height: 1.2em; /* This is important */
}

.dropCap {
   float: left;
   font-size: 4em;
   font-weight: bold;
   line-height: 1.2em; /* This is important */
   margin: -0.1em 5px -0.3em 0;
}

and watch if drop caps are well displayed on Firefox. Of course, if you use a custom font, it'll be neccessary to employ more properties to style correctly the drop cap. Moreover, in those cases, it could be neccesary to float a box (not the letter) and enclose the letter inside that box.

[bookman156]

Matching the line-height is interesting, I don't think I did that. It was only slight differences between browsers before, but enough to niggle. I'll give the line-height idea a try. Thanks.

[Jellby]

However, setting the line-height for the normal text will annoy some users (as will forcing justify on them).

[Quoth]

I always remove line-height on conversions because it often prevents a user changing line spacing to taste.

I often remove drop caps or other first word in first paragraph features. A affectation even on paper which makes it harder to read. Also work badly on many apps and eink ereaders.

I'd use <span class="first-thing"> etc rather than ::firstletter if I was doing it, which I don't.

[RbnJrg]

Originally Posted by Quoth

I often remove drop caps or other first word in first paragraph features...Also work badly on many apps and eink ereaders.

There are several apps with bad support for .css but, why to employ a bad app if there are many others with great support for .css and .css3? The problem are the users not well informed. And regarding eink ereaders (the old Kindle models are other thing), even those based on ADE 2.x, should support well drop caps, if the code for those ones are well written.

[JSWolf]

Originally Posted by RbnJrg

There are several apps with bad support for .css but, why to employ a bad app if there are many others with great support for .css and .css3? The problem are the users not well informed. And regarding eink ereaders (the old Kindle models are other thing), even those based on ADE 2.x, should support well drop caps, if the code for those ones are well written.

But the thing is, the drop caps could be written for a specific line height and/or font and when I have my line height and font set to what I want, that could cause the drop cap to not display properly. There's just too many variables to make drop caps work reliably.

[enuddleyarbl]

The specific thing that got me started in editing the css of my purchased books was dropcaps not displaying properly on my Kobo Forma. I'd end up with part of a glyph or something on one page at the start of a chapter and then the rest of it (along with actual text) on the next page. So, into the css I went to remove all dropcap classes.

I'm guessing the reason I don't have a problem using ::first-letter is that all I have for its formatting is font-weight: bold. No multi-line or big line-heights. No floats. Just bold. 99% of the time, it probably gets that first letter right. And the times it doesn't, a single bold letter isn't drastic enough to cause me too much grief.

EDIT: Now, if I were doing this professionally, that wouldn't be acceptable. But, for my personal use, it's ok.

[Turtle91]

Just to throw my .02 in there:

I use dropcaps almost all the time. The app I use does an admirable job following the css. I hate the idea of coding for the lowest common denominator and using hacks to make sure some ancient device can still function. Devices are not that expensive... and... I don't need to worry about selling the books I clean up.

I have css for the entire first paragraph, not just the first letter. That solves most of these issues regarding line height/float/spacing, etc.

CSS:
p.first {
  text-indent: 0;
  font-size: 1em;
  clear: both;
}

p.first::first-letter {
  font-family: serif;
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin: -.1em .1em;
}

p.first::first-line {
  font-variant: small-caps;
  font-size: 1.15em;
}

HTML:
<h3>Chapter 42 <span>This is the subtitle</span></h3>
<p class="first">This is the first paragraph in the chapter.</p>
<p>This is a normal paragraph that is much longer so I can make the point of the indent and other stuff being different.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

Of course you may need to adjust this for particular circumstances (and we all know Jon isn't going to approve of something) but this is just an example template I start with....

[Quoth]

I'll usually see such as "His is the first paragraph in the chapter."

I know lots of people that hate that styling on paper.

Also you can't tell the public what app or ereader to use. Personally I prefer an App that properly does the CSS and gives rendering similar to azw3 publisher settings or ADE with Publisher settings.

[Turtle91]

Originally Posted by Quoth

I'll usually see such as "His is the first paragraph in the chapter."

I know lots of people that hate that styling on paper.

Also you can't tell the public what app or ereader to use. Personally I prefer an App that properly does the CSS and gives rendering similar to azw3 publisher settings or ADE with Publisher settings.

Your device is either broken... or the dropcap in the book isn't coded properly...

I'm not arguing that there aren't people who dislike that styling - don't care - and that you prefer something different wasn't the point... the point was that you can style the entire paragraph to overcome some of the issues people were having with dropcaps.

I wasn't trying to tell them what app/device to use - I just don't like limiting my creativity because someone out there uses an outdated device with broken functionality... If they get to the point where they are tired of their books looking like crap then they can get a standards compliant device (or put enough pressure on their device/app manufacturers to put out an update).

[Hitch]

Originally Posted by Turtle91

Your device is either broken... or the dropcap in the book isn't coded properly...

I'm not arguing that there aren't people who dislike that styling - don't care - and that you prefer something different wasn't the point... the point was that you can style the entire paragraph to overcome some of the issues people were having with dropcaps.

I wasn't trying to tell them what app/device to use - I just don't like limiting my creativity because someone out there uses an outdated device with broken functionality... If they get to the point where they are tired of their books looking like crap then they can get a standards compliant device (or put enough pressure on their device/app manufacturers to put out an update).

Dion:

Now, before I say anything, a) you know that I love ya, right? and b) that I have mad respect for your eBook-fu, yes? Okay, having said that:

That's not necessarily true, Dion. I can break almost anybody's coding--even my own!--using nothing more lethal than a Paperwhite, Voyage or Oasis. Why? Because the Paperwhite family of devices will override font calls, to the Dropcap span. Utterly and totally. So, if you code (let's say) for an Adobe Garamond Drop, with AG body font, and Jane buys the book and reads it on, say, Bookerly or worse, Helvetica (please, Helvetica fans, don't leap in here, eh?), the drop cap is NOT going to work. Why? Because all the relative sizes will have now changed.

We've invested, at my place, a fair amount of time in developing One Drop To Rule Them All markup. And it wasn't quick or easy.

I'm not arguing with you, D. I love a good drop myself, just like I adore a good or elegant fleuron or graphic that I haven't seen before, (5,000x....) and all that. But, his Dropcap coding doesn't have to be broken, nor his device, for the dreaded:


T
his is the story of Jacob....

to occur.

Hitch