![]() |
#1 |
Member
![]() Posts: 13
Karma: 10
Join Date: Jun 2021
Device: Kobo Sage
|
First Line Pseudo Element in epubs
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.... |
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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:
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?? |
![]() |
![]() |
Advert | |
|
![]() |
#3 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#4 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Regarding page breaks, use the following code: Code:
.pageBreak { -webkit-column-break-before: always; page-break-before: always; break-before: always; } |
|
![]() |
![]() |
![]() |
#5 | |
Member
![]() Posts: 13
Karma: 10
Join Date: Jun 2021
Device: Kobo Sage
|
Quote:
|
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,544
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
![]() |
![]() |
![]() |
#7 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Pseudo elements will NOT work on the version of RMSDK used on a Kobo Reader. You need to use a <span>.
|
![]() |
![]() |
![]() |
#8 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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. |
![]() |
![]() |
![]() |
#9 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#10 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#11 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 35,464
Karma: 145525534
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
|
|
![]() |
![]() |
![]() |
#12 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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. Last edited by Turtle91; 04-08-2024 at 04:29 PM. |
![]() |
![]() |
![]() |
#13 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#14 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
![]() |
|
![]() |
![]() |
![]() |
#15 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 74,015
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
Tags |
epub, kepub, kobo, kobo sage, pseudo-elements |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
mangled em-dash as a CSS pseudo-element | sujato | Viewer | 2 | 08-02-2022 05:47 AM |
To cite ePubs: Do you recommend an ID attribute for every single element? | ibu | ePub | 12 | 08-08-2013 05:03 AM |
Default line-height in epubs | Derek R | ePub | 2 | 02-13-2012 11:23 AM |
Touch Problem with all epubs, my epubs, or my kobo? (line clipping) | plague006 | Kobo Reader | 14 | 12-02-2011 11:32 PM |
Command Line Batch Adding of Epubs | nkormanik | Calibre | 6 | 10-19-2010 08:04 AM |