View Single Post
Old 09-09-2012, 04:42 PM   #1
Iznogood
Guru
Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.
 
Iznogood's Avatar
 
Posts: 932
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
XHTML fallback for SVG

Lately I have been messing about with pdurrants solution for full-screen cover images. Some readers does not "do" svg, e.g. Stanza and others. So I would like to have a sort of fallback to XHTML where SVG cannot be rendered.

I save the following as cover_front.svg:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="stylesheet.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 617 900" preserveAspectRatio="xMidYMid meet">
	<image width="617" height="900" xlink:href="cover_front.jpg"/>
	<text x="300" y="450" text-anchor="middle" color="white" style="font-size:75px;color:white;">This is a test</text>
</svg>
This file contains most of pdurrants code snippet to make an SVG image. In this case I have just used a plain image with some example text, drawn in a standard viewBox, but it could be a more complex layout. My plan is to use SVG more in my books, not only for covers but for other "stuff" that has a graphical layout, like title pages and so on. But first the fallback must be settled. The main goal using this technique on covers is providing the alt-attribute for text-to-speech.

This svg-file is referenced in cover_front.xhtml:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Back Cover</title>
		<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
	</head>
	<body>
		<div class="svg_outer">
			<div class="svg_inner">
				<object style="background-color:yellow" data="images/cover_front.svg" type="image/svg+xml">
					<img src="images/cover_back.jpg" alt="Some text to describe the contents of the cover"/>
				</object>
			</div>
		</div>
	</body>
</html>
This is the relevant stylesheet:
Code:
.svg_outer {
	display: block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	text-align: left;
	
	background-color:red;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
}
.svg_inner {
	display:block;
	text-align:center;
	background-color:blue;
}
.svg_inner object{
	margin:0 0 0 0;
	display:block;
	width:100%;
	height:100%;
	background-color:green;
}
If the <object> tag cannot be rendered, the contents of the tag should be rendered instead. In other words, if the svg file cannot be processed, it will be replaced with an <img> tag.

The problem is that it doesn't work. In ADE (desktop) it doesn't resize to full screen, in iBooks it doesn't show up at all, the only place it works as expected is Calibres ibook reader and Stanza
I wonder why Stanza suddenly started rendering books as described in the CSS

Have any of you had experiences with the <object> tag indicating that it will be ignored by iBooks? Or have any of you tips on how to scale the .svg file? The object tag itself fills the entire screen (the style="background-color:yellow" in <object> fills the entire screen. It's the svg file referenced in the data attribute of the object tag that does not scale to full screen). Any tips on what to do?
Iznogood is offline   Reply With Quote