Mobileread
What dimensions should image files be within books?
#1  wellesradio 12-06-2020, 07:55 PM
I edited an epub in Sigil to replace the cover page and any pages with full-page image reproductions. I resized all the images in GIMP, but it seems there's always a little bit of the image splashing over to the top of the next screen. The bottom always gets cut off. I don't know if the device makes a difference, but I'm usually reading my books on an iPad.
Reply 

#2  Turtle91 12-12-2020, 09:17 PM
I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width. I also set the background color - usually to black, but to whatever complements the cover image. That fills in any blank areas around the image. Set the width and height coordinates to the actual size (in pixels) of the image.

Code
<body style="margin:0; padding:0; text-align:center; background-color:black"> <h1 style="display:none" title="Cover"/> <div style="margin:0; padding:0"> <svg	xmlns="http://www.w3.org/2000/svg"	height="100vh" width="100vw"	preserveAspectRatio="xMidYMid meet" version="1.1"	viewBox="0 0 473 603"	xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="473" height="603" xlink:href="../Images/cover.jpg"/> </svg> </div>
</body>
Reply 

#3  wellesradio 12-20-2020, 07:25 PM
Quote Turtle91
I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width.
Didn't seem to work. It created a blank page.

Here's what I currently have for the book cover. The dimensions are 1127x1800 pixels but I didn't put that anywhere in the code. All in all, it looks great and I don't care if it fills the entire screen, but it does cut a portion of the bottom of the image off and spills it over onto the next page.

Please guide me where I can make some changes:
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" xml:lang="en">
<head> <link href="../Styles/nyrb.css" rel="stylesheet" type="text/css"/> <title>Cover</title>
<style type="text/css">
img { max-width: 100%; }
</style>
<meta content="urn:uuid:4bf76f52-8996-4795-95a0-48e28ff4cf4d" name="Adept.expected.resource"/>
</head>
<body>
<div style="text-align: center;"><img alt="Doomsday Book" src="../Images/cover.png"/> </div>
</body>
</html>
Reply 

#4  Turtle91 12-21-2020, 01:20 PM
Works every time.... just copy/paste onto its own html file...and then, of course, you need to select "Publisher's layout" from Marvin settings otherwise Marvin will ignore most of your styling for it's own. Just open your book in Marvin, tap the screen and go to settings by hitting the Aa in the top right corner, scroll down the settings list a little (below Uniform text size)...

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>Cover</title>
</head>
<body style="margin:0; padding:0; text-align:center; background-color:black"> <h1 style="display:none" title="Cover"/> <div style="margin:0; padding:0"> <svg	xmlns="http://www.w3.org/2000/svg"	height="100vh" width="100vw"	preserveAspectRatio="xMidYMid meet" version="1.1"	viewBox="0 0 1127 1800"	xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="1127" height="1800" xlink:href="../Images/cover.png"/> </svg> </div>
</body>
Reply 

#5  Turtle91 12-21-2020, 01:24 PM
In your attempt you have simply set the width of the image to be 100%...and it will automatically size the height to keep the proper aspect ratio. This will often cause the image to flow over to the next page because most cover images are taller than they are wide. That's why an svg wrapper works so well. It automatically maximizes the image to fill the screen with the proper aspect ratio. (assuming you use the settings I provided above).

I actually keep this as a template...all I need to do is enter the exact image dimensions and it always works.
Reply 

Today's Posts | Search this Thread | Login | Register