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