Issue formatting page with only an image.

blutuu · 12-21-2014, 11:27 PM

I've been trying to get the images to behave correctly. I'm trying to create a children's ebook from just images, but the way I currently have it coded doesn't seem to work. The images show up, but they're at the top of the page. I want them to sit in the middle.

Here's some sample code:

<head>
<title>Audacious Little Princesses</title>

<style type="text/css">
img { width: 100%}
p { text-align: center; margin: 0; padding: 0; text-indent: 0 }
</style>
</head>

<body>
<div><img src="../Images/1.jpeg" alt="" /></div>
</body>

That's it.

Here is what the output looks like:

http://imgur.com/n7KhIDU

Any ideas about what to do?

RbnJrg · 12-22-2014, 05:25 AM

Hmmm, what you want is a vertically centered image. That's not easy to get

But if you want your ebook only for iPad (or Kindle) then you can use a method to achieve what you are seeking.

1. You need to create a .css style sheet with the following styles:

Code:

html {
    height: 100%; /* very important */
    margin: 0;
}

body {
    height: 100%;  /* very important */
    margin: 0;
}

#container1 {
    height: 100%;
    width: 100%;
    background: url("../Images/Obama.jpg") no-repeat 50% 50%; /* the image is the background of the "container" */
    background-size: contain; /* this is important */ 
}

2. In your .xhtml file write the following:

Code:

<body>
  <div id="container1"></div>
</body>

3. Finally, link the style sheet of the step #1 with the .xhtml file of step #2.

Here I attach an ePub so you can see better how the things work.

Vertical Centered Image.epub

That's all; as you can see, images are centered, vertical and horizontally. But remember that this technique will only work on iPad or Kindle; it could not work on ADE or ereaders based on ADE. However, ADE 3.0 seems to support this solution (at least, the epub I attach looks great on ADE 3.0).

Regards
Rubén

blutuu · 12-22-2014, 01:04 PM

Thanks for the reply. I just tried your solution (as well as the example you gave me), but it didn't work for iBooks. It just displays blank pages. It did indeed work for my android tablet and Calibre, though. Idk why that is.

Edit: (https://www.dropbox.com/s/owegx8ragx..._PEZ.epub?dl=0)
This epub here works in the way I want, but when I tried emulating the html I received different results. Any idea why that may be?

RbnJrg · 12-22-2014, 03:39 PM

Quote:

Originally Posted by blutuu

Thanks for the reply. I just tried your solution (as well as the example you gave me), but it didn't work for iBooks. It just displays blank pages. It did indeed work for my android tablet and Calibre, though. Idk why that is.

Edit: (https://www.dropbox.com/s/owegx8ragx..._PEZ.epub?dl=0)
This epub here works in the way I want, but when I tried emulating the html I received different results. Any idea why that may be?

Try this new version of the epub in your iPad; maybe this time works:

Vertical Centered Image.epub

Regarding your epub, is composed by images of 594 x 768px (all of them). That is ok for ereaders with a 4/3 screen but they won't be vertically aligned on ereaders with a 16/9 screen. I made some modifications on the file you uploaded (and I fixed some errors); this is the "new" version:

counting_with_pez_callor_brandon.epub

Watch if both versions can be open without troubles on iPad (or the ereaders you like).

Regards

blutuu · 12-22-2014, 04:07 PM

Your updated files worked perfectly, but it's still not working for my own. I copied over the stylesheet and the html content, but it does not work for iBooks. Are there any other settings I should be aware of?

JSWolf · 12-22-2014, 04:29 PM

but can it be vertically centered and have text above and below the image and none actually on the image since it's now a background?

RbnJrg · 12-22-2014, 07:28 PM

Quote:

Originally Posted by blutuu

Your updated files worked perfectly, but it's still not working for my own. I copied over the stylesheet and the html content, but it does not work for iBooks. Are there any other settings I should be aware of?

Maybe you are not linking the .css stylesheet with your .xhtml files; otherwise if my files work, then the solution must work for you too. Try this epub:

counting_with_pez_callor_brandon.epub

It's your epub but now with images in background.

RbnJrg · 12-22-2014, 07:41 PM

Quote:

Originally Posted by JSWolf

but can it be vertically centered and have text above and below the image and none actually on the image since it's now a background?

Yes, images can be vertically centered with text above and below but in that case the solution could be a bit different. I set images as full background because the OP didn't want text, just images; with text above and below you could employ something like what I say here:

https://www.mobileread.com/forums/sho...36&postcount=4

Of course, that kind of solution only works -so far- for Kindle (those devices who support .kf8) and iPad.

JSWolf · 12-22-2014, 08:11 PM

Quote:

Originally Posted by RbnJrg

Yes, images can be vertically centered with text above and below but in that case the solution could be a bit different. I set images as full background because the OP didn't want text, just images; with text above and below you could employ something like what I say here:

https://www.mobileread.com/forums/sho...36&postcount=4

Of course, that kind of solution only works -so far- for Kindle (those devices who support .kf8) and iPad.

Yes, it fails very much so with ADE. My question is, can it really be called ePub? Does it follow all of the ePub specs?

blutuu · 12-22-2014, 08:39 PM

It works great now, but only for iBooks. I tried it with my android tablet and the result was all over the place. I could create another version that works for other devices, but I don't know if that's best.

https://www.dropbox.com/s/yofg719jep...n%21.epub?dl=0
I found this simple ebook online. It works perfectly fine for each device I tested. I tried to see what made it work so well, but I could't figure it out. Could it deal with image sizes?

dgatwood · 12-22-2014, 10:31 PM

A little SVG works well for me:

PHP 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" xmlns:svg="http://www.w3.org/2000/svg">

<head>

<title>Cover</title>

<link rel="stylesheet" type="text/css" href="nookstyles.css" />

<link rel="stylesheet" type="text/css" href="nookstyles2.css" />

<style type="text/css">

    html,body {

    height: 100% !important;

    min-height: 100% !important;

    width: 100% !important;

    margin: 0 !important;

    border-width: 0 !important;

    padding: 0 !important;

    }

    div.coverpage {

        height: 100%;

        margin: 0;

        padding: 0;

        border-width: 0;

    }

</style>

</head>

<body style="oeb-column-number: 1; background-color: #000000;" >

<div class="coverpage">

<svg 

    xmlns:svg="http://www.w3.org/2000/svg"

    xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink"

    version="1.1"

    width="100%"

    height="100%"

    id="svg2"

    xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">

    <image xlink:href="efw-frontcover.jpg" height="2640" width="2040">

    <desc>Patriots: Enemies From Within</desc>

    </image>

</svg>

</div>

</body>

</html>

This content works for me in ADE-based readers, Kindle (with the addition of wrapper divs so non-KF8 readers see only the image), Nook, and iBooks. Note that the values 2040 and 2640 must both be replaced in two places by the actual dimensions of the image itself.

blutuu · 12-22-2014, 10:52 PM

Cool. Is there a way to fill the black space with the image?

http://i.imgur.com/U7TFFzr.png

RbnJrg · 12-23-2014, 06:45 AM

Quote:

Originally Posted by dgatwood

A little SVG works well for me:
...

This content works for me in ADE-based readers, Kindle (with the addition of wrapper divs so non-KF8 readers see only the image), Nook, and iBooks. Note that the values 2040 and 2640 must both be replaced in two places by the actual dimensions of the image itself.

Yes, but the problem is that the OP wants images to be centered on ereaders screen. You are using an image of 2040 x 2640 (practically a perfect 4/3 image); but when you are using a lower image then that one are not going to be centered on the screen.

RbnJrg · 12-23-2014, 07:24 AM

Quote:

Originally Posted by blutuu

It works great now, but only for iBooks.

That is because your others ereader doesn't support the property "background-size: contain;". In that case, and if we maintain the idea of images centered on the ereaders screen, we have to deal with the properties "display: table", "display: table-cell" and "vertical-align: middle"; but again those properties are going to be supported only by iPad and (Kf8) Kindles

However if your images are always going to be of 594 x 768 then a more easy solution can be implemented. For example what you can see in this epub:

counting_with_pez_callor_brandon.epub

This ebook should work in any ereader

RbnJrg · 12-23-2014, 08:00 AM

Quote:

Originally Posted by JSWolf

Yes, it fails very much so with ADE. My question is, can it really be called ePub? Does it follow all of the ePub specs?

What ePub specs?

ePub3? Yes, it does. ePub2? No, since background-size is not a property supported by css2. For that reason in my first post I warned that the "solution" could only work under iPad and (kf8) Kindles. But as you know, ADE still doesn't support many CSS2 specs; of that way even an css2 epub compliant, could not be read on ADE.

12-22-2014, 01:04 PM	#3
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Thanks for the reply. I just tried your solution (as well as the example you gave me), but it didn't work for iBooks. It just displays blank pages. It did indeed work for my android tablet and Calibre, though. Idk why that is. Edit: (https://www.dropbox.com/s/owegx8ragx..._PEZ.epub?dl=0) This epub here works in the way I want, but when I tried emulating the html I received different results. Any idea why that may be? Last edited by blutuu; 12-22-2014 at 01:14 PM.

12-22-2014, 10:31 PM	#11
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	A little SVG works well for me: PHP 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" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>Cover</title> <link rel="stylesheet" type="text/css" href="nookstyles.css" /> <link rel="stylesheet" type="text/css" href="nookstyles2.css" /> <style type="text/css"> html,body { height: 100% !important; min-height: 100% !important; width: 100% !important; margin: 0 !important; border-width: 0 !important; padding: 0 !important; } div.coverpage { height: 100%; margin: 0; padding: 0; border-width: 0; } </style> </head> <body style="oeb-column-number: 1; background-color: #000000;" > <div class="coverpage"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" id="svg2" xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid"> <image xlink:href="efw-frontcover.jpg" height="2640" width="2040"> <desc>Patriots: Enemies From Within</desc> </image> </svg> </div> </body> </html> This content works for me in ADE-based readers, Kindle (with the addition of wrapper divs so non-KF8 readers see only the image), Nook, and iBooks. Note that the values 2040 and 2640 must both be replaced in two places by the actual dimensions of the image itself.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Smashwords formatting issue	Flumplepuss	Writers' Corner	2	11-04-2014 11:36 AM
PB360+ Formatting issue	Japes	PocketBook	1	07-15-2014 06:06 AM
Formatting issue	jhempel24	Sigil	4	03-08-2012 01:40 PM
Image formatting without stretching	Vanguard3000	Sigil	2	03-04-2011 01:15 AM
image on separate page without half-page text next	Toxaris	ePub	2	01-26-2011 03:32 AM

12-21-2014, 11:27 PM	#1
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Issue formatting page with only an image. I've been trying to get the images to behave correctly. I'm trying to create a children's ebook from just images, but the way I currently have it coded doesn't seem to work. The images show up, but they're at the top of the page. I want them to sit in the middle. Here's some sample code: <head> <title>Audacious Little Princesses</title> <style type="text/css"> img { width: 100%} p { text-align: center; margin: 0; padding: 0; text-indent: 0 } </style> </head> <body> <div><img src="../Images/1.jpeg" alt="" /></div> </body> That's it. Here is what the output looks like: http://imgur.com/n7KhIDU Any ideas about what to do?

12-22-2014, 05:25 AM	#2
RbnJrg Wizard Posts: 1,761 Karma: 8700631 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Hmmm, what you want is a vertically centered image. That's not easy to get But if you want your ebook only for iPad (or Kindle) then you can use a method to achieve what you are seeking. 1. You need to create a .css style sheet with the following styles: Code: html { height: 100%; /* very important / margin: 0; } body { height: 100%; / very important / margin: 0; } #container1 { height: 100%; width: 100%; background: url("../Images/Obama.jpg") no-repeat 50% 50%; / the image is the background of the "container" / background-size: contain; / this is important / } 2. In your .xhtml file write the following: Code: <body> <div id="container1"></div> </body> 3. Finally, link the style sheet of the step #1 with the .xhtml file of step #2. Here I attach an ePub so you can see better how the things work. Vertical Centered Image.epub That's all; as you can see, images are centered, vertical and horizontally. But remember that this technique will only work on iPad or Kindle; it could not work on ADE or ereaders based on ADE. However, ADE 3.0 seems to support this solution (at least, the epub I attach looks great on ADE 3.0). Regards Rubén Last edited by RbnJrg; 12-22-2014 at 05:53 AM.*

12-22-2014, 04:07 PM	#5
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Your updated files worked perfectly, but it's still not working for my own. I copied over the stylesheet and the html content, but it does not work for iBooks. Are there any other settings I should be aware of?

12-22-2014, 04:29 PM	#6
JSWolf Resident Curmudgeon Posts: 79,720 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	but can it be vertically centered and have text above and below the image and none actually on the image since it's now a background?

12-22-2014, 08:39 PM	#10
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	It works great now, but only for iBooks. I tried it with my android tablet and the result was all over the place. I could create another version that works for other devices, but I don't know if that's best. https://www.dropbox.com/s/yofg719jep...n%21.epub?dl=0 I found this simple ebook online. It works perfectly fine for each device I tested. I tried to see what made it work so well, but I could't figure it out. Could it deal with image sizes?

12-22-2014, 10:52 PM	#12
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Cool. Is there a way to fill the black space with the image? http://i.imgur.com/U7TFFzr.png

Advert

Advert