07-26-2022, 03:58 PM | #1 |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Suggestions for ::first-letter (:first-letter)?
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? |
07-26-2022, 04:15 PM | #2 |
Resident Curmudgeon
Posts: 74,484
Karma: 129668758
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
07-26-2022, 05:11 PM | #3 | |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Quote:
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/>. |
|
07-27-2022, 08:24 AM | #4 |
Wizard
Posts: 1,563
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
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: Code:
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, hr + p { text-indent: 0; } Code:
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; } |
07-27-2022, 08:51 AM | #5 | |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Quote:
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. Last edited by enuddleyarbl; 07-27-2022 at 09:08 AM. |
|
07-27-2022, 09:35 AM | #6 | |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Quote:
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. |
|
07-27-2022, 09:54 AM | #7 |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
With these classes:
Code:
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; } |
07-27-2022, 10:29 AM | #8 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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")...
|
07-27-2022, 10:35 AM | #9 |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
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). |
07-27-2022, 11:27 AM | #10 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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.
|
07-27-2022, 03:29 PM | #11 |
Resident Curmudgeon
Posts: 74,484
Karma: 129668758
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
07-29-2022, 12:04 PM | #12 | |
Bookmaker & Cat Slave
Posts: 11,463
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
07-31-2022, 06:16 PM | #13 | |||||
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
Quote:
Yep. This is the biggest reason why I don't use it. There's also too many edge-cases like:
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>: Code:
<h2>Chapter 1</h2> <p class="noindent"><span class="dropcap">“I</span> am testing dropcaps.</p> Quote:
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: Code:
dropcaps Tex2002ans site:mobileread.com dropcaps Hitch site:mobileread.com 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. Quote:
Like Jellby said, I've definitely seen it break when dealing with punctuation. Quote:
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). Last edited by Tex2002ans; 07-31-2022 at 06:19 PM. |
|||||
08-01-2022, 05:23 AM | #14 |
Resident Curmudgeon
Posts: 74,484
Karma: 129668758
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Plus, pseudo-classes may not work. They don't work in the version of RMSDK used on Kobo (for example).
|
08-01-2022, 02:38 PM | #15 |
Guru
Posts: 734
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
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: Code:
h1 + p, h2 + p, hr + p { text-indent: 0; } h1 + p::firstletter, h2 + p::first-letter, hr + p::first-letter { font-weight: bold; } 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). Last edited by enuddleyarbl; 08-01-2022 at 02:58 PM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Letter-spacing | kamanza | ePub | 17 | 02-04-2022 02:11 AM |
Question about converting first letter of word into a Capital Letter | TheBossz | Calibre | 2 | 07-24-2021 06:19 PM |
Grouping by first letter of first name rather than last name | Dopedangel | Calibre Companion | 7 | 05-18-2015 12:49 PM |
Letter to McMillan | gshoe | News | 34 | 02-08-2010 08:44 PM |
Would it be possible to do three-letter searches? | Andanzas | Feedback | 8 | 07-10-2007 09:50 PM |