epub3x cover - Page 2

JSWolf · 12-28-2023, 10:09 AM

Quote:

Originally Posted by RbnJrg

That is not true; sorry to be harsh, but your code doesn't work. This is how it looks under:

Bibi Reader:
Attachment 205200
The cover is not showed at all.

EpubJS Reader:
Attachment 205199
The right side of the cover is not showed.

Readium Reader:
Attachment 205201
The cover is not centered, is aligned to the top.

And your code use as anchor the "height" property (height: 100%); so, what happens when the "width" of an image is bigger than its "height"? Because the properties "max-width" and "max-height" are not supported by ADE Legacy (ADE 2.x), it happens the following:

Attachment 205202 Attachment 205203

The cover can't maintain its proportion. Conclusion: your code doesn't work. I'm wondering if you seriously tested it under ADE 2.x.

By the way, an ereader that does not support an svg wrapper is anything but an ereader.

It works perfectly well with Throrium which is based on Redium code. I cannot find ePubJS or Bibi to download. My code does work perfectly well with ADE 2.0.1. It works with KePub (Access), Kindle (KF8 & KFX), and Calibre's viewer. But not with Calibre's editor file preview. It's due to chromium code in QT. So for any of those programs that are Chrome plugins, it's no wonder they don't work.

Can you please provide links to the download for the other two programs?

RbnJrg · 12-28-2023, 01:11 PM

Quote:

Originally Posted by JSWolf

Can you please provide links to the download for the other two programs?

BibiReader and EpubJS Reader are Sigil's plugin. However, if you want to open them in your browser, you can download them from:

BibiReader:
https://github.com/satorumurmur/bibi

EpubJS Reader:
https://github.com/futurepress/epubjs-reader

Quote:

It works perfectly well with Throrium which is based on Redium code. I cannot find ePubJS or Bibi to download. My code does work perfectly well with ADE 2.0.1. It works with KePub (Access), Kindle (KF8 & KFX), and Calibre's viewer. But not with Calibre's editor file preview.

It's due to chromium code in QT. So for any of those programs that are Chrome plugins, it's no wonder they don't work.

Ok. But then, why not to use a code that also will work with the chromiun code? Why not to use a code that works everywhere?

azimuth · 12-28-2023, 04:50 PM

Yep JSW you're right again. I had to add a temporary colored border around each element just to see the problems. Reading about centering suggestions at an excellent codepen post has provided some interesting pointers.
Shaw's Codepen

RbnJrg · 12-28-2023, 06:02 PM

Quote:

Originally Posted by azimuth

Yep JSW you're right again. I had to add a temporary colored border around each element just to see the problems. Reading about centering suggestions at an excellent codepen post has provided some interesting pointers.
Shaw's Codepen

Please, since you have been testing code for a cover, could you tell me where the following code (for a cover) does not work:

1) In your css stylesheet:

Code:

    .cover {
          margin: 0;
          height: 99vh;
          max-width: 100%;
          overflow: hidden !important;
    }

    .picWrapper {
          margin: 0;
          padding: 0;
          height: 100%;
    }
    
    .pic {
          display: block;
          margin: auto;
          width: 100%;
          position: absolute;
          top: 0; bottom: 0; left: 0; right: 0;
    }

2) In your .xhtml file:

Code:

<body class="cover">
  <div class="picWrapper">
    <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 10 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="800" width="600" xlink:href="../Images/Your_Cover.jpg"/></svg>
  </div>
</body>

Of course, the values of the viewport (600 for width and 800 for height) inside the svg wrapper can be different AND must be changed according to the size of the cover image in px.

Regarding the code in CodePen many things are not applicable to epub and others are old. For example, under ePub3 with only three lines of code you can absolute center whatever; you don't need so much code.

azimuth · 12-28-2023, 07:06 PM

Your cover method is an ideal solution due to its ultra short code + SVG. Your example (or JSW's example) are both fine. Epub designers certainly should use either to suit their needs.

RbnJrg · 12-29-2023, 05:17 AM

Quote:

Originally Posted by azimuth

Your cover method is an ideal solution due to its ultra short code + SVG. Your example (or JSW's example) are both fine. Epub designers certainly should use either to suit their needs.

Many thanks for your clarification.

JSWolf · 12-29-2023, 08:33 AM

Quote:

Originally Posted by RbnJrg

BibiReader and EpubJS Reader are Sigil's plugin. However, if you want to open them in your browser, you can download them from:

BibiReader:
https://github.com/satorumurmur/bibi

EpubJS Reader:
https://github.com/futurepress/epubjs-reader

Ok. But then, why not to use a code that also will work with the chromiun code? Why not to use a code that works everywhere?

There is no code that works everywhere. chromium is broken because it should work with %.

vh and vw do not work in too many places s recommending them is not a good idea. You want cover code that works in both ePub 2 and ePub 3.

Does FBReader work with SVG?

JSWolf · 12-29-2023, 08:35 AM

Quote:

Originally Posted by azimuth

Your cover method is an ideal solution due to its ultra short code + SVG. Your example (or JSW's example) are both fine. Epub designers certainly should use either to suit their needs.

Do not use vh or it will fail with ePub 2 only software.

Turtle91 · 12-29-2023, 08:58 AM

Same argument in two different locations….

vh/vw work just fine, if the device/app doesn’t support it then it will fallback to the alternative code.

RbnJrg · 12-29-2023, 12:49 PM

Quote:

Originally Posted by JSWolf

There is no code that works everywhere. chromium is broken because it should work with %.

vh and vw do not work in too many places s recommending them is not a good idea. You want cover code that works in both ePub 2 and ePub 3.

Does FBReader work with SVG?

The cover code I posted above (that makes use of a svg wrapper), so far worked everywhere (epub2 and epub3), and even in FBReader. But if you find an app/program where the code does not work (that can be perfectly possible) I will thank a lot if you tell me about the issue.

JSWolf · 12-29-2023, 02:22 PM

Quote:

Originally Posted by Turtle91

Same argument in two different locations….

vh/vw work just fine, if the device/app doesn’t support it then it will fallback to the alternative code.

What alternative code? CSS works top down. So if you put in vw and then %, % will take over and visa-versa.

JSWolf · 12-29-2023, 02:24 PM

Quote:

Originally Posted by RbnJrg

The cover code I posted above (that makes use of a svg wrapper), so far worked everywhere (epub2 and epub3), and even in FBReader. But if you find an app/program where the code does not work (that can be perfectly possible) I will thank a lot if you tell me about the issue.

It does work in ADE 2.0.1.

Turtle91 · 12-29-2023, 02:52 PM

Quote:

Originally Posted by JSWolf

What alternative code? CSS works top down. So if you put in vw and then %, % will take over and visa-versa.

Reread the thread, plus the other thread you are posting these same answers in. It’s all there.

RbnJrg · 12-29-2023, 03:02 PM

Quote:

Originally Posted by JSWolf

It does work in ADE 2.0.1.

So far, the code I posted is working in:

Kobo
ADE 2.x (Windows)
ADE 4.x (Windows)
Thorium (Windows and Linux)
Koodo Reader (Windows and Linux)
IceCream Ebook Reader (Windows)
NeatReader (Windows)
Foliate (Linux)
Readium (as Sigil plugin)
Bibi Reader (as Sigil plugin)
EpubJS Reader (as Sigil plugin)
Calibre Viewer (Windows and Linux)
EPUBReader (extension for Chrome and Firefox)
ePUB Reader (another extension for Chrome and Firefox)
PocketBook (Android)
Gitden Reader (Android)
Reasily (Android)
Aldiko Next (Android)
Lithium (Android)
OverDrive (Android)
Infinity Reader (Android)
Bluefire Reader (Android and IOs)
BookFusion (Android).
Colibrio Reader (Android)
FBReader (Android)
Supreader (Android)
Readera (Android)
Google Play Books (Android)
Moon+ Reader (Android)

So, if you say that the code that I posted above could fail, well, I cannot deny that because it may fail. But I ask where? Because in all the programs and applications in which I have tested it so far, it works.

azimuth · 12-29-2023, 06:22 PM

Question about your SVG cover code. There's a curious factor occurring when I temporarily add a color border around several elements in your cover code, just to see how its layered. For this example I temporarily shortened the first height:90vh so as to better see how its layered. Tested using a square SVG, and your wrapper code as is. Blue outer container, the red inner container (neither color spacing will be used by me in the final cover - these are just temp visuals) which I do by merely adding a 10px border to each of the two wrappers.
Here's the xhtml svg code:

Code:

<body class="cover">
<div class="picWrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 500" xml:space="preserve">
<rect fill="#BADD8C" height="100%" width="100%"/>
</svg>
</div>
</body>

For the CSS we used your code as is, plus the following.

Code:

.cover {border: 10px solid blue;}
.picWrapper {border: 10px solid red;}

Why does the lower red wrapper run slightly below page bottom?
Why does the lower red wrapper run over the lower outer blue border?
Should one container fit inside the other container (or be bound by the other container in some way)?

Or is none of this (i.e. container inside of container) really going to effect the epub cover (because the principal theory works based on your extensive test list in an above post!), + using the shortest most concise code is simply the ideal solution for epub3 (+ its fallback for epub2)?
Thank you!

12-29-2023, 06:22 PM	#30
azimuth Enthusiast Posts: 33 Karma: 2538 Join Date: Aug 2023 Location: NW US Device: none	Question about your SVG cover code. There's a curious factor occurring when I temporarily add a color border around several elements in your cover code, just to see how its layered. For this example I temporarily shortened the first height:90vh so as to better see how its layered. Tested using a square SVG, and your wrapper code as is. Blue outer container, the red inner container (neither color spacing will be used by me in the final cover - these are just temp visuals) which I do by merely adding a 10px border to each of the two wrappers. Here's the xhtml svg code: Code: <body class="cover"> <div class="picWrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 500" xml:space="preserve"> <rect fill="#BADD8C" height="100%" width="100%"/> </svg> </div> </body> For the CSS we used your code as is, plus the following. Code: .cover {border: 10px solid blue;} .picWrapper {border: 10px solid red;} Why does the lower red wrapper run slightly below page bottom? Why does the lower red wrapper run over the lower outer blue border? Should one container fit inside the other container (or be bound by the other container in some way)? Or is none of this (i.e. container inside of container) really going to effect the epub cover (because the principal theory works based on your extensive test list in an above post!), + using the shortest most concise code is simply the ideal solution for epub3 (+ its fallback for epub2)? Thank you!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Command line: How to embed color default cover instead of missing cover?	EbokJunkie	Conversion	9	07-22-2015 12:30 AM
Sell Nook Glowlight + cover, PRS600, Kindle 3 m-edge cover, K2 cover	Waba	Flea Market	3	10-12-2014 10:36 AM
Sell HP TouchPad 32gb NIB + ipad cover + non-reflective LCD cover	Waba	Flea Market	3	09-26-2011 12:45 PM
Ended Sony PRS-505 SC w/ Cover and Separate Wedge Light Cover in Canada	notsure	Flea Market	2	11-13-2010 03:28 PM
PRS-300 Pictures: Pink 300 + Sony red cover + custom cover	h0bbes	Sony Reader	5	01-04-2010 12:41 PM

12-28-2023, 04:50 PM	#18
azimuth Enthusiast Posts: 33 Karma: 2538 Join Date: Aug 2023 Location: NW US Device: none	Yep JSW you're right again. I had to add a temporary colored border around each element just to see the problems. Reading about centering suggestions at an excellent codepen post has provided some interesting pointers. Shaw's Codepen

12-28-2023, 07:06 PM	#20
azimuth Enthusiast Posts: 33 Karma: 2538 Join Date: Aug 2023 Location: NW US Device: none	Your cover method is an ideal solution due to its ultra short code + SVG. Your example (or JSW's example) are both fine. Epub designers certainly should use either to suit their needs.

12-29-2023, 08:58 AM	#24
Turtle91 A Hairy Wizard Posts: 3,101 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	Same argument in two different locations…. vh/vw work just fine, if the device/app doesn’t support it then it will fallback to the alternative code.

Advert

Advert