03-30-2019, 08:07 PM | #1 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
Maps spread over two pages
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> |
04-01-2019, 09:17 AM | #2 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Geoff: Have you tried this on anything other than Calibre? Hitch |
|
Advert | |
|
04-01-2019, 05:11 PM | #3 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
|
04-01-2019, 06:47 PM | #4 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
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:
Last edited by GeoffR; 04-02-2019 at 05:49 AM. Reason: fixed XPGT stylesheet, replaced attachment |
04-02-2019, 12:50 PM | #5 |
Guru
Posts: 669
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.
|
Advert | |
|
04-02-2019, 01:22 PM | #6 |
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. Last edited by DaleDe; 04-02-2019 at 01:33 PM. |
04-02-2019, 03:31 PM | #7 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
04-02-2019, 07:10 PM | #8 |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
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> Last edited by GeoffR; 04-02-2019 at 07:55 PM. Reason: simpler but flawed SVG |
04-20-2019, 04:49 PM | #9 |
Groupie
Posts: 183
Karma: 266070
Join Date: Dec 2010
Device: Win7,Win10,Lubuntu,smartphone
|
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... |
04-20-2019, 06:28 PM | #10 |
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 |
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 |
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 |
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 |
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! |
04-20-2019, 07:22 PM | #15 | |
Groupie
Posts: 183
Karma: 266070
Join Date: Dec 2010
Device: Win7,Win10,Lubuntu,smartphone
|
Quote:
Thanks again for your trouble. |
|
|
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 |