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

[DaveLessnau]

I just ran across some CSS in an epub using :first-letter. Looking at w3c:

https://www.w3schools.com/cssref/sel_firstletter.asp

it talks about the :: version of that (instead of the : version) and says:

"The ::first-letter selector is used to add a style to the first letter of the specified selector."

Cool. I'm getting tired of worrying about quotation marks and other punctuation when I use a regex to bold the first letter of each non-indented paragraph. That'll work.

Looking at mozilla:

https://developer.mozilla.org/en-US/...::first-letter

it explains that ::first-letter was added to epub3:

"CSS3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements."

OK. Since I convert to CSS3 when I edit an epub, not a problem. I'll use that.

Now for the silly bit. I'm a bit torn over how to stylistically implement this. I have a noindent class that I use on the first paragraph following chapter titles (<h1>, <h2>, ...) and thematic breaks (<hr>). I could apply that ::first-letter thing to that on my stylesheet. But, I worry about the far-less-common use of non-indented paragraphs in other parts of the text.

With your 'druthers, would you prefer using ::first-letter implicitly in the noindent class or creating a new noindentfl class to handle that? Or, is there another preferred way to handle this?

[JSWolf]

Originally Posted by DaveLessnau

I just ran across some CSS in an epub using :first-letter. Looking at w3c:

If you plan on reading your ePub in ePub on your Kobo, this will not work. It will work with KePub.

[DaveLessnau]

Originally Posted by JSWolf

If you plan on reading your ePub in ePub on your Kobo, this will not work. It will work with KePub.

Thanks for the warning. I do use KePUB, so I'm good.

Also, after working with this a bit, I decided to go with explicitly naming the first-letter class. I'm leaving my noindent class for odds and ends within the text and using noindentdc (dc for dropcap -- even though I'm just bolding the first letter) for post-<h\d>/<hr/>.

[RbnJrg]

I don't know if I understand you well but I think you are confusing the things a bit.

With the pseudo-element ::first-letter you can't affect the indent, because the indent is for PARAGRAPHS, while ::first-letter is for the first letter of a paragraph. So, if you want to have not indented the first paragraph after <h> tags (or <hr> tag), then you should use something like:

h1 + p, h2 + p, h3 + p, h4 + p, 
h5 + p, h6 + p, hr + p {
     text-indent: 0;
}

And, if you also want to style the first letter of the first paragraph after a <h> tag, then you should use something like:

h1 + p::first-letter, h2 + p::first-letter, 
h3 + p::first-letter, h4 + p::first-letter, 
h5 + p::first-letter, h6 + p::first-letter,
hr + p::first-letter {
     font-weight: bold;
}

[DaveLessnau]

Originally Posted by RbnJrg

I don't know if I understand you well but I think you are confusing the things a bit.

With the pseudo-element ::first-letter you can't affect the indent, because the indent is for PARAGRAPHS, while ::first-letter is for the first letter of a paragraph. So, if you want to have not indented the first paragraph after <h> tags (or <hr> tag), then you should use something like:

h1 + p, h2 + p, h3 + p, h4 + p, 
h5 + p, h6 + p, hr + p {
     text-indent: 0;
}

And, if you also want to style the first letter of the first paragraph after a <h> tag, then you should use something like:

h1 + p::first-letter, h2 + p::first-letter, 
h3 + p::first-letter, h4 + p::first-letter, 
h5 + p::first-letter, h6 + p::first-letter,
hr + p::first-letter {
     font-weight: bold;
}

I was noticing that last night. I am currently using an h1 + p, h2 + p ... class and that was doing the actual nonindenting I was seeing. I was scratching my head over why a couple of my noindentdc situations weren't indenting though they were first-lettering. It turned out that the "automatic" <h2> + p wasn't kicking in because a blockquote (and in another case, just an anchor tag) was between the heading and the paragraph. As a side benefit of that research, I had turned up pretty much what you were saying. Although the explanation I found was that text-indent doesn't apply to ::first-letter. Your comment explains why.

I was thinking of trying to get it to work with the h1 + p class (similarly to what you showed), but hadn't figured out to apply the ::first-letter to <p> instead of to a different class. I was also considering some way to use it with a p + p class. I'll have to think about his some more. Right now, I'm leaning towards h1 + p::first-letter. But, I'll have to consider the ramifications.
Thanks.

[DaveLessnau]

Originally Posted by RbnJrg

...if you want to have not indented the first paragraph after <h> tags (or <hr> tag), then you should use something like:

h1 + p, h2 + p, h3 + p, h4 + p, 
h5 + p, h6 + p, hr + p {
     text-indent: 0;
}

And, if you also want to style the first letter of the first paragraph after a <h> tag, then you should use something like:

h1 + p::first-letter, h2 + p::first-letter, 
h3 + p::first-letter, h4 + p::first-letter, 
h5 + p::first-letter, h6 + p::first-letter,
hr + p::first-letter {
     font-weight: bold;
}

Interesting. It looks like I have to have BOTH of those classes. If I add ::first-letter to the first one and add the bold font-weight, the text-indent stops working (though the ::first-letter bold works). If I add a separate second class to handle the ::first-letter bold, it all seems to work.

I'll play around some more. I was worried I'd have had to change my <p> class to be non-indented and then add a p + p class to handle indented.

[DaveLessnau]

With these classes:

h1 + p, h2 + p, h3 + p, hr + p {
  text-indent: 0;
}
h1 + p::first-letter, h2 + p::first-letter, h3 + p::first-letter, hr + p::first-letter	{
  font-weight: bold;
}

.noindent {
  text-indent: 0;
}
.firstletter::first-letter {
  font-weight: bold;
}

That seems to handle it. The two hn + p classes pick up most situations and <p class="noindent firstletter"> picks up any troublesome cases.

[Jellby]

Personally, I prefer <span class="first-letter"> instead of a pseudo-element. First, pseudo-elements are (were?) not widely supported. Second, I want more control over what is the first letter, I may want to include (or not) an opening quote mark, or a following punctuation, or two letters as a digraph (e.g. "Ch")...

[DaveLessnau]

I'm a bit of the opposite: I tend to avoid spans when I can.

What's interesting about ::first-letter is that, so far, it's been smart enough to work correctly with starting punctuation (i.e., quotes and ellipsis, that I've noticed).

[Jellby]

Well, "smart" means it makes a choice, which doesn't necessarily match the choice you want. I think the specification says it has to exclude non-letter characters, but depending on what you are doing with the style, you may want to include them.

[JSWolf]

Originally Posted by Jellby

Well, "smart" means it makes a choice, which doesn't necessarily match the choice you want. I think the specification says it has to exclude non-letter characters, but depending on what you are doing with the style, you may want to include them.

I've seen plenty of cases where the first character in the first paragraph was a quote and it was made lager along with the first letter. If :first-letter does not work that way, then it's not the correct way to do it.

[Hitch]

Originally Posted by Jellby

Personally, I prefer <span class="first-letter"> instead of a pseudo-element. First, pseudo-elements are (were?) not widely supported. Second, I want more control over what is the first letter, I may want to include (or not) an opening quote mark, or a following punctuation, or two letters as a digraph (e.g. "Ch")...

Yeah, I have to admit--this is how we roll, too. plain old span class first letter. I don't count on devices or firmware, etc. to support pseudos. It's just...you know.

Hitch

[Tex2002ans]

Originally Posted by Jellby

Personally, I prefer <span class="first-letter"> instead of a pseudo-element. First, pseudo-elements are (were?) not widely supported.

Originally Posted by Jellby

Second, I want more control over what is the first letter, I may want to include (or not) an opening quote mark, or a following punctuation, [...]

Yep. This is the biggest reason why I don't use it. There's also too many edge-cases like:

• poetry in very first line
• AuthorBio as "first paragraph"
• Image/Chart/Caption at beginning of chapter
• Frontmatter/Backmatter
• [...]

so using these pseudo-selectors won't be able to catch nuanced situations.

Again, if you KISS (Keep It Simple, Stupid) + use basic CSS and <span>:

<h2>Chapter 1</h2>

<p class="noindent"><span class="dropcap">“I</span> am testing dropcaps.</p>

... it's uglier code, but those will "work" everywhere and not break. :P

Originally Posted by Hitch

Yeah, I have to admit--this is how we roll, too. plain old span class first letter. I don't count on devices or firmware, etc. to support pseudos. It's just...you know.

You also have line-spacing problems + all the other issues that come with dropcaps/raised-caps.

Side Note: If you want more info on dropcaps, type this in your favorite search engine:

dropcaps Tex2002ans site:mobileread.com
dropcaps Hitch site:mobileread.com

we have over 8 years of discussion on the topic.

Hint: Trying to replicate dropcaps in ebooks is a very poor idea. To get them working across readers in all sorts of fonts + font sizes... it just won't be happening.

Originally Posted by DaveLessnau

What's interesting about ::first-letter is that, so far, it's been smart enough to work correctly with starting punctuation (i.e., quotes and ellipsis, that I've noticed).

Which readers did you test on?

Like Jellby said, I've definitely seen it break when dealing with punctuation.

Originally Posted by JSWolf

I've seen plenty of cases where the first character in the first paragraph was a quote and it was made lager along with the first letter. If :first-letter does not work that way, then it's not the correct way to do it.

You can read about it at:

• MDN: "::first-letter"

As always, it's a hell of a lot more complicated when taking into account Internationalization too (for example, MDN mentions "IJ" is considered a single "letter" in Dutch).

[JSWolf]

Plus, pseudo-classes may not work. They don't work in the version of RMSDK used on Kobo (for example).

[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). I just went back to double-check and it's not working. I have no idea what changed.

Drat. I was really happy with that.

EDIT: The problem has something to do with my using it in:

h1 + p, h2 + p, hr + p {
  text-indent: 0;
}
h1 + p::firstletter, h2 + p::first-letter, hr + p::first-letter {
    font-weight: bold;
}

I thought I'd fixed the issue earlier when I used the two h + p classes (one for indent and one for first-letter). Looks like I was wrong. If I just use p::first-letter, it works fine. I'll have to play around with it some more.

EDIT 2: Hah. A lousy typo. In my first first-letter case, I dropped a hyphen: "h1 + p::firstletter," instead of "h1 + p::first-letter,". Putting it back lets it all work again. Now I'll try testing on Kobo (it works in Calibre's stuff).