First Line Pseudo Element in epubs

[m_pluto]

Hey ya'll, so I am in the midst of a trying to figure something out with the css of my epubs. (for background info, I have a kobo sage)

I really like my the first line of the first paragraphs in chapter/section to have "font-variant: small-caps" using first-line pseudo element, I also like to have page breaks before subheadings/section titles when they occur in the middle of a chapter.

My dilemma is this: I understand kepubs do not support page breaks, and epubs do, but one thing I have not been able to figure out is if epubs support the pseudo element first-line. I know for sure kepubs do, as I've had that working for a while, but I haven't been able to get first-line working on epubs..... Is there a way to get this to work?

edit to add in case it matters, these are all epub3s....

[Turtle91]

Yes, it works fine on ePubs. I’ve been using it for years. The question is whether or not your device supports the css…

Spoiler:

This is what I use:

p.first::first-line {font-variant:small-caps}

<p class="first">This is the first paragraph in the chapter.</p>

The Kobo uses different rendering software depending if it is loaded as a kepub vs. an ePub. That’s why you may be seeing a difference.

I’m not a kobo user - maybe someone else has a better answer - but can you update the software/firmware on the kobo??

[JSWolf]

Originally Posted by m_pluto

Hey ya'll, so I am in the midst of a trying to figure something out with the css of my epubs. (for background info, I have a kobo sage)

I really like my the first line of the first paragraphs in chapter/section to have "font-variant: small-caps" using first-line pseudo element, I also like to have page breaks before subheadings/section titles when they occur in the middle of a chapter.

My dilemma is this: I understand kepubs do not support page breaks, and epubs do, but one thing I have not been able to figure out is if epubs support the pseudo element first-line. I know for sure kepubs do, as I've had that working for a while, but I haven't been able to get first-line working on epubs..... Is there a way to get this to work?

edit to add in case it matters, these are all epub3s....

Kobo uses two different programs to render ePub and KePub. Pseudo elements do not work with ePub. Also, small-caps do not work with ePub.

If KePub does not like your page breaks, then the only thing you can do is use the editor to split the pages as needed.

[RbnJrg]

Originally Posted by m_pluto

Hey ya'll, so I am in the midst of a trying to figure something out with the css of my epubs. (for background info, I have a kobo sage)

I really like my the first line of the first paragraphs in chapter/section to have "font-variant: small-caps" using first-line pseudo element, I also like to have page breaks before subheadings/section titles when they occur in the middle of a chapter.

My dilemma is this: I understand kepubs do not support page breaks, and epubs do, but one thing I have not been able to figure out is if epubs support the pseudo element first-line. I know for sure kepubs do, as I've had that working for a while, but I haven't been able to get first-line working on epubs..... Is there a way to get this to work?

edit to add in case it matters, these are all epub3s....

On epub3 first-line pseudo elements is honored. On Kobo for Android and iOS, works for both, epub and kepub. But I don't know if the rendering engine of your Kobo Sage have been updated with the last version.

Regarding page breaks, use the following code:

.pageBreak {
   -webkit-column-break-before: always;
   page-break-before: always;
   break-before: always;
}

[m_pluto]

Originally Posted by RbnJrg

On epub3 first-line pseudo elements is honored. On Kobo for Android and iOS, works for both, epub and kepub. But I don't know if the rendering engine of your Kobo Sage have been updated with the last version.

Regarding page breaks, use the following code:

.pageBreak {
   -webkit-column-break-before: always;
   page-break-before: always;
   break-before: always;
}

Will that work with kepubs, epubs, or both?

[RbnJrg]

Originally Posted by m_pluto

Will that work with kepubs, epubs, or both?

Both. The first and last properties are for kepubs (and epub3); the second property for epubs (epub2).

[JSWolf]

Pseudo elements will NOT work on the version of RMSDK used on a Kobo Reader. You need to use a <span>.

[Turtle91]

You, of course, can continue to use the pseudo-elements, they just might not work. Assuming the Kobo is standards-compliant it will just not render with the pseudo-element css. It should just ignore that coding completely. You can, and should, set your css so that your book still looks acceptable if there is any coding that gets ignored.

If a device doesn't follow the standards then submit a complaint/bug report so they can get it fixed.

[JSWolf]

Originally Posted by Turtle91

You, of course, can continue to use the pseudo-elements, they just might not work. Assuming the Kobo is standards-compliant it will just not render with the pseudo-element css. It should just ignore that coding completely. You can, and should, set your css so that your book still looks acceptable if there is any coding that gets ignored.

If a device doesn't follow the standards then submit a complaint/bug report so they can get it fixed.

The only way for Kobo to fix RMSDK to allow pseudo elements is for Kobo to update RMSDK to the latest version and I cannot see that happening.

If this is an eBook for sale or to be read as ePub on a Kobo, then pseudo elements cannot be. A <span> will have to be used instead.

[Turtle91]

Originally Posted by JSWolf

The only way for Kobo to fix RMSDK to allow pseudo elements is for Kobo to update RMSDK to the latest version and I cannot see that happening.

If this is an eBook for sale or to be read as ePub on a Kobo, then pseudo elements cannot be. A <span> will have to be used instead.

That may, or may not, be the case. If Kobo chooses to produce devices that don't support standard CSS then that is a marketing decision and they will reap the results of a substandard product. Letting them know, through bug reports, that the customer isn't happy is a sure fire way they will get the message.

All of that does not change what I said. You should always design your css to include fallback coding so that it still looks acceptable.

[DNSB]

Originally Posted by Turtle91

That may, or may not, be the case. If Kobo chooses to produce devices that don't support standard CSS then that is a marketing decision and they will reap the results of a substandard product. Letting them know, through bug reports, that the customer isn't happy is a sure fire way they will get the message.

Which version of ePub and supported CSS are you suggesting? For instance, Standard Ebooks in their Advanced ePub ebooks use the latest and, possibly, greatest CSS allowed by the ePub 3.3 standard. Few current ePub readers seem to be capable of handling that code other than the standard "I don't know what it is so I will treat it as a null operation".

[Turtle91]

Why, all of them, of course!

The devices should be maintained with soft/firm-ware updates with the latest versions. They also need to be backwards compatible to support all the older books. The opf states what version (2/3) the epub is, so it shouldn't be too hard for a reader to apply the correct function...if there are any differences.

Pseudo elements, in particular, have been around for a very long time. A device that doesn't support that css is, imho, broken...

That standard of treating unknowns as a null operation is to prevent books from crashing. If your device is old (no longer supported and/or company is out of business), or can't do color (eink), or something, then the device would ignore that css.

[JSWolf]

Originally Posted by Turtle91

Why, all of them, of course!

The devices should be maintained with soft/firm-ware updates with the latest versions. They also need to be backwards compatible to support all the older books. The opf states what version (2/3) the epub is, so it shouldn't be too hard for a reader to apply the correct function...if there are any differences.

Pseudo elements, in particular, have been around for a very long time. A device that doesn't support that css is, imho, broken...

That standard of treating unknowns as a null operation is to prevent books from crashing. If your device is old (no longer supported and/or company is out of business), or can't do color (eink), or something, then the device would ignore that css.

Sony Readers use an old RMSDK and there will not be an update. StandardEbooks eBooks won't work on a Sony Reader as they have code in the CSS that is taken as an error o the entire CSS gets ignored. I have pointed out the problem to them and they've ignored the report.

[Turtle91]

Originally Posted by JSWolf

Sony Readers use an old RMSDK and there will not be an update. StandardEbooks eBooks won't work on a Sony Reader as they have code in the CSS that is taken as an error o the entire CSS gets ignored. I have pointed out the problem to them and they've ignored the report.

Sony Readers = old/antiquated. They should just ignore the pseudo element...Thus my statement of having backup css so the book still looks acceptable. And if Sony Reader throws out the entire css then it is not standards compliant. Unfortunately, one complaint is sometimes not enough. If they refuse to maintain their product, then it is time to move on from their product. You also don't need a saddle in your horseless carriage!

[JSWolf]

Originally Posted by Turtle91

Sony Readers = old/antiquated. They should just ignore the pseudo element...Thus my statement of having backup css so the book still looks acceptable. And if Sony Reader throws out the entire css then it is not standards compliant. Unfortunately, one complaint is sometimes not enough. If they refuse to maintain their product, then it is time to move on from their product. You also don't need a saddle in your horseless carriage!

The main issue is they don't need this ridiculously convoluted code they feel they need to use for a simply formatted eBook. If they did it correctly then they would have no problem and would only need one ePub as it would be compatible without any problem.