I had an idea for the epub standard, and want to know your thoughts. - Page 4

JSWolf · 06-25-2025, 04:36 PM

Quote:

Originally Posted by RbnJrg

It's useless for me to explain it to you, there is no one more blind than he who does not want to see. But tell me, how do you can avoid a page-break after a box under epub3? Of course, with a code that works for example, in Thorium (that is the standard in epub3 and is the solution from Readium as desktop ereader).

Webkit is not ePub code. So if proper ePub code does not work, then it is a bug in the program. Can you please show where webkit is ePub3 compliant? If you need webkit code to get what you want to work, it will not work in ADE 4.5 and any other program that doesn't support webkit. If it cannot be done without webkit, then don't do it.

Falkor · 06-25-2025, 04:41 PM

Quote:

Originally Posted by RbnJrg

You are doing something wrong. By writting "height: 100%" has no effect on children boxes (unless you also have "height: 100%" for <html> and <body> tags on ereaders based on Readium/Webkit. It has effect on ereaders based on RMSDK (ADE 2.x/3.x) but these last ones will ignore your "height: 80vh", so for that reason "height: 100%" works. But some ereaders based on Readium/Webkit won't use the full space you reserve for figure > svg (in your case "height: 80vh") unless you set "height: 100%" for figure. You must have something wrong with the width and height in your svg wrapper.

What? I suppose you are working under epub3, otherwise <figure> is not honored under epub2 and you shouldn't employed it in ADE (in ADE 4.x, as epub3, it WORKS). In Thorium and Calibre Viewer my code looks great; here you have some screenshoots:

1. In Thorium (with a font-size of 100%):

Attachment 216475 Attachment 216476

2. In Thorium (with a font-size of 137.5%):

Attachment 216477 Attachment 216478

3. In Calibre Viewer (with a font-size of 14px):

Attachment 216479 Attachment 216480 Attachment 216481

4. In Calibre Viewer (with a font-size of 18px):

Attachment 216482 Attachment 216483 Attachment 216484 Attachment 216485

I attach the respective epub so you can test it in your system. Open it in Calibre Viewer and start with a font-size: 14px; then increase the font-size to 28px. As you will be able to see, the caption remains with the picture and there is no fragmentation in the text (there is no blank space generated by the image and the change of the font-size). You must be doing something wrong, otherwise you would have the same output than me.

As I stated before, you have something wrong. Post your code here and I will be able to help you better.

I found the error: I had SVG height set to 100vh in the style sheet (the svg still had 100% height as an attribute in the html file – apparently attributes don't have priority over CSS, unlike inline-styles)
No more problems with captions on on the picture – but I can still make them split in Books and ADE 4.5. Your test file as well.

RbnJrg · 06-25-2025, 05:05 PM

Quote:

Originally Posted by JSWolf

Webkit is not ePub code. So if proper ePub code does not work, then it is a bug in the program. Can you please show where webkit is ePub3 compliant? If you need webkit code to get what you want to work, it will not work in ADE 4.5 and any other program that doesn't support webkit. If it cannot be done without webkit, then don't do it.

As I said, it's useless for me to explain it to you, there is no one more blind than he who does not want to see.

I employ both; webkit code for those ereader that work with webkit code (Readium, Bibi Reader, JSReader, Thorium, Cantook, Kobo for Android, PocketBook, Reasily, Lithium) and standard code for those ereaders that doesn't honor webkit code. Have you ever read this by any chance?

https://webkit.org/css-status/#

That is webkit. And, how many properties are non-standard compared to standard?

I employ everything that work, for that reason my epubs can be read them practically on any ereader (on epub2 ereaders, the epubs look very nice and on epub3 ereaders, they look great).

Falkor · 06-25-2025, 05:10 PM

Quote:

Originally Posted by JSWolf

Webkit is not ePub code. So if proper ePub code does not work, then it is a bug in the program. Can you please show where webkit is ePub3 compliant? If you need webkit code to get what you want to work, it will not work in ADE 4.5 and any other program that doesn't support webkit. If it cannot be done without webkit, then don't do it.

Why are you making such a big deal out of this? It's CSS. It evolves. Prefixed properties are not uncommon. They won't break anything, because CSS is forward compatible. Unsupported properties will be ignored. If different renderers use different properties to achieve the same thing, you will have to use more than one to maximize compatibility.

We're supposed to jump through hoops to ensure backwards compatibility with RMSDK’s broken error parsing–which certainly isn’t ePub2 compliant–but prefixed properties are supposed to be a problem?

Also, ADE 4.5 does support several webkit-prefixed properties. I have successfully used -webkit-column-break-after for page breaks and -webkit-initial-letter for drop caps. The standard "initial-letter" is not supported.

JSWolf · 06-25-2025, 05:12 PM

Quote:

Originally Posted by RbnJrg

As I said, it's useless for me to explain it to you, there is no one more blind than he who does not want to see.

I employ both; webkit code for those ereader that work with webkit code (Readium, Bibi Reader, JSReader, Thorium, Cantook, Kobo for Android, PocketBook, Reasily, Lithium) and standard code for those ereaders that doesn't honor webkit code. Have you ever read this by any chance?

https://webkit.org/css-status/#

That is webkit. And, how many properties are non-standard compared to standard?

I employ everything that work, for that reason my epubs can be read them practically on any ereader (on epub2 ereaders, the epubs look very nice and on epub3 ereaders, they look great).

But if the programs are ePub3 compliant, you don't need any webkit code. It matter not that they may be built on webkit.

JSWolf · 06-25-2025, 05:14 PM

Quote:

Originally Posted by Falkor

Why are you making such a big deal out of this? It's CSS. It evolves. Prefixed properties are not uncommon. They won't break anything, because CSS is forward compatible. Unsupported properties will be ignored. If different renderers use different properties to achieve the same thing, you will have to use more than one to maximize compatibility.

We're supposed to jump through hoops to ensure backwards compatibility with RMSDK’s broken error parsing–which certainly isn’t ePub2 compliant–but prefixed properties are supposed to be a problem?

Also, ADE 4.5 does support several webkit-prefixed properties. I have successfully used -webkit-column-break-after for page breaks and -webkit-initial-letter for drop caps. The standard "initial-letter" is not supported.

Because it's spreading incorrect information.

There is a way around the older RMSDK's CSS bug. Use @support for any CSS that causes RMSDK to ignore the CSS. The other issue is that there are a lot of Readers out there in use that use an older RMSDK that does not support webkit. For example, Kobo uses some version 3 RMSDK and they are current Readers that are used by a lot of people. Some still use a Sony Reader which uses an even older RMSDK.

RbnJrg · 06-25-2025, 05:17 PM

Quote:

Originally Posted by Falkor

I found the error: I had SVG height set to 100vh in the style sheet (the svg still had 100% height as an attribute in the html file – apparently attributes don't have priority over CSS, unlike inline-styles)
No more problems with captions on on the picture – but I can still make them split in Books and ADE 4.5. Your test file as well.

You opened my epub in ADE, and I said that you should open it in Thorium and Calibre Viewer (because you had said that the code wouldn't look fine in those ereaders). Open my epub in those ereaders please (there it should look fine, as you could see in the screenshoot I posted). ADE 4.x DOESN'T HONOR the property "calc()", so it's neccesary to write special code to deal with ADE 4.x and captions (ADE 4.x is an issue, because it also lacks support for @supports and makes it a little harder to write alternative code).

DiapDealer · 06-25-2025, 05:18 PM

This thread is like watching a slow-motion Trainwreck over and over again.

Jon, you need to give it a rest. And everybody else needs to stop trying to change his mind.

RbnJrg · 06-25-2025, 05:28 PM

Quote:

Originally Posted by JSWolf

Because it's spreading incorrect information.

There is a way around the older RMSDK's CSS bug. Use @support for any CSS that causes RMSDK to ignore the CSS.

ADE ignores @supports and if inside any @supports statement ADE finds something it doesn't like (i.e. calc()), then all the css stylesheet will be ignored. You can't rely on @supports to avoid ADE bugs.

graycyn · 06-25-2025, 06:36 PM

Quote:

Originally Posted by Falkor

You may apply that style only to readers that support initial-letter, so you can add as much padding or margin as you need

Code:

@supports (initial-letter: 2;) {
  p.chapter-lead::first-letter {
    initial-letter: 2;
    -webkit-initial-letter: 2;
}
}

Thanks for the help! I knew about @supports, but have no experience actually using it, and I'm not sure I'm entirely comfortable with it.

However, the question in my mind is, does KINDLE work with these @supports EPUB rules, being that any epub will be converted? I don't want to get too complicated, my old brain is happiest with keeping things simple.

KINDLE is the first device so far that I've encountered with "first-letter" support, but NOT "initial-letter."

Not to say I won't encounter more such, but Kindle is definitely a major player in the e-reading world. I'm fine with things falling back to straight plain text; that's not critical mass, as that's how anyone reading epub on a Kobo would see the book as well.

RbnJrg · 06-25-2025, 06:58 PM

Quote:

Originally Posted by graycyn

Thanks for the help! I knew about @supports, but have no experience actually using it, and I'm not sure I'm entirely comfortable with it.

However, the question in my mind is, does KINDLE work with these @supports EPUB rules, being that any epub will be converted? I don't want to get too complicated, my old brain is happiest with keeping things simple.

KINDLE is the first device so far that I've encountered with "first-letter" support, but NOT "initial-letter."

Not to say I won't encounter more such, but Kindle is definitely a major player in the e-reading world. I'm fine with things falling back to straight plain text; that's not critical mass, as that's how anyone reading epub on a Kobo would see the book as well.

If you want a drop-cap, then you don't need the "initial-letter: X;" property; Kindle will build the drop cap for you. Just employ the standard code:

Code:

.noIndent {
   text-indent: 0;
}

.dropCap {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

And in your .xhtml file write something like:

Code:

<p class="noIndent"><span class="dropCap">L</span>orem ipsum...</p>

With that simple code Kindle will format perfectly the drop cap for you. Of course, you also can employ the pseudo-element first-letter:

Code:

p.dropCap {
   text-indent: 0;
}

p.dropCap::first-letter {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

and

Code:

<p class="dropCap">Lorem ipsum...</p>

graycyn · 06-25-2025, 07:54 PM

Quote:

Originally Posted by RbnJrg

If you want a drop-cap, then you don't need the "initial-letter: X;" property; Kindle will build the drop cap for you. Just employ the standard code:

Code:

.noIndent {
   text-indent: 0;
}

.dropCap {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

And in your .xhtml file write something like:

Code:

<p class="noIndent"><span class="dropCap">L</span>orem ipsum...</p>

With that simple code Kindle will format perfectly the drop cap for you. Of course, you also can employ the pseudo-element first-letter:

Code:

p.dropCap {
   text-indent: 0;
}

p.dropCap::first-letter {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

and

Code:

<p class="dropCap">Lorem ipsum...</p>

For accessibility, I'll be using "first-letter," no spans around individual letters, as screen-readers don't always like that, so the chips will have to fall where they may on Kindle. I'm not exactly a natural, nor whiz at this stuff.

The book will look nice enough on Kindle without the drop caps. And I'm not going to get drop caps everywhere anyway unless I employ spans around the individual first letter, so Kindle can live in the vintage ADE boat along with all the other older readers.

The thing I like about initial-letter is it seems to be mostly free of all the trouble I have when reading ebooks that contain drop caps. I've not seen initial-letter dropcaps collapse into tiny dots, nor seen the drop cap disappear entirely!

Besides, just because Kindle doesn't honor initial-letter NOW, doesn't mean it might not get the capability at a future date. A gal can always stay hopeful!

Thanks for your insights though! Very appreciated, it's just that I have to keep things manageable and relatively simple. I can only push the line a little bit as I'm not a natural at this coding stuff. But I am willing to do so to the extent I'm capable.

JSWolf · 06-26-2025, 03:13 AM

Quote:

Originally Posted by RbnJrg

If you want a drop-cap, then you don't need the "initial-letter: X;" property; Kindle will build the drop cap for you. Just employ the standard code:

Code:

.noIndent {
   text-indent: 0;
}

.dropCap {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

And in your .xhtml file write something like:

Code:

<p class="noIndent"><span class="dropCap">L</span>orem ipsum...</p>

With that simple code Kindle will format perfectly the drop cap for you. Of course, you also can employ the pseudo-element first-letter:

Code:

p.dropCap {
   text-indent: 0;
}

p.dropCap::first-letter {
   float: left;
   font-weigth: bold;
   font-size: 3.6em; /* or whatever you want to write here */
   margin: 0 5px 0 0;
}

and

Code:

<p class="dropCap">Lorem ipsum...</p>

With your first code for the Kindle, will you get a perfect dropcap when using ChareInk6SP as the font wiyh KF8? The font uses a smaller line height that works in KF8 but not KFX.

RbnJrg · 06-26-2025, 10:47 AM

Quote:

Originally Posted by JSWolf

With your first code for the Kindle, will you get a perfect dropcap when using ChareInk6SP as the font wiyh KF8? The font uses a smaller line height that works in KF8 but not KFX.

The perfect drop cap only is for KFX, for .kf8 you need more than that simple code to have a decent drop cap. You need to employ the same font for body text and drop cap and the line height of the drop cap has to be the same as the paragraphs. Besides, it's neccesary to adjust drop cap margins. Something like this:

Code:

body {
   font-size: 1em; /* to have a consistent font-size for all ebook */
}

p {
   margin: 0;
   text-align: justify;
   text-indent: 1.2em;
   line-height: 1.2em;
   font-size: 100%; /* now that 100% is 100% of font-size of body */
}

p.drop {
   text-indent: 0;
}

.dropCap {
   float: left;
   line-height: 1.2em;
   font-size: 360%; /* Or the size you wish */
   font-weight: bold;
   margin: -0.02em 5px -0.03em 0; /* Here you could need change these values */
}

The best output under .kf8 is by employing a .svg image, so what floats as drop cap is not a letter but an image. Best (perfect) output for drop caps (no matter the font-size) is achieved under KFX and under epub3 with ereaders that suppor "initial-letter" (or "-webkit-initial-letter") property. In my tests with epub3 all Sigil's plugins, Calibre Viewer, Thorium, Koodo Reader, Foliate, Cantook, Reasily, Lithium, PocketBook, Infinity Reader and Kobo for Android support that property.

JSWolf · 06-26-2025, 11:26 AM

Quote:

Originally Posted by RbnJrg

The perfect drop cap only is for KFX, for .kf8 you need more than that simple code to have a decent drop cap. You need to employ the same font for body text and drop cap and the line height of the drop cap has to be the same as the paragraphs. Besides, it's neccesary to adjust drop cap margins. Something like this:

Code:

body {
   font-size: 1em; /* to have a consistent font-size for all ebook */
}

p {
   margin: 0;
   text-align: justify;
   text-indent: 1.2em;
   line-height: 1.2em;
   font-size: 100%; /* now that 100% is 100% of font-size of body */
}

p.drop {
   text-indent: 0;
}

.dropCap {
   float: left;
   line-height: 1.2em;
   font-size: 360%; /* Or the size you wish */
   font-weight: bold;
   margin: -0.02em 5px -0.03em 0; /* Here you could need change these values */
}

The best output under .kf8 is by employing a .svg image, so what floats as drop cap is not a letter but an image. Best (perfect) output for drop caps (no matter the font-size) is achieved under KFX and under epub3 with ereaders that suppor "initial-letter" (or "-webkit-initial-letter") property. In my tests with epub3 all Sigil's plugins, Calibre Viewer, Thorium, Koodo Reader, Foliate, Cantook, Reasily, Lithium, PocketBook, Infinity Reader and Kobo for Android support that property.

The line-height of 1.2em might not work on a Kindle in KFX. Also, you don't want to force a line height as one of the reasons for using ChareInk6SP is to have a smaller line height and if your line-height works, then it spoils the line height of the font. So can you do a dropcap in KFX without the line-height and not knowing what the default line-height will be?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Kindle Epub vs Standard Epub	JudahsShadow	Library Management	3	05-01-2023 01:55 PM
Linux ePub reader app that best fullfills the ePUB standard	celiapgt	Reading and Management	12	04-19-2022 12:42 AM
Help revise the Epub standard	Nate the great	General Discussions	8	04-18-2010 11:29 AM
Standard Reader for Epub	bhuvana786	ePub	6	08-21-2009 11:00 AM

06-25-2025, 05:18 PM	#53
DiapDealer Grand Sorcerer Posts: 28,572 Karma: 204127028 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	This thread is like watching a slow-motion Trainwreck over and over again. Jon, you need to give it a rest. And everybody else needs to stop trying to change his mind.