View Single Post
Old 11-04-2013, 01:34 PM   #11
At_Libitum
Addict
At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.At_Libitum ought to be getting tired of karma fortunes by now.
 
Posts: 265
Karma: 724240
Join Date: Aug 2013
Device: KyBook
I have noticed that several e-Readers on the iPhone suffer from next-page blockage if using a CSS body height of 100%. Sometimes even to the point that you cannot go back too

EDIT: Almost forgot the most important thing.

You are not limited to using pixel size for the image dimension, you can also use percentages. If you set the viewbox to the exact size of the image and then height and width of the svg container to 100%, it will fit things nicely within the page when positioning the svg elements in the container.

Centering is done via separate anchor attribute. See below example for an svg with embedded caption. Image is scaled down to 95% height, the width will automatically adjust because "preserveAspectRatio" prevents the image from distorting and also controls the alignment within the image container. The reduction in height will place the image container vertically aligned to top. So leave the width at 100% for horizontal centering.

Code:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="95%" width="100%" xlink:href="../Images/fullpage.png"/>
<text text-anchor="middle" font-size="xx" x="50%" y="98%" fill="black">Caption</text>
</svg>
You could also put a link around the text like so (rarely supported in e-readers)
Code:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="95%" width="100%" xlink:href="../Images/fullpage.png"/>
<a xlink:href="someplace else"><text text-anchor="middle"  font-size="xx" x="50%" y="98%">Caption</text></a>
</svg>
caveat: iBooks will not display this. Most eReaders I tried which support svg images, had no problems with the text caption, but the link feature is badly or not supported by most all I've tried it with...

Last edited by At_Libitum; 11-04-2013 at 02:10 PM.
At_Libitum is offline   Reply With Quote