Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-26-2011, 05:23 PM   #1
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Center Image and Caption

Ok this has been driving me crazy. What I want to do is have and image with a caption underneath, and have them both centered. The image is 500px wide, so I want the caption to stay within the that limit, so if the text or caption is longer, it will break to a new line.

This is the CSS I am using:
Quote:

div.center {
text-align:center;
}

p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin-bottom: 0.00em;
margin-top: 0.30em;
margin-right: 0.25em;
margin-left: 0.25em;
}
And this is how my code looks (above and below this div are normal paragraphs in <p> tags):

Quote:
<div class="center"><img src="images/2_06.jpg" alt="2_06.jpg" />
<p class="caption">A gathering of cellists: Andre Navarra, Zara Nelsova, Milos Sadlo, Adolfo Odnoposoff, (unknown), Maurice Eisenberg, Mstislav Tostropocich</p></div>
Heres a couple screen shots of how this looks in ADE (tried it with different sized fonts.) As you can see, the image is centering properly, but the caption is keeping to the left.



Any help is greatly appreciated, thanks.
SamL is offline   Reply With Quote
Old 07-26-2011, 05:50 PM   #2
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Okay, after looking around some more. I've tweaked my CSS a little to this:

Quote:
p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em auto;

}

div.center {
text-align:center;
}
My code looks the same:
Quote:
<div class="center"><img src="images/2_06.jpg" alt="2_06.jpg" />
<p class="caption" >A gathering of cellists: Andre Navarra, Zara Nelsova, Milos Sadlo, Adolfo Odnoposoff, (unknown), Maurice Eisenberg, Mstislav Tostropocich</p></div>

Now its centering properly, but the text does not stay within the edges of the photo:


SamL is offline   Reply With Quote
Advert
Old 07-26-2011, 05:55 PM   #3
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
Check that you don't have something like
p {
...
text-align: left;
...
}
in your css, since that will override the attribute in the div.

To fix the width, do something like:
p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em 15%;
}

.img {
width: 70%
}

with <img src="images/2_06.jpg" class="img" alt="2_06.jpg" />

Last edited by charleski; 07-26-2011 at 06:03 PM.
charleski is offline   Reply With Quote
Old 07-26-2011, 06:34 PM   #4
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Quote:
Originally Posted by charleski View Post
Check that you don't have something like
p {
...
text-align: left;
...
}
in your css, since that will override the attribute in the div.

To fix the width, do something like:
p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em 15%;
}

.img {
width: 70%
}

with <img src="images/2_06.jpg" class="img" alt="2_06.jpg" />
Thanks! that did it, all I needed was the
Quote:
margin: 0.3em 15%;
SamL is offline   Reply With Quote
Old 07-26-2011, 08:13 PM   #5
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
It's safer to set the width in the image as well, otherwise it'll break on screens that fall outside the norm (i.e. if someone reads the book on their phone), and will also make the code more generally applicable to different-sized images.
charleski is offline   Reply With Quote
Advert
Old 07-29-2011, 06:11 PM   #6
photoluminations
Member
photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.
 
Posts: 23
Karma: 3022
Join Date: Jul 2011
Device: none
have been searching for days for this answer. I set the left and right margins to 20%, this makes the text 60%; text-align:center; makes each line center in the 60% box.
photoluminations is offline   Reply With Quote
Old 07-30-2011, 04:25 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
But do you want the box to be always 60%? With a small screen that becomes really tiny!
Jellby is offline   Reply With Quote
Old 08-05-2011, 09:33 AM   #8
photoluminations
Member
photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.
 
Posts: 23
Karma: 3022
Join Date: Jul 2011
Device: none
Jellby, a good point. The goal is to have the image fill,or nearly fill, the screen. If the image fills the width, the height tends to overflow the page. I also have a caption that needs to fit under the image...So far, the images seem to fit at 65% without overflowing the page. Next: I may try to enlarge the image and use CSS to move the caption up to display on top of the image. Note: Doing this in epub for color book readers (Nook color) and larger, like the ipad.
photoluminations is offline   Reply With Quote
Old 08-05-2011, 11:25 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
I've arrived to the conclusion that it's not possible to set the size on an image so that it looks fine in all possible screens and orientations, mainly because there's no way to use the screen height in the properties. If there were, I'd suggest:

max-width: 100%;
max-height: 80%;

or something similar with SVG. But that's not the way max-height works.
Jellby is offline   Reply With Quote
Old 08-05-2011, 12:17 PM   #10
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Jellby, would using

max-width: 100%;
max-height: 80%;

ever give you weirdly sized images? I tried in the past to set both a max height and width, and what would happen is that in some cases, the image would stop resizing at a certain height, but continue resizing in width so I would end up disproportioned sized images.

I haven't tried it with percentages yet, so I think I'll apply it today and see for myself.
SamL is offline   Reply With Quote
Old 08-06-2011, 04:36 AM   #11
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
I haven't seen it scaling unevenly, but it could happen in some implementation (I'm not sure what the spec has to say about that).

But anyway, max-height is often pretty useless, because the parent height is usually undefined, so "80%" does not mean "80% of the screen height".
Jellby is offline   Reply With Quote
Old 08-12-2011, 09:27 AM   #12
photoluminations
Member
photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.photoluminations could sell banana peel slippers to a Deveel.
 
Posts: 23
Karma: 3022
Join Date: Jul 2011
Device: none
I'm still struggling with the problem, somehow a relief to know that others are tool

There are many reading devices with various geometries (HeightXWidth) and various pixel densities. While the possible viewing area examples are not infinite, they are many, and their ranges can be defined. But what it comes down to is that an image can fill the screen either on the height or the width, but no guarantee it will completely fill the screen (unless the image proportions match those of the viewer device). Browsers and web sites interact so the site can deliver correctly formatted stuff to the specific browser, I'm not if aware this can be done in epub.

I will try something like:

width: 100%;
height: auto;

The ipad does enable creating pages that display exactly as planned, but that file will not work on another device. Liza Daly: http://blog.threepress.org/2011/01/1...epubs/(Example by Elizabeth Castro: http://vimeo.com/24579915)
photoluminations is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to center an image vertically GBAV ePub 31 08-01-2018 01:57 PM
image be in the center yuxi_kelly ePub 2 03-19-2011 10:40 AM
"Insert Image" renames .jpg's incorrectly... but shows the correct image! megacoupe Sigil 4 03-06-2011 08:13 PM
Suggest a photo caption. Fun for dog and cat lovers Falbe Publishing Lounge 23 02-22-2010 10:55 PM
Center a cover image Crusader Sigil 2 10-18-2009 08:51 AM


All times are GMT -4. The time now is 12:27 AM.


MobileRead.com is a privately owned, operated and funded community.