Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-23-2025, 07:01 PM   #31
graycyn
Wizard
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 1,591
Karma: 11722446
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2
Quote:
Originally Posted by JSWolf View Post
You have to be careful. If ADE 2.0.1 or 3.x thinks your code is a mistake, the entire CSS will be ignored.

What would happen if you had first-letter and a span for a program that supports both? This is a good reason to forgo drop caps if you need ePub2 compatibility.
Since I'm back working on Under the Lilacs (on to scanning images and processing, almost done with the illustrated titlepage), and since the 1910 hardcover has, you guessed it, drop caps, I was delighted to see that initial-letter is getting some support.

So, for the moment at least, I've added it:

Code:
p.chapter-lead::first-letter {
  initial-letter: 2;
  -webkit-initial-letter: 2;
}
Here's a few images so you can see what it looks like in Sigil (which is similar to what happens in supported apps) and what it looks like in Adobe Digital Editions, v2.0.1. Same file, same code, same computer.

Now, you do have to play about with it. For instance, if you add any padding, you have to consider that if a device honors first-letter but NOT initial-letter, you could get an odd look if you go crazy with too much. A tiny dab might be OK. I've been playing with adding a trace for the letter "I", because it tends to look a bit cramped otherwise.

It's possible it might not play well with every font too, I tried it with Open Dyslexic and placement of the drop cap was odd. So a risk, given one never knows what fonts people will decide to read with. I've seen folks post some doozies!

And, with a phone in landscape orientation, you run the risk that if only the first line of the chapter fits on the screen, your drop cap will show, but its bottom half on the second line will be truncated....

I tossed the epub into the Kobo iOS app and also BookFusion iOS, and not only is initial-letter honored, but also hanging-punctuation! YAY! I tossed in a picture of the hanging-punctuation property working in the Kobo app on my iPad!

Fun times if you make backward compatible epub3! You can't eat cake ALL the time, but sometimes is nice!
Attached Thumbnails
Click image for larger version

Name:	Sigil_showing_initial-letter_m.png
Views:	29
Size:	86.6 KB
ID:	216434   Click image for larger version

Name:	ADE_showing_inital-letter_m.png
Views:	25
Size:	135.2 KB
ID:	216435   Click image for larger version

Name:	Kobo_iOS_showing_hanging-punctuation_IMG_1374.png
Views:	27
Size:	83.3 KB
ID:	216436  
graycyn is offline   Reply With Quote
Old 06-23-2025, 08:08 PM   #32
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,355
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by JSWolf View Post
That's a very good suggestion.
Yeah, that would be nice....but.... all you need to do is put the non-supporting css first, then the @supports rule. If it supports then it takes priority since it is later in the css.

Here is the example from W3Schools:
Code:
/* use this CSS if the browser does not support display: grid */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* use this CSS if the browser supports display: grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}
Turtle91 is offline   Reply With Quote
Old 06-24-2025, 04:29 PM   #33
Falkor
Connoisseur
Falkor began at the beginning.
 
Posts: 89
Karma: 10
Join Date: Dec 2024
Device: Tolino Shine 5
Quote:
Originally Posted by JSWolf View Post
The problem is that when you vh or % (ie, margin, height, etc) whichever is second in the CSS is what's used. So if the reading software doesn't do vh, and that's second, it won't do anything. Neither will do anything.
That's not how CSS works. It's a nasty bug in RMSDK. CSS error handling is designed to allow for fallback.

Quote:
Originally Posted by W3C
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support.
Quote:
Originally Posted by graycyn View Post

Now, you do have to play about with it. For instance, if you add any padding, you have to consider that if a device honors first-letter but NOT initial-letter, you could get an odd look if you go crazy with too much. A tiny dab might be OK. I've been playing with adding a trace for the letter "I", because it tends to look a bit cramped otherwise.
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;
}
}
Quote:
Originally Posted by JSWolf View Post
You have to be careful. If ADE 2.0.1 or 3.x thinks your code is a mistake, the entire CSS will be ignored.
Another ridiculous bug in their error handling. I haven't ever managed to make it ignore the entire CSS, though. @supports has never been a problem for me.

Quote:
Originally Posted by JSWolf View Post
What would happen if you had first-letter and a span for a program that supports both? This is a good reason to forgo drop caps if you need ePub2 compatibility.
You have to undo the span’s styling for readers that support initial-letter. This works fine for me:

Code:
span.dropcap-epub2 {
  font-size:580%;
  float:left;
  margin: -0.1em 0.1em -0.1em 0;
  vertical-align: top;
  line-height: 1 !important;
}

@supports (initial-letter:2) or (-webkit-initial-letter:2) {
  span.dropcap-epub2 {
    font-size:revert;
    float:revert;
    margin: revert;
    vertical-align: revert;
    line-height: revert;
    }
  
  h2 + p::first-letter{
    initial-letter: 2;
    -webkit-initial-letter: 2;
    margin-right: 0.3em;
    }  
}
Falkor is offline   Reply With Quote
Old 06-24-2025, 04:45 PM   #34
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,796
Karma: 146391129
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Falkor View Post
That's not how CSS works. It's a nasty bug in RMSDK. CSS error handling is designed to allow for fallback.
But because older versions of RMSDK are still very much used by a lot of people, you have to deal with the bug and code for it not to be triggered.

Quote:
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;
}
}
I did test @supports with an older RMSDK and yes it either works or is ignored. So that's not going to be a problem.

Quote:
Another ridiculous bug in their error handling. I haven't ever managed to make it ignore the entire CSS, though. @supports has never been a problem for me.
StandardEbooks has managed to cause the entire CSS to be ignored because they used extremity crappy code. They use code that you don't need at all. The idea is to keep it as simple as possible and they make it as complicated as possible.



You have to undo the span’s styling for readers that support initial-letter. This works fine for me:

Code:
span.dropcap-epub2 {
  font-size:580%;
  float:left;
  margin: -0.1em 0.1em -0.1em 0;
  vertical-align: top;
  line-height: 1 !important;
}

@supports (initial-letter:2) or (-webkit-initial-letter:2) {
  span.dropcap-epub2 {
    font-size:revert;
    float:revert;
    margin: revert;
    vertical-align: revert;
    line-height: revert;
    }
  
  h2 + p::first-letter{
    initial-letter: 2;
    -webkit-initial-letter: 2;
    margin-right: 0.3em;
    }  
}
Looks OK. However, a better solution (IMHO) would be to forget drop caps for ePub2.
JSWolf is offline   Reply With Quote
Old 06-24-2025, 05:59 PM   #35
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 46,355
Karma: 169098492
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Quote:
Originally Posted by JSWolf View Post
But because older versions of RMSDK are still very much used by a lot of people, you have to deal with the bug and code for it not to be triggered.
I was under the impression that ADE2 disregarding the entire style sheet after an error was triggered by a structural error in the stylesheet not by an correctly structured unknown item. A missing { or } for instance.
DNSB is offline   Reply With Quote
Old 06-24-2025, 06:30 PM   #36
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,796
Karma: 146391129
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by DNSB View Post
I was under the impression that ADE2 disregarding the entire style sheet after an error was triggered by a structural error in the stylesheet not by an correctly structured unknown item. A missing { or } for instance.
RMSDK (ADE3 version) used by Kobo will ignore the entire stylesheet with what is thought to be an error.

Here is code that ADE 2.0.1 thinks is an error from a StandardEbooks CSS. It's code that will not work in most cases anyway. So there's no need for it.

Code:
@media all and (prefers-color-scheme: dark) {
  img.epub-type-se-image-color-depth-black-on-transparent {
    filter: invert(100%);
  }
  img.epub-type-se-image-color-depth-black-on-transparent.epub-type-se-image-style-realistic {
    background: currentColor;
    filter: none;
  }
}
@media all and (prefers-color-scheme) {
  img.epub-type-se-image-color-depth-black-on-transparent:not(.epub-type-se-image-style-realistic) {
    background: transparent !important;
  }
}
JSWolf is offline   Reply With Quote
Old 06-24-2025, 07:11 PM   #37
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,797
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
RMSDK (ADE3 version) used by Kobo will ignore the entire stylesheet with what is thought to be an error.
The way to deal with potential ADE bugs was explained here:

https://www.mobileread.com/forums/sh...8&postcount=12
RbnJrg is offline   Reply With Quote
Old 06-24-2025, 07:28 PM   #38
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,797
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Falkor View Post
This kinda works for me:
Code:
<figure>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 960 1207" preserveAspectRatio="xMidYMid meet"><image width="960" height="1207" xlink:href="../picture.jpg"/></svg>
  <figcaption>This is a caption</figcaption>
</figure>
Code:
figure {
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  display:block;
}

figure > svg {
  height:80vh;
  width:100%;
}

figcaption {
  height:18vh;
  }
The trick was to not give the figure a height. That eliminated all kinds of issues.
Really? Did you try to open your epub for example under Foliate (to name one of the problematic ereaders) by employing that trick? At least you need to give a "height: 100%" for the <figure> tag. That height means nothing (because the parent box doesn't have a height) BUT will allow that the height defined by the svg wrapper takes the full space and works in those buggy ereaders. On the other hand, is perfectly possible to assign a valid height (not one that has no effect, as I stated in the previous paragraph) to the figure tag; read the following post about images and captions:

https://www.mobileread.com/forums/sh...4&postcount=29

Last edited by RbnJrg; 06-24-2025 at 07:35 PM.
RbnJrg is offline   Reply With Quote
Old 06-25-2025, 02:09 PM   #39
Falkor
Connoisseur
Falkor began at the beginning.
 
Posts: 89
Karma: 10
Join Date: Dec 2024
Device: Tolino Shine 5
Quote:
Originally Posted by RbnJrg View Post
Really? Did you try to open your epub for example under Foliate (to name one of the problematic ereaders) by employing that trick? At least you need to give a "height: 100%" for the <figure> tag. That height means nothing (because the parent box doesn't have a height) BUT will allow that the height defined by the svg wrapper takes the full space and works in those buggy ereaders. On the other hand, is perfectly possible to assign a valid height (not one that has no effect, as I stated in the previous paragraph) to the figure tag; read the following post about images and captions:

https://www.mobileread.com/forums/sh...4&postcount=29
Sorry, I don't have a Linux system to run Foliate on.
With a 100% height setting, things can become messy in calibre viewer. (see attachment). Not setting it eliminates all issues with the caption overlapping the text.

The solution you linked places the caption on the picture in Thorium and Calibre viewer and may split the image in ADE and in Books. Removing the div and setting the height for the SVG works better for me, but splits can still happen.
Attached Thumbnails
Click image for larger version

Name:	calibre.png
Views:	13
Size:	110.6 KB
ID:	216474  
Falkor is offline   Reply With Quote
Old 06-25-2025, 02:40 PM   #40
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,796
Karma: 146391129
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by RbnJrg View Post
The way to deal with potential ADE bugs was explained here:

https://www.mobileread.com/forums/sh...8&postcount=12
You would need a 3rd style sheet for software that does ePub3 but not webkit. However, it would be best for forget webkit exists as then you don't need to code for it when it won't work everywhere ePub3 works. Webkit is not part of the ePub3 standard so code without it if you want to be compliant.

In your CSS for figure, if you do need webkit code, then the program being used is not ePub3 compliant enough.
JSWolf is offline   Reply With Quote
Old 06-25-2025, 02:51 PM   #41
Falkor
Connoisseur
Falkor began at the beginning.
 
Posts: 89
Karma: 10
Join Date: Dec 2024
Device: Tolino Shine 5
Quote:
Originally Posted by JSWolf View Post
But because older versions of RMSDK are still very much used by a lot of people, you have to deal with the bug and code for it not to be triggered.
Ensuring backwards compatibility for a renderer with broken forward compatibility sure is a pain. Might be one of the reasons why it's taking so long for epub3 to catch on.
Falkor is offline   Reply With Quote
Old 06-25-2025, 03:55 PM   #42
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,797
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Falkor View Post
Sorry, I don't have a Linux system to run Foliate on.
With a 100% height setting, things can become messy in calibre viewer. (see attachment).
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.

Quote:
The solution you linked places the caption on the picture in Thorium and Calibre viewer and may split the image in ADE and in Books.
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%):

Click image for larger version

Name:	One1.jpg
Views:	24
Size:	158.9 KB
ID:	216475 Click image for larger version

Name:	One2.jpg
Views:	28
Size:	76.4 KB
ID:	216476

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

Click image for larger version

Name:	One3.jpg
Views:	26
Size:	134.5 KB
ID:	216477 Click image for larger version

Name:	One4.jpg
Views:	31
Size:	179.0 KB
ID:	216478

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

Click image for larger version

Name:	One5.jpg
Views:	28
Size:	68.4 KB
ID:	216479 Click image for larger version

Name:	One6.jpg
Views:	26
Size:	31.6 KB
ID:	216480 Click image for larger version

Name:	One7.jpg
Views:	25
Size:	69.9 KB
ID:	216481

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

Click image for larger version

Name:	One8.jpg
Views:	21
Size:	60.6 KB
ID:	216482 Click image for larger version

Name:	One9.jpg
Views:	26
Size:	59.7 KB
ID:	216483 Click image for larger version

Name:	One10.jpg
Views:	20
Size:	31.7 KB
ID:	216484 Click image for larger version

Name:	One11.jpg
Views:	24
Size:	59.7 KB
ID:	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.

Quote:
Removing the div and setting the height for the SVG works better for me, but splits can still happen.
As I stated before, you have something wrong. Post your code here and I will be able to help you better.
Attached Files
File Type: epub Image_and_Caption.epub (297.3 KB, 26 views)
RbnJrg is offline   Reply With Quote
Old 06-25-2025, 04:04 PM   #43
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,797
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
You would need a 3rd style sheet for software that does ePub3 but not webkit. However, it would be best for forget webkit exists as then you don't need to code for it when it won't work everywhere ePub3 works. Webkit is not part of the ePub3 standard so code without it if you want to be compliant.

In your CSS for figure, if you do need webkit code, then the program being used is not ePub3 compliant enough.
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).
RbnJrg is offline   Reply With Quote
Old 06-25-2025, 04:24 PM   #44
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,797
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Falkor View Post
Ensuring backwards compatibility for a renderer with broken forward compatibility sure is a pain.
Not if you follow the correct method. You have to write a little more css code, but it's nothing special. It may be a little more difficult the first time, but in subsequent ebooks you use what you've already written; it's much more cut and paste.

Quote:
Might be one of the reasons why it's taking so long for epub3 to catch on.
It's slow because no e-reader device has properly implemented epub3 (though the Tolino Shine is close to offering adequate support). Android, however, boasts many e-readers with great epub3 support: Cantook, Reasily, Lithium, PocketBook, Kobo, and Infinity Reader (also is still good Gitden but you can't find it anymore in Play Store).
RbnJrg is offline   Reply With Quote
Old 06-25-2025, 04:34 PM   #45
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,796
Karma: 146391129
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by RbnJrg View Post
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.
Please stop saying height: 100% only works on RMSDK when I've already proved it works on software that's not RMSDK based.

Webkit code has to go as it's nothing to do with ePub3 or ePub2 code.

Quote:
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:
For backwards comparability, you don't use figure. You use div instead. It works the same.
JSWolf is offline   Reply With Quote
Reply


Forum Jump

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


All times are GMT -4. The time now is 05:06 AM.


MobileRead.com is a privately owned, operated and funded community.