:first-letter selector support in KF8

[Doitsu]

After reading PoP's post about his 2D Transforms tests support in KF8, I did some tests too and found out that KF8 actually supports the :first-letter selector even though the Kindle Publishing Guidelines say it doesn't
I used the following style to format the first letter of the first paragraph after the heading:

p:nth-child(2):first-letter {
    font-family: sans-serif;
    float: left;
    font-size: 4em;
    font-weight: bold;
    margin-top: -0.2em;
    margin-bottom: -0.2em;
    margin-right: 5px;
    color: red;
}

The :first-letter selector makes it easy to add dropcaps to ebooks with lots of chapters in them without having to mark the first letter of the paragraph. (KF8 also supports text-transform and text-shadow as my cheesy heading example demonstrates.)

tl:dr some CSS3 styles that have so far only been available in iBooks ePubs can also be used in KF8 books.

EDIT: The following pseudo elements are known to work in KF8*:

:after 
:before 
:first-letter
:first-line 
:first-of-type
:last-of-type
:lang(xx)
:nth-child(n) 
:nth-child(even)  
:nth-child(odd)
:nth-of-type(n)
:only-of-type
:not

*Warning: Even though these features were successfully tested with an old K3, the Kindle for PC app and both KindleGen 2.8 and Calibre generated KF8 files, there's no guarantee that they'll work with all KF8 enabled devices and apps.

Use at your own risk!

[DiapDealer]

Are you testing on real devices or Kindle Previewer?

[Doitsu]

Originally Posted by DiapDealer

Are you testing on real devices or Kindle Previewer?

I always test everything on my K3 and with the Kindle for PC app.
I don't trust Kindle Previewer.

[DiapDealer]

Hmmm. I wonder what the reasoning is for explicitly stating it isn't supported, then? Does it do something unspeakable on the plain mobi side of the conversion? It's one thing to have undocumented support for something, but I would think there'd be a reason of some sort for expressly saying it's not supported.

[Doitsu]

Originally Posted by DiapDealer

Hmmm. I wonder what the reasoning is for explicitly stating it isn't supported, then?

Amazon, in their infinite wisdom, might have decided to include support for this particular selector, because it's often used in dropcaps styles, and since none of the other pseudo classes seem to be supported in KF8, the tech writers most likely assumed that none of them are supported.

OTOH, the publication guidelines also contains recommendations such as "Publishers can include their own font for their content. Amazon has a quality assurance process to ensure that these fonts display well on e Ink-based devices and do not impair the reading experience. Do not include the Charis font; it is replaced with a higher quality font in the Kindle Readers."
I. e., whoever maintains the style guide might not be the most knowledgeable person.

Originally Posted by DiapDealer

Does it do something unspeakable on the plain mobi side of the conversion?

It's simply being ignored.

Originally Posted by DiapDealer

It's one thing to have undocumented support for something, but I would think there'd be a reason of some sort for expressly saying it's not supported.

Well, there's the off chance that this particular selector might trigger a secret self-destruction count-down timer...

[DiapDealer]

Originally Posted by Doitsu

Well, there's the off chance that this particular selector might trigger a secret self-destruction count-down timer...

See... now we're getting somewhere.

[RbnJrg]

Originally Posted by Doitsu

Amazon, in their infinite wisdom, might have decided to include support for this particular selector, because it's often used in dropcaps styles, and since none of the other pseudo classes seem to be supported in KF8, the tech writers most likely assumed that none of them are supported.

Hmmm, your words made me think. It seems that Amazon added support not only for the pseudo-element :first-letter but also for the pseudo-element :first-line:

  p:nth-child(2):first-line {
    font-variant: small-caps;
    font-size:1.2em
  }

  p:nth-child(2):first-letter {
    float: left;
    font-size: 4em;
    font-weight: bold;
    margin-top: -0.2em;
    margin-bottom: -0.2em;
    margin-right: 5px;
  }

With that, you can get an output like the following picture. But the curious thing is that:

p:first-line {text-transform: uppercase}

doesn't work You can use others properties like color, font-variant, font-size, etc., etc. and all of them work but I don't know why text-transform doesn't work. I must be doing something wrong

[PoP]

Originally Posted by Doitsu

... makes it easy to add dropcaps to ebooks with lots of chapters in them without having to mark the first letter of the paragraph...

Just a variant for multiple chapters (when contained in a single html document):

h3:nth-child(2n) {
    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px grey;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

h3:nth-child(2n+1) {
    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px grey;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}

/* paragraph immediately following heading3 */
h3 + p {
    text-indent: 0;
}

p {
    margin: 0;
    text-indent: 1em;
}

/* Small Caps RbnJrg: p:nth-child(2):first-line*/
h3 + p:first-line { 
    font-variant: small-caps;
    font-size:1.2em;
    font-weight: bold;
  }

/* Dropcaps Doitsu p:nth-child(2):first-letter */
h3 + p:first-letter { 
    float: left;
    font-size: 4em;
    font-weight: bold;
    margin-top: -0.2em;
    margin-bottom: -0.2em;
    margin-right: 5px;
  }

Thanks for digging more into this Doitsu and RbnJrg. Interesting, if not always reliable. My mileage did vary depending on devices. eReaders manufacturers must like that « The beauty with standards is that there are so many to choose from »

[Doitsu]

Apparently, KF8 supports quite a number of pseudo classes. I tested a couple more of them that I thought might be useful for automatically applying styles to unformatted paragraphs and found out that at least the following pseudo classes work:

:after
:before
:first-letter
:first-line
:first-of-type
:last-of-type
:lang(xx)
:nth-child(n)
:nth-child(even)
:nth-child(odd)
:nth-of-type(n)
:only-of-type

IMHO, some of them are redundant, while others provide useful automated formatting options. For example, you can use p:first-of-type:first-letter instead of explicitly selecting the paragraph by number with p:nth-child(2):first-letter to apply a dropcap style. You can also zebra-stripe table rows with :nth-child or insert text or images with :before and :after.

(I've attached the updated epub, which passes epubcheck, compiles without warnings but doesn't work with ADE, to the first post.)
Note that the text and symbols displayed in red in the KFPC screenshot have been created without modifying the .html file and without embedded fonts/images.

[RbnJrg]

Originally Posted by Doitsu

Apparently, KF8 supports quite a number of pseudo classes. I tested a couple more of them that I thought might be useful for automatically applying styles to unformatted paragraphs and found out that at least the following pseudo classes work:


:after
:before
:first-letter
:first-line
:first-of-type
:last-of-type
:lang(xx)
:nth-child(n)
:nth-child(even)
:nth-child(odd)
:nth-of-type(n)
:only-of-type

Wow!! Now with the pseudo-classes :before and :after the chapter numbering (among other things) can be automated or be simpler.
Amazon must have added support for them recently because I remember that not long ago I tried to use them and kindlegen gave me warning messages and not allow me to use them. Great work Doitsu!!

[William Ockham]

Be very careful about making statements about what "KF8" supports. What you have discovered is what the version of webkit that is embedded in the device or app supports. That's important because there are subtle differences between the webkit versions on various KF8 capable devices and apps. I know there are differences in the types of media queries that work and I have no idea what other differences might exist.

[Doitsu]

Originally Posted by William Ockham

Be very careful about making statements about what "KF8" supports. What you have discovered is what the version of webkit that is embedded in the device or app supports. That's important because there are subtle differences between the webkit versions on various KF8 capable devices and apps. I know there are differences in the types of media queries that work and I have no idea what other differences might exist.

Of course, there's no guarantee that this will work with all KF8 enabled devices and apps, and it goes without saying that undocumented features shouldn't be used for production Kindle books. However, since the device and app that I tested it with (K3 and Kindle for PC respectively) are pretty much the lowest common denominator, it's highly unlikely that the specific pseudo classes that I included in my test book won't work with more recent devices and apps since updated firmware/KindleGen versions rarely remove support for existing features.
I also made sure to only include pseudo classes that KindleGen 2.8 compiles without displaying warnings. For example, both the K3 and the Kindle for PC app also support :​before with auto-incrementing counters just fine, however, since KindleGen 2.8 displayed a W28002: CSS style specified in content is not supported by Kindle readers. warning for them, I didn't include them.

Just to be on the safe side, I also added a short disclaimer to my initial post.

[Hitch]

Originally Posted by Doitsu

Of course, there's no guarantee that this will work with all KF8 enabled devices and apps, and it goes without saying that undocumented features shouldn't be used for production Kindle books. However, since the device and app that I tested it with (K3 and Kindle for PC respectively) are pretty much the lowest common denominator, it's highly unlikely that the specific pseudo classes that I included in my test book won't work with more recent devices and apps since updated firmware/KindleGen versions rarely remove support for existing features.
I also made sure to only include pseudo classes that KindleGen 2.8 compiles without displaying warnings. For example, both the K3 and the Kindle for PC app also support :​before with auto-incrementing counters just fine, however, since KindleGen 2.8 displayed a W28002: CSS style specified in content is not supported by Kindle readers. warning for them, I didn't include them.

Just to be on the safe side, I also added a short disclaimer to my initial post.

Hey, Doitsu:

Actually, I'd note that in my opinion, K4PC is not one of the lowest common denominators. It displays some things (like the NCX) that aren't displayable on other Amazon "devices." I'd wonder if any of those would work in the Paperwhite, and, of course, with pseudo-classes like "first-letter" and child classes do you have any possibility of creating any fallback media queries for the earlier, K7 devices? Or, because K7 doesn't really "use" CSS, does any fallback coding get ignored? Just a question. (I mean, hell, last I looked, even Nook didn't support the pseudo-classes.) I'm very appreciative of the testing and the results!

I'd love to use pseudo-classes and I'd really love to use the nth for table coloration, but...I think that would leave the K7 looking pretty damn barebones. We usually go to some lengths to ensure that we provide fallback styling for any K8 elements that won't "fly" on the K7, even to creating fallback styling for images that float in K8 but not in K7. I'd have to see if the fallback could indeed "fall back" and make something for the K7. Interesting.

Hitch

[William Ockham]

Hitch,

All these work on the Paperwhite. The Amazon e-Ink devices (excepting the old KF7 ones) have all been upgraded to a webkit build of 528 (possibly higher for the Paperwhite, I haven't checked since the last update).

There's no way that I have found to precisely duplicate the ":first-line" pseudo class. I've taken to wrapping x words in a span (where x is a number between 4 and 8) and styling them inside a amzn-mobi media query).

[Hitch]

Originally Posted by William Ockham

Hitch,

All these work on the Paperwhite. The Amazon e-Ink devices (excepting the old KF7 ones) have all been upgraded to a webkit build of 528 (possibly higher for the Paperwhite, I haven't checked since the last update).

There's no way that I have found to precisely duplicate the ":first-line" pseudo class. I've taken to wrapping x words in a span (where x is a number between 4 and 8) and styling them inside a amzn-mobi media query).

Yes. That's precisely what we do, which is why I was asking. ;-) Obviously, I'd love to be able to use :first-line or :first-letter pseudo classes if we could (although they don't work for Nook, AFAI can recall), but...bummer!

Hitch