Two-pages image (facing pages) / How to?

[42piratas]

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!

[Quoth]

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)

[42piratas]

Thanks for the reply, but it seems you haven't opened many picture ebooks, otherwise you'd be aware of how they work. Cheers!

[Quoth]

Originally Posted by 42piratas

Thanks for the reply, but it seems you haven't opened many picture ebooks, otherwise you'd be aware of how they work. Cheers!

I've been creating stuff like this since 1992 and Web eMagazines from 1994. I know exactly how ebooks work. Unless you are using Mac/PC and special viewer there is only one page ever.

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.

[jhowell]

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)

[Quoth]

Originally Posted by jhowell

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)

About zero support on eink and few Android apps, which need reasonable size tablet.

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.

[42piratas]

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:

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

HTML:

	<div class="container-left">
		<img align="left" alt="" src="Pictures/capitaotheo-25.jpg"/>
	</div>

[Quoth]

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

<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>

Then suitable CSS (bits missing). Left aligned is a bit simpler than centred. But the <p> is the virtual container. You'd want margins.

.suitable_class {
   text-align: left
   }

.images_48 {
  height: auto;
  width: 48%
   }

Will work ANY size screen in portrait or landscape.

[Quoth]

No need for div or container

[Quoth]

Just put two source pages in one ebook page. Anything else and you are better off making a PDF than an ebook.

[42piratas]

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.

[42piratas]

Here’s an example of picture book as seen from my cellphone in which an image spreads across two pages

https://ibb.co/JcLgVLJ

[Quoth]

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.

[42piratas]

Thank you very much again for all your replies, it has been very educative.

How do you know it's two pages and not the content of two pages on one ebook page?

When I turn my phone to portrait, the book shows only half of that image above (from the "Super Dad" book). This means they are two pages, correct? Or could

Real ebooks, on eInk or normal reader apps on a Phone or tablet, only ever show one page at a time, which always fills the screen.

There are several scenarios with tablets and phone apps where I can see two pages at a time, either from picture books or any other books - as long as the display is in the landscape/horizontal position.

[Quoth]

Originally Posted by 42piratas

Thank you very much again for all your replies, it has been very educative.

When I turn my phone to portrait, the book shows only half of that image above (from the "Super Dad" book). This means they are two pages, correct?

No. You'll get that if the width of image or "container" is about twice the portrait width.

You can't know how it's done by looking at display. You need to look at the HTML and CSS in the ebook.