View Single Post
Old 04-01-2019, 06:47 PM   #4
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
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:
Code:
body, div { margin: 0; padding: 0; }

/* Default to the landscape method if display orientation can't be
   determined, because that method works okay in portrait mode too.
*/
div.display-iff-landscape { display: block; }
div.display-iff-portrait { display: none; }

media.css:
Spoiler:
Code:
@media (orientation: portrait) {
    div.display-iff-portrait { display: block; }
    div.display-iff-landscape { display: none; }
}

@media (orientation: landscape) {
    div.display-iff-landscape { display: block; }
    div.display-iff-portrait { display: none; }
}

media.xpgt:
Spoiler:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<ade:template xmlns="http://www.w3.org/1999/xhtml"
	      xmlns:ade="http://ns.adobe.com/2006/ade"
	      xmlns:fo="http://www.w3.org/1999/XSL/Format">


  <fo:layout-master-set>

    <fo:simple-page-master master-name="single_column">
      <fo:region-body />
    </fo:simple-page-master>

    <fo:page-sequence-master>
      <fo:repeatable-page-master-alternatives>
	<fo:conditional-page-master-reference master-reference="single_column"/>
      </fo:repeatable-page-master-alternatives>
    </fo:page-sequence-master>

  </fo:layout-master-set>


  <ade:style>

    <ade:styling-rule selector="div.display-iff-portrait"
		      display="block"/>
    <ade:styling-rule selector="div.display-iff-portrait"
		      condition="{ade:page-aspect() &gt; 1}"
		      display="none"/>

    <ade:styling-rule selector="div.display-iff-landscape"
		      display="none"/>
    <ade:styling-rule selector="div.display-iff-landscape"
		      condition="{ade:page-aspect() &gt; 1}"
		      display="block"/>

  </ade:style>


</ade:template>

map.html:
Spoiler:
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>Map2</title>
  <link href="default.css" rel="stylesheet" type="text/css"/>
  <link href="media.css" rel="stylesheet" type="text/css"/>
  <link href="media.xpgt" rel="stylesheet"
	type="application/adobe-page-template+xml"/>
</head>

<body>

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

  <div class="display-iff-landscape">
    <div style="max-height:100%;max-width:100%;overflow:hidden;">
      <svg:svg viewBox="0 0 600 400" width="100%" height="100%"
	       preserveAspectRatio="xMidYMid meet">
	<svg:image height="400" width="600" xlink:href="map.png"/>
      </svg:svg>
    </div>
  </div>

  <div class="display-iff-portrait">
    <div style="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="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>
  </div>

</body>
</html>
Attached Files
File Type: epub map2.epub (7.5 KB, 189 views)

Last edited by GeoffR; 04-02-2019 at 05:49 AM. Reason: fixed XPGT stylesheet, replaced attachment
GeoffR is offline   Reply With Quote