Quote:
Originally Posted by deback
Here's the code I use in the Calibre editor. The ePub files I edit and/or create look fine using Adobe Digital Editions.
Spoiler:
The following is in the html file where you want the image to be placed:
<p class="image1">
<img src="img.jpg" class="image2"/>
</p>
The following are the CSS codes in the stylesheet.css file:
.image1 {
display: block;
text-align: center;
margin: 0 0;
}
.image2 {
height: 100%;
width: 100%;
}
.image3 {
height: auto;
width: auto;
}
Image2 is for full-page images.
Image3 is for smaller images.
I don't use Word to edit ebooks, since I learned how to use CSS and the Calibre editor, which I find to be much easier and quicker than trying to use Word or any other text editor to create an ePub file. |
The problem with your code is that there are renderers that do not follow the epub spec -- any flavour of the epub spec. The "text-align: center" is disregarded as are most other style directives. Early versions of RMSDK also had issues with centering and I used the following to work around it:
For your second item, it would work in most cases but can also cause horrible distortion since it totally disregards the original image aspect ratio.
My preference is to use an SVG wrapper which maintains the aspect ratio and automatically scales to the page size.
Spoiler:
<style type="text/css">
@page {padding: 0; margin:0;}
body { text-align: center; padding:0; margin: 0;}
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/cover.jpg"/></svg>
</div
The obvious disadvantage of your third example is that it depends on the context and the context of the element. Width:auto will use 100% of the containing block width while height:auto will use the full height of the child element. This also leads to an issue where your image looks fine on an old 600x800 ereader but looks like a thumbnail on a 1404x1872 ereader screen. My personal preference here to use a width: xx% and height:auto where the xx% is derived from the width of the image in pixels divided by the 600 pixel width of the older ereader screens. So a image that was 200 pixel wide would get "width: 33.3%; height: auto".
You might also want to use "alt=" otherwise epubcheck gets unhappy. You don't need to supply an alternative text for the image, a simple alt="" works.
I.e. <img alt="" class="glyphw24" src="../Images/STLogo.jpeg"/> is good, <img class="glyphw24" src="../Images/STLogo.jpeg"/> will throw an error. Epubcheck gives a "Col: 53: ERROR(RSC-005): Error while parsing file 'element "img" missing required attribute "alt"'." message.
I suspect any further discussion should be moved to a different forum before I start wandering into typography and other fun topics.