![]() |
#1 |
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
![]()
Hi there!
I'm creating a picture book/epub with Sigil. There are a few images that are placed across two facing pages. How can I achieve that? Should I cut the image in the middle and add each to a different HTML file? And if so, what are the CSS-related best practices to keep them together/well-aligned? Thanks in advance! |
![]() |
![]() |
![]() |
#2 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
An ebook or epub app has no facing pages, except maybe artificially on a PC/Mac. Picture books work better for tablets and sometimes a fixed layout (PDF) or an app works better than a true reflowable ebook.
Many ebooks are read on eink, only 14 greys, nearly white and black. Many are read on phones, which while doing colour, have 4.3" to 6" screens. A phone 6" screen is smaller than a 6" eink because of aspect ratio (eink are about 4:3) |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
Thanks for the reply, but it seems you haven't opened many picture ebooks, otherwise you'd be aware of how they work. Cheers!
|
![]() |
![]() |
![]() |
#4 | |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Quote:
The most recent picture book I opened was Beatrix Potter Ultimate collection. https://www.amazon.co.uk/gp/product/B07LB2N4GJ I converted it to an ePub to view on Kobo and Android Lithium app as well as viewing on Kindle PW3 and Kindle Oasis (2nd aka gen 9) I was amazed how well they did it and it does work on a regular 6" Kindle in monochrome, but really needs the 10" colour tablet. Almost all ebooks are read on phones (via apps) or mono eink. Amazon has 92% of the world English language market, but we also publish on Apple, Kobo, Tolino, Google, Barnes & Noble etc with ePub. We also publish on Amazon and only by epub upload. There is no sensible way to have two pages in an ebook other than sequential one-at-a-time. An image MUST fit on one page, which reflows to fit the screen size. We use width 95% and height auto for landscape images, width auto and height 95% for portrait images and actual px for width and height if it's a small image. We test new styles on 5" to 10.3" eink, 4.3" phone to 10" tablet and Workstation Calibre Viewer (4K 24" screen). We make sure the ebook works on old mobi Kindle, current Kindles, decent Android Apps, 5" Sony PRS-350 epub and Kobo. Only some picture books suit real ebooks. Make sure it looks OK on a real 6" eink that is 167 dpi and 6" 300 dpi as well as a phone. The Sigil preview is irrelevant. Last edited by Quoth; 10-09-2022 at 04:22 PM. |
|
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,658
Karma: 85000001
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
The EPUB 3 specification includes support for fixed layout books with double page spreads. (Fixed-Layout Properties) I do not know how well this is supported by actual EPUB reading applications.
Amazon supports something similar to allow double page spreads in comics. (Creating Fixed-Layout Books with Image Pop-Ups or Virtual Panels) |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Quote:
You can't even buy most fixed layout Amazon Kindle "ebooks" unless you have an app (and rubbish on a phone) or Amazon Fire (Amazon's custom Android tablet). IMO real ebooks reflow so that they work on a phone or any size eink. |
|
![]() |
![]() |
![]() |
#7 |
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
Thank you for all your replies.
I'm fine if it doesn't work with all apps and devices. It's fine if it works only on tables and computers (whatever have the needed dimensions). However, I can make the images stick together in the horizontal center. Please, see the screenshot below. Here's what I'm trying: Code:
img { display:block; height:100%; max-height:100%; width:auto; max-width:100%; } .container { page-break-inside:avoid; text-align:center; vertical-align: middle; display: inline-block; width: 100%; height: 100%; } .container-right { page-break-inside:avoid; text-align:right; vertical-align: middle; display: inline-block; width: 100%; height: 100%; } .container-left { page-break-inside:avoid; text-align:left; vertical-align: middle; display: inline-block; width: 100%; height: 100%; } Code:
<div class="container-left"> <img align="left" alt="" src="Pictures/capitaotheo-25.jpg"/> </div> Last edited by issybird; 10-14-2022 at 07:48 AM. |
![]() |
![]() |
![]() |
#8 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
If you are centering or aligning left on one page you can put the two images together without a gap just put them both in same paragraph
Code:
<p class="suitable_class> <img class="images_48" alt="family on couch left half" src="Pictures/capitaotheo-25.jpg"/> <img class="images_48" alt="family on couch right half" src="Pictures/capitaotheo-26.jpg"/></p> Code:
.suitable_class { text-align: left } .images_48 { height: auto; width: 48% } |
![]() |
![]() |
![]() |
#9 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
No need for div or container
|
![]() |
![]() |
![]() |
#10 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Just put two source pages in one ebook page. Anything else and you are better off making a PDF than an ebook.
|
![]() |
![]() |
![]() |
#11 |
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
Hi there! Do you mean I should put both images in the same html file and they will spread across both pages? Currently, I’m adding each to a different html file.
|
![]() |
![]() |
![]() |
#12 |
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
Here’s an example of picture book as seen from my cellphone in which an image spreads across two pages
https://ibb.co/JcLgVLJ |
![]() |
![]() |
![]() |
#13 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
How do you know it's two pages and not the content of two pages on one ebook page?
Real ebooks reflow the content to fit the screen, which is a single virtual page. You can have the content from two pages from some other format in a single ebook page. Real ebooks, on eInk or normal reader apps on a Phone or tablet, only ever show one page at at time, that always fills the screen. Your "two images" would look just like that with the code I pasted on an ebook app like Lithium, or Kindle App, or Google Playbooks, and will "fill the screen" approximately better in Landscape than Portrait mode. You can't always fill the screen on all devices without distorting the images as devices come in different aspect ratios from 1:1 (Old Palm) to 4:3, 16:10, 16:9, 2:1 and maybe more. Two pages is really only on paper or on PC screen preview of paper. If you need to see two page spread, like you would on paper, then you combine the content of two pages to one. Though there are compatibly issues with two columns of text simulating two pages side by side on a single page. It can be that if most of the pages are single then a double page spread should have the two images combined and rotated in the source so the user has to rotate the device. The worst ebooks are ones that slavishly copy paper editions. Use a PDF if you want identical to paper. Last edited by Quoth; 10-11-2022 at 01:37 PM. |
![]() |
![]() |
![]() |
#14 | ||
Member
![]() Posts: 11
Karma: 10
Join Date: Oct 2022
Device: all
|
Thank you very much again for all your replies, it has been very educative.
Quote:
Quote:
Last edited by 42piratas; 10-11-2022 at 05:53 PM. |
||
![]() |
![]() |
![]() |
#15 | |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,235
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Quote:
You can't know how it's done by looking at display. You need to look at the HTML and CSS in the ebook. |
|
![]() |
![]() |
![]() |
Tags |
css, epub, html, sigil |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Two facing pages in the viewer …solved!! | pollito pito | Calibre | 18 | 08-26-2015 05:15 PM |
optional (double pages, facing pages) | kelly33 | Kindle Formats | 0 | 11-08-2012 01:02 AM |
Two columns display in the viewer? (facing pages) | pollito pito | Calibre | 6 | 04-17-2010 08:09 AM |
Converting PDF's with facing pages | BrentB | Calibre | 1 | 02-14-2010 05:39 PM |
Turning Scanned PDFs with facing pages into single pages | jimteacher | Workshop | 5 | 11-09-2009 02:59 PM |