10-11-2012, 08:45 AM | #1 |
Zealot
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
|
Caption, distance from image
This is how I do images, taken directly from the "Quick and dirty EPUB".
<div class="ic"> <h3 title="Figure 1"><img alt="" src="../Images/figure_1.jpg"/></h3> <p class="caption">Figure 1: some text</p> </div> However, I think there is too big a distance between image and caption. How to get them closer? This is my CSS: .ic { page-break-inside: avoid; } .caption { font-size: 0.9em; text-align: center; text-indent: 0; margin-bottom: 1em;} |
10-11-2012, 09:25 AM | #2 | |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Remember things are inherited from the parent. If you use the property inspector ( in splitview) you should be able to see the computed values for each object (and make adjustments ) |
|
10-12-2012, 08:23 AM | #3 | |
Addict
Posts: 254
Karma: 69786
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
|
Quote:
Code:
.caption { font-size: 0.9em; text-align: center; text-indent: 0; margin-bottom: 1em; margin-top: -1em; } |
|
10-12-2012, 08:59 AM | #4 |
Grand Sorcerer
Posts: 27,545
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
What's the margin-top value of the .caption class (inherited from the <p> element)? You might not even have to go negative if it's already inheriting a 1em value.
But yes... ultimately, it boils down to the interaction of the padding/margin attributes of the .Figure1 and .caption classes—inherited or otherwise. You may even need to tweak the padding/margin of the <img/> element as well. Last edited by DiapDealer; 10-12-2012 at 09:02 AM. |
10-23-2012, 12:48 PM | #5 |
Zealot
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
|
Let me try to understand this.
I get attributes of .caption classes, but what means attribute of the .Figure1. Do you mean that each picture has a class? (Unlikely...) BTW, the negative value for the .caption margin-top worked fine! I use -2em for a tighter look. |
10-24-2012, 06:02 AM | #6 | |
Addict
Posts: 254
Karma: 69786
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
|
Quote:
Code:
<h3 title="Figure 1" class="figure"><img alt="" src="../Images/figure_1.jpg"/></h3> Code:
h3.figure { margin: 0; padding: 0; } Sigil's ability to "open with" enables you to edit the css in a different editor and have your changes reflected instantly in the book view. |
|
10-29-2012, 10:24 AM | #7 |
Zealot
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
|
Hm, I stll have a problem with the picture sitting on one page and caption ending up on the next... Do you have this problem too? (And changing the type size does not solve it.)
Still, I don´t want to have the caption TOO close. I suppoes the surefire way is to have the caption WITHIN the picture, but then my Photoshop talents are small. |
10-29-2012, 10:34 AM | #8 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
You hardly need Photoshop. Paint.net or any one of a number of others can do the job.
You know from Sigil how big the picture is. Make a new image perhaps 100 pixels taller and paste your image into it. Then use the text function to type in your caption and save. No separation ever....so long as you keep it with the display size of your device. |
10-29-2012, 10:54 AM | #9 | |
Addict
Posts: 254
Karma: 69786
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
|
Quote:
Any particular reader might or might not handle "page-break-inside:avoid" gracefully, but of the currently available options I still think it's better to aim for wider compatibility if your epub is intended for general distribution. On another thread about font sizes I was advised that scaling down small parts of the text as low as 0.6em is acceptable (assuming your body font size is left at default 1em), this might help in combination with the div trick in your first post. And yes, images in epubs are still a pain, there are no perfect solutions |
|
10-29-2012, 10:42 PM | #10 | |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
No matter how many times I explain this to a prospective client, I cannot count how many "edit" sheets we get complaining about how we "moved" the captions to "the next page." People apparently can't get their heads around the reflowable nature of ebooks. I had one client who became literally hysterical--I think I mentioned this in this forum before--because he could not grasp that a floating image, tied to a given paragraph, had to "slide" to the next "page" because there wasn't enough space left on the former "page" to display the image in its entirety, so the image and its adjoining paragraph reflowed to the ensuing display. I sent at least 5 explanations and finally had to do a video to show how ADE would resize, the text would reflow, etc., and still had to explain that if the text magically reflowed without the image (think water around a rock in a stream, which is what he thought should happen), all the images would end up stacked at the end of the book like a pair of too-long jeans crumpled at someone's ankles. I mean, if I explain this and the captions issue once a week, I explain it 3 times or more. (Right up there with, "no, we don't have a 'final Word file' to give you.") What device/reader are you using to view your images and their captions? From your statement, it does not seem to be ADE? Hitch |
|
10-30-2012, 11:12 AM | #11 |
Zealot
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
|
I am glad to hear I am not alone in this. I am using a Sony Reader on my computer and I have a very cheap noname physical reader. (Actually it has a name, a code that I don´t remember right now.)
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
5 way Distance edit Help | Conner | Kindle Developer's Corner | 0 | 03-30-2012 11:31 AM |
L shape image with caption? | LostSock | ePub | 5 | 09-08-2011 07:24 PM |
Center Image and Caption | SamL | ePub | 11 | 08-12-2011 09:27 AM |
Suggest a photo caption. Fun for dog and cat lovers | Falbe Publishing | Lounge | 23 | 02-22-2010 10:55 PM |