Maps spread over two pages

GeoffR · 03-30-2019, 08:07 PM

I wanted to display some maps with a square or wider aspect across two pages, while preserving the aspect ratio and filling as much of the screen as possible.

This is the solution I came up with using SVG, I'm posting it here in case someone else might find it useful or can help me simplify or improve it.

A feature of this method is that instead of just dividing the map into left and right halves and displayiing one half on each page, it displays as much of each side of the map as possible, so depending on the page aspect and map aspect there can be a bit of overlap between pages. I.e. things near the middle of the map can appear on both pages.

(One potential problem is that if the page has a wide enough aspect (e.g. single-column landscape mode) then the map might fit entirely on one page and so will be displayed twice. I have a method to deal with this using CSS media queries or Adobe XPGT conditionals if anyone is interested, but it is messy.)

Code:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

<head>
  <title>Map</title>
  <style type="text/css">
    @page { margin:10pt; }
  </style>
</head>

<body style="margin:0;">

  <!-- map.png has width 600, height 400; 300 is half the width. -->

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="0 0 300 400" width="100%" height="100%"
	     preserveAspectRatio="xMinYMid meet">
      <svg:svg viewBox="0 0 600 400" width="200%" height="100%"
	       preserveAspectRatio="xMinYMid meet">
	<svg:image height="400" width="600" xlink:href="map.png"/>
      </svg:svg>
    </svg:svg>
  </div>

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="300 0 300 400" width="100%" height="100%"
	     preserveAspectRatio="xMaxYMid meet">
      <svg:svg viewBox="0 0 600 400" width="200%" height="100%"
	       preserveAspectRatio="xMaxYMid meet">
	<svg:image height="400" width="600" xlink:href="map.png"/>
      </svg:svg>
    </svg:svg>
  </div>

</body>
</html>

I've attached a simple ePub example, if you view it in the Calibre viewer you can adjust the window size to see how it reacts to different page aspects.

Hitch · 04-01-2019, 09:17 AM

Quote:

Originally Posted by GeoffR

I wanted to display some maps with a square or wider aspect across two pages, while preserving the aspect ratio and filling as much of the screen as possible.

This is the solution I came up with using SVG, I'm posting it here in case someone else might find it useful or can help me simplify or improve it.

A feature of this method is that instead of just dividing the map into left and right halves and displayiing one half on each page, it displays as much of each side of the map as possible, so depending on the page aspect and map aspect there can be a bit of overlap between pages. I.e. things near the middle of the map can appear on both pages.

(One potential problem is that if the page has a wide enough aspect (e.g. single-column landscape mode) then the map might fit entirely on one page and so will be displayed twice. I have a method to deal with this using CSS media queries or Adobe XPGT conditionals if anyone is interested, but it is messy.)

Code:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

<head>
  <title>Map</title>
  <style type="text/css">
    @page { margin:10pt; }
  </style>
</head>

<body style="margin:0;">

  <!-- map.png has width 600, height 400; 300 is half the width. -->

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="0 0 300 400" width="100%" height="100%"
	     preserveAspectRatio="xMinYMid meet">
      <svg:svg viewBox="0 0 600 400" width="200%" height="100%"
	       preserveAspectRatio="xMinYMid meet">
	<svg:image height="400" width="600" xlink:href="map.png"/>
      </svg:svg>
    </svg:svg>
  </div>

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="300 0 300 400" width="100%" height="100%"
	     preserveAspectRatio="xMaxYMid meet">
      <svg:svg viewBox="0 0 600 400" width="200%" height="100%"
	       preserveAspectRatio="xMaxYMid meet">
	<svg:image height="400" width="600" xlink:href="map.png"/>
      </svg:svg>
    </svg:svg>
  </div>

</body>
</html>

I've attached a simple ePub example, if you view it in the Calibre viewer you can adjust the window size to see how it reacts to different page aspects.

Geoff:

Have you tried this on anything other than Calibre?

Hitch

GeoffR · 04-01-2019, 05:11 PM

Quote:

Originally Posted by Hitch

Have you tried this on anything other than Calibre?

I've also tried it on both of the Kobo (ACCESS- and Adobe RMSDK10- based) readers and it works the same as in Calibre.

GeoffR · 04-01-2019, 06:47 PM

This is a more complicated version that includes a fallback to display the map on a single page if the page aspect is landscape (or if the page aspect can't be determined.)

It seems to work okay on both Kobo readers (ACCESS-based using CSS @media queries; and Adobe RMSDK10-based using XPGT conditionals), but doesn't work in the Calibre viewer, where there is something odd going on with the results of the @media queries. It might be that I am still using Calibre 2.85 and it has been fixed in the latest version though.

default.css:

Spoiler:

media.css:

Spoiler:

media.xpgt:

Spoiler:

map.html:

Spoiler:

patrik · 04-02-2019, 12:50 PM

I tested on my Pocketbook Inkpad 3. Didn't work that well. Same result with both epubs.

DaleDe · 04-02-2019, 01:22 PM

here is what the original post looks like using Adobe reader on a PC. It says one page but moving it over shows a second page. It seems clear that it is zoomed out too far. But there is no way to make it zoom in. This is similar to what patrik got but his is zoomed in even more.

Dale

edit:By the way, using Adobe Reader the map2.epub post looks exactly like the map.epub post. Adobe 4.5.8 version.

Hitch · 04-02-2019, 03:31 PM

Quote:

Originally Posted by DaleDe

here is what the original post looks like using Adobe reader on a PC. It says one page but moving it over shows a second page. It seems clear that it is zoomed out too far. But there is no way to make it zoom in. This is similar to what patrik got but his is zoomed in even more.

Dale

edit:By the way, using Adobe Reader the map2.epub post looks exactly like the map.epub post. Adobe 4.5.8 version.

That's why I asked. I had the same result when I checked it.

Hitch

GeoffR · 04-02-2019, 07:10 PM

So it sounds like my SVG code only works on Kobo and Calibre, and the orientation code only works on Kobo.

Anyone have any suggestions how to achieve the effect on other devices?

Edit: Here is one thing I tried using this simpler SVG, but it has the unacceptable flaw that some of the map is lost if the image aspect is too wide to fit on two pages. I can think of a way to fix it up on Adobe RMSDK readers using the page-aspect() conditional, but there doesn't seem to be an equivalent @media query to get the page aspect?.

(This works the same on Kobo's ACCESS and RMSDK10 readers and the Calibre viewer. Not tested on others.)

Code:

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="0 0 600 400" width="100%" height="100%"
	     preserveAspectRatio="xMinYMid slice">
	<svg:image height="400" width="600" xlink:href="map.png"/>
    </svg:svg>
  </div>

  <div style="margin:0;max-height:100%;max-width:100%;overflow:hidden;">
    <svg:svg viewBox="0 0 600 400" width="100%" height="100%"
	     preserveAspectRatio="xMaxYMid slice">
      <svg:image height="400" width="600" xlink:href="map.png"/>
    </svg:svg>
  </div>

carmenchu · 04-20-2019, 04:49 PM

Hello!
What you are doing seems akin to what I did with a map I added to a personal epub--checked only on calibre & sigil viewers + browsers.
The main svg map includes a couple of links to show either partial map--the single image seems to scale correctly: depending on the window's dimensions, one can get more than 50%, but never less. Unfortunately, the code for svg scaling, which I included for luck, seems to still unsupported.
I am curious to know how does it behave on other viewers, just in case I should ever wish to get one...

DaleDe · 04-20-2019, 06:28 PM

It is a pretty low resolution pictures but it works well on ADE on my PC. If the page is narrow it displays as 5 different pages. The title, the first image, the text The Voyages of Ulysses, omitting etc, the left image, and the right image. The first image attempts to overflow the bottom of the page depending on the width. If the page is wide enough you have the title page, the first image and the test showing up together on the second page, the two figures show themselves together on the third page and the final image is repeated by itself on the 4th page larger than when it was part of the left half.

Dale

DaleDe · 04-20-2019, 06:38 PM

On Apple books it shows a cover "Homer's daughter" and then:
* portrait, it show test followed by image 1 and text underneath (nothing expanded) followed by each half on separate pages, fairly large.
* landscape it shows test moved over to the second half of the page. The next page shows the first image with the text below and the left half of the second image. The next page shows the last half. The second image and the third are shrunk to fit on the smaller two page layout.

Dale

DaleDe · 04-20-2019, 06:50 PM

I tried the nook app on my iPad and it behaved very much like ADE on the PC, except it also posted an error message which I ignored. The text below the first image in landscape mode showed up at the top of the right side shifted left over a portion of the image.

Dale

DaleDe · 04-20-2019, 07:06 PM

I also have the pocketbook app on my iPad. It had the ability to display 1 or 2 pages together in landscape mode. Setting the left half of the map in portrait mode and then setting 2 page and then rotating I was able to get the left and right halves of the map in the same page but they were not scaled the same. The left one was smaller. If I changed pages in the mode the system would start displaying the left image on the right like some of the other apps. It was clear that the scale was not the same.

Dale

carmenchu · 04-20-2019, 07:07 PM

Thanks! Having never used a specialized e-reader, I am taken by surprise by they not honoring separated html pages. I suppose some code like
body {page-break-after: always;} (aproximated, cited from memory)
would be necessary?
And, yes: I extracted from an actual epub, apparently failing to wholly clean up, and the map was done when I had a screen with lower resolution--should go back to Gimp and save a better version.
Thanks again!

carmenchu · 04-20-2019, 07:22 PM

Quote:

Originally Posted by DaleDe

I also have the pocketbook app on my iPad. It had the ability to display 1 or 2 pages together in landscape mode. Setting the left half of the map in portrait mode and then setting 2 page and then rotating I was able to get the left and right halves of the map in the same page but they were not scaled the same. The left one was smaller. If I changed pages in the mode the system would start displaying the left image on the right like some of the other apps. It was clear that the scale was not the same.

Dale

Now, that surprises me no end: the view-box in both the svg (each in its own html page) ought to ensure the same scale in both--the trouble seems to be related to the viewer insisting in merging both pages, and having rendered the first one, scaling the second to make it fit... Even seeing the original in full landscaped mode in Firefox (I keep Calibre viewer portrait and more or less 560x400 px) that never happened: more space on screen lead to scaling, not to merging pages...
Thanks again for your trouble.

04-02-2019, 12:50 PM	#5
patrik Guru Posts: 658 Karma: 4568205 Join Date: Jan 2010 Location: Sweden Device: Kobo Forma	I tested on my Pocketbook Inkpad 3. Didn't work that well. Same result with both epubs. Attached Thumbnails

04-02-2019, 01:22 PM	#6
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	Similar results here is what the original post looks like using Adobe reader on a PC. It says one page but moving it over shows a second page. It seems clear that it is zoomed out too far. But there is no way to make it zoom in. This is similar to what patrik got but his is zoomed in even more. Dale edit:By the way, using Adobe Reader the map2.epub post looks exactly like the map.epub post. Adobe 4.5.8 version. Attached Thumbnails Last edited by DaleDe; 04-02-2019 at 01:33 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Using Apple Maps instead of Google Maps	kakkalla	Marvin	12	11-18-2013 07:03 PM
2-page spread	Sandara01	Introduce Yourself	6	10-22-2011 08:55 AM
Spread the calm...	TadW	Lounge	3	01-24-2011 08:50 AM
Geographical Spread	TGS	Feedback	19	04-26-2010 08:34 AM

04-20-2019, 06:28 PM	#10
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	It is a pretty low resolution pictures but it works well on ADE on my PC. If the page is narrow it displays as 5 different pages. The title, the first image, the text The Voyages of Ulysses, omitting etc, the left image, and the right image. The first image attempts to overflow the bottom of the page depending on the width. If the page is wide enough you have the title page, the first image and the test showing up together on the second page, the two figures show themselves together on the third page and the final image is repeated by itself on the 4th page larger than when it was part of the left half. Dale

04-20-2019, 06:38 PM	#11
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	On Apple books it shows a cover "Homer's daughter" and then: * portrait, it show test followed by image 1 and text underneath (nothing expanded) followed by each half on separate pages, fairly large. * landscape it shows test moved over to the second half of the page. The next page shows the first image with the text below and the left half of the second image. The next page shows the last half. The second image and the third are shrunk to fit on the smaller two page layout. Dale

04-20-2019, 06:50 PM	#12
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	I tried the nook app on my iPad and it behaved very much like ADE on the PC, except it also posted an error message which I ignored. The text below the first image in landscape mode showed up at the top of the right side shifted left over a portion of the image. Dale

04-20-2019, 07:06 PM	#13
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	I also have the pocketbook app on my iPad. It had the ability to display 1 or 2 pages together in landscape mode. Setting the left half of the map in portrait mode and then setting 2 page and then rotating I was able to get the left and right halves of the map in the same page but they were not scaled the same. The left one was smaller. If I changed pages in the mode the system would start displaying the left image on the right like some of the other apps. It was clear that the scale was not the same. Dale

04-20-2019, 07:07 PM	#14
carmenchu Groupie Posts: 183 Karma: 266070 Join Date: Dec 2010 Device: Win7,Win10,Lubuntu,smartphone	Thanks! Having never used a specialized e-reader, I am taken by surprise by they not honoring separated html pages. I suppose some code like body {page-break-after: always;} (aproximated, cited from memory) would be necessary? And, yes: I extracted from an actual epub, apparently failing to wholly clean up, and the map was done when I had a screen with lower resolution--should go back to Gimp and save a better version. Thanks again!