First Line Pseudo Element in epubs

[RbnJrg]

Originally Posted by JSWolf

They break the cardinal rule to keep it as simple as possible.

That rule doesn't exist; it was created for lazy men. Epubs must be epub3 with fallback code for epub2, so the users with a proper device can get the best reading experience. Look at these pictures:



And now after increasing the font size:





Those pictures are from "Alice in wonderland" and belong to Kobo for Android. Try doing the same with basic css code; you won't be able; you'll have a lot of blank spaces here and there. The best reading experience can't be get with "KISS" code.

[JSWolf]

Originally Posted by RbnJrg

That rule doesn't exist; it was created for lazy men. Epubs must be epub3 with fallback code for epub2, so the users with a proper device can get the best reading experience. Look at these pictures:

Attachment 207473 Attachment 207474 Attachment 207475

And now after increasing the font size:

Attachment 207476 Attachment 207479 Attachment 207477

Attachment 207478

Those pictures are from "Alice in wonderland" and belong to Kobo for Android. Try doing the same with basic css code; you won't be able; you'll have a lot of blank spaces here and there. The best reading experience can't be get with "KISS" code.

Sure there are some cases where you need more complex code to do something. But when you don't you keep the code simple. The eBook I mentioned and posted CSS from is simply formatted and does not need such complex code that StandardEbooks use. Also, you won't use more complex code where it's needed and not where it's not.

[Turtle91]

KISS as applied in the html page… don’t add all those extra tags when most of the time they are unneeded.

KISS as applied to the stylesheet… use the most efficient css to achieve your goal while providing fallback for the older/inadequate devices.

[RbnJrg]

Originally Posted by JSWolf

The eBook I mentioned and posted CSS from is simply formatted and does not need such complex code that StandardEbooks use. Also, you won't use more complex code where it's needed and not where it's not.

Yes, I can understand that, we are not going to kill a mosquito with a cannon. But even ebooks that are simply formatted, we can use advanced code with advantage. I give you an example, look at these pictures:



and after increasing the font-size:



Those pictures are taken from Kobo for Android. And they represent layouts very common. How do you code that in a simpler way? One line of text at top, one line at bottom and a perfect centered line (and the layout is retained no matter the font size). The simpler code is:

1) In the xhtml:

  <div class="block">
    <p>Line One</p>

    <p>Line Two</p>

    <p>Line Three</p>
  </div>

Simpler than that?

2) In the .css:

p {
   margin: 0;
}

.block {
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-content: center;
   align-items: center;
   height: 99vh;
   border: 2px solid red;
   margin: 0;
}

.block p:nth-child(2n+1) {
   padding: 5% 0;
}

.block p:nth-child(2) {
   font-size: 2em;
   font-weight: bold;
}

With css2 properties you never can get the same perfect output. Even for simple layouts, you can use "advanced" (is not advanced at all) code to get optimal results.

[jackie_w]

Originally Posted by Turtle91

...I was making the argument for pseudo-selectors (the point of this thread). You said that they required 'ridiculously convoluted code'... I was just showing how simple and unconvoluted pseudo-selectors are.

I agree with Turtle91 on the subject of pseudo-selectors. I much prefer publishers to use :first-letter and :first-line with the appropriate mixed-case text than forcing ALLCAPS text with messy <span>/<small> tags. The worst that can happen is that you just see undecorated text with upper- and lower-case text in all the right places.

I particularly dislike contrived code like this:

<p class="first"><span class="big">W</span><small>E WENT TO A</small> L<small>ED</small> Z<small>EPPELIN CONCERT IN</small> 1972.</p>

Originally Posted by JSWolf

Pseudo-selectors don't work in enough cases.

Define "enough cases". They work on all PocketBooks and all Kobos (kepub). I'm not sure about Kindles but if they, at least, work in KFX format books then it sounds like quite a high percentage of current eink devices can support them.

[JSWolf]

Originally Posted by RbnJrg

Yes, I can understand that, we are not going to kill a mosquito with a cannon. But even ebooks that are simply formatted, we can use advanced code with advantage. I give you an example, look at these pictures:

Attachment 207482

and after increasing the font-size:

Attachment 207483

Those pictures are taken from Kobo for Android. And they represent layouts very common. How do you code that in a simpler way? One line of text at top, one line at bottom and a perfect centered line (and the layout is retained no matter the font size). The simpler code is:

1) In the xhtml:

  <div class="block">
    <p>Line One</p>

    <p>Line Two</p>

    <p>Line Three</p>
  </div>

Simpler than that?

2) In the .css:

p {
   margin: 0;
}

.block {
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-content: center;
   align-items: center;
   height: 99vh;
   border: 2px solid red;
   margin: 0;
}

.block p:nth-child(2n+1) {
   padding: 5% 0;
}

.block p:nth-child(2) {
   font-size: 2em;
   font-weight: bold;
}

With css2 properties you never can get the same perfect output. Even for simple layouts, you can use "advanced" (is not advanced at all) code to get optimal results.

It doesn't work correctly in Thorium Reader for Windows.

[RbnJrg]

Originally Posted by JSWolf

It doesn't work correctly in Thorium Reader for Windows.

You must have made a mistake. It DOES work in Thorium:



and also in ADE 4.x:



It works everywhere that supports flex-box.

But the point is not that. The point is that one can employ "fancy" code for simple layouts, so users with a proper device can get the best reading experience, and since you also have included fallback code, users with old device will get a suboptimal output. With flex-box, you'll get all perfectly spaced, no need to calc margins, no need to worry about anything. And all always perfect no matter if the font-size is increased. As I said, you can't get that with only css2 properties (of course, you'll have to employ them because of the fallback code, but the result won't be so good for all of them with old devices).

[DNSB]

For the most part, I will use the latest CSS supported by my devices for ebooks for my own use. After all, if I see any issues, working around them is a great learning experience and annoys no one other than me.

When I am working on ebooks for others which for the most part are intended to be published via KDP, I tend towards a simpler approach that will work on multiple devices without needing to get into the wonderful world of media queries and will not trigger errors during the conversion process. This at times has also been a learning experience since KDP's documentation and reality often do not have a one to one congruence.

[RbnJrg]

Originally Posted by DNSB

For the most part, I will use the latest CSS supported by my devices for ebooks for my own use. After all, if I see any issues, working around them is a great learning experience and annoys no one other than me.

When I am working on ebooks for others which for the most part are intended to be published via KDP, I tend towards a simpler approach that will work on multiple devices without needing to get into the wonderful world of media queries and will not trigger errors during the conversion process. This at times has also been a learning experience since KDP's documentation and reality often do not have a one to one congruence.

Amazon is another world KFX is a format that supports a very limitated subset of css3 properties. Even working with media queries things won't improve so much. For example, fragmentation can't be avoided in Kindle, so the reading experience will be not very different by using "complex" code. What I wrote is not applied for Kindle, only for epubs. I agree with you about what you do for ebooks to be published in KDP.

[JSWolf]

If I was creating an eBook for sale, I would test it on a Kobo in ePub and KePub. That way, I'd know what code that would need to be changed to work with ePub on a Kobo. Once that's done, I'm pretty much assured the eBook will work with most software to display ePub. It can be an ePub 3 with full accessibility and still work.

[DNSB]

Unfortunately, most authors consider Amazon to be their most important market. Something about 90% of ebook sales whispers money in their ears. Sadly, being dedicated to eating and keeping a roof over their heads, filthy lucre attracts them faster than moths to a light.

[Quoth]

Originally Posted by DNSB

Unfortunately, most authors consider Amazon to be their most important market. Something about 90% of ebook sales whispers money in their ears. Sadly, being dedicated to eating and keeping a roof over their heads, filthy lucre attracts them faster than moths to a light.

Absolutely more than 90% world wide for English and more than half of ebooks are read on phones, next is tablets, then eink Kindles.
The Alice example won't be good on a phone and on Amazon it would need to be either images each on their own line (to suit phones) and/or as Print Replica/PDF wrapped. Since it's for children and smallest read on paper and next up is kids' tablets I'd do an epub2 with images each on their own line that works on 100% or eink and all Kindle, Kobo, Nook, epub apps on phones AND a pdf on POD (paper) and offered as PDF/Print replica on tablet.

Maybe 99.9% or more of novels (not text books or children's books) have no benefit from Indesign, Vellum or handcrafted epub3. Some epub3 are simply convoluted alternatives with no mainstream publishing outlet for either PDF or apps.

The Alice book is totally untypical of novels for grown ups or even teenagers. Modern equivalent would be the "Wizard of Once" series and "How to Train your Dragon" series. I know kids that read those and have ereaders and tablets. They read stuff like that on paper. I agree replicatating those as a somewhat reflowable ebooks would use epub3. They have nothing that would read such an ebook (though probably something could be installed on the iPads or Fire tablet), but could manage PDF (or Kindle Print Replica based on PDF).

[RbnJrg]

Originally Posted by Quoth

The Alice book is totally untypical of novels for grown ups or even teenagers.

I posted those screenshots as mere example that with basic code, some layouts can't be reproduced. More than that, even for some basic layouts (for example a page with a line at top, a line at middle and a line at bottom, as I have posted) one can employ css3 code with advantage to produce better, perfect outputs (of course, also one must include fallback code, so the users with modern devices can get the best reading experience and users with older devices will get what epub2 can offer).

By the way, "Alice" under epub3, looks great on phones; no matter if the user changes the font size, the complex layout of the ebook can be reproduced and retained (the screenshoots taken from Kobo for Android are a sample). Another thing is Kindle; there, with the KFX format the Alice layout can't be reproduced; all I wrote is regarding the epub world; with regards the Amazon world, I don't say any word.

[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;
}

A little late, but I just saw this and I'll give it a go! Thank you!

[RbnJrg]

Originally Posted by m_pluto

A little late, but I just saw this and I'll give it a go! Thank you!

No problem