I've been working on scanning and converting some of my favorite paper books that aren't available as ebooks, and some formatting one would think should be simple is really quite challenging.
Anyway challenge of the day is chapter headings with large images. The book has a squarish image at the beginning of every chapter - the image pretty much goes to the page borders and takes up about ~60% of the page. Below that are a Chapter header and 1-2 paragraphs.
I'm trying to future-proof my epubs and use decent sized images that can scale across multiple devices. The obvious answer seemed to be SVG. The problem I'm having is inserting an SVG image which will always be nailed to the top of the page border, and try to include the Chapter header and at least 2 lines of text no matter the aspect ratio of the page. It seems i can have only one or the other - an SVG which is scalable and remains nailed to the top of the page, but pushes text away in landscape-ish views, or an SVG that slides away from the top of the page when the width is narrowed.
Ideal Requirements:
- Width of the image should be 100% of the page width in portrait mode, ~60% of the height
- As the aspect ratio changes that should change to allow for the header and a few lines of text.
- In portrait views the image should always be at the top of the page with equal margins on the three sides - that's another issue is that ADE doesn't seem to center it perfectly....
I've attached an epub book that displays three different examples, all manipulating the height of the SVG view box. There is a div with a red border around it so you can see how resizing/viewbox parameters stretches the div (seems like ADE prefers SVG wrapped in Divs as well).
Ideally I'd like something close to example 1, but without the image floating down the page and increasing whitespace as the width narrows.
Here's the SVG/html code I'm using in case you don't need to download the example epub: