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

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 10-11-2012, 08:45 AM   #1
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
Question 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;}
GraciousMe is offline   Reply With Quote
Old 10-11-2012, 09:25 AM   #2
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 13,596
Karma: 5126946
Join Date: Aug 2009
Location: The (original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by GraciousMe View Post
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;}
.Figure1 {margin: 0; padding: 0; } ?
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 )
theducks is offline   Reply With Quote
 
Enthusiast
Old 10-12-2012, 08:23 AM   #3
Man Eating Duck
Addict
Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.
 
Posts: 252
Karma: 69784
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
Quote:
Originally Posted by theducks View Post
.Figure1 {margin: 0; padding: 0; } ?
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 )
It might be easier to change the .caption class, you can actually have a negative margin-top:

Code:
.caption { 
    font-size: 0.9em; 
    text-align: center; 
    text-indent: 0;
    margin-bottom: 1em;
    margin-top: -1em;
}
I'm not sure if this is reliable, but as I've seen Jellby use it I figure that it's safe
Man Eating Duck is offline   Reply With Quote
Old 10-12-2012, 08:59 AM   #4
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 8,299
Karma: 36122446
Join Date: Jan 2010
Device: Kindle Fire HD, Kindle 2
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.
DiapDealer is online now   Reply With Quote
Old 10-23-2012, 12:48 PM   #5
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
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.
GraciousMe is offline   Reply With Quote
Old 10-24-2012, 06:02 AM   #6
Man Eating Duck
Addict
Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.
 
Posts: 252
Karma: 69784
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
Quote:
Originally Posted by GraciousMe View Post
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.
It's probably just a small mixup of class and title, a h3 class would do it. From your original example:

Code:
<h3 title="Figure 1" class="figure"><img alt="" src="../Images/figure_1.jpg"/></h3>
and in the CSS (from theducks' example):
Code:
h3.figure {
    margin: 0; 
    padding: 0;
}
You could also omit the "h3" from the CSS to have it apply to all paragraphs with class .figure. Just experiment

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.
Man Eating Duck is offline   Reply With Quote
Old 10-29-2012, 10:24 AM   #7
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
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.
GraciousMe is offline   Reply With Quote
Old 10-29-2012, 10:34 AM   #8
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,685
Karma: 1356793
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.
mrmikel is offline   Reply With Quote
Old 10-29-2012, 10:54 AM   #9
Man Eating Duck
Addict
Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.Man Eating Duck juggles neatly with hedgehogs.
 
Posts: 252
Karma: 69784
Join Date: May 2006
Location: Oslo, Norway
Device: Kobo Aura, Sony PRS-650
Quote:
Originally Posted by GraciousMe View Post
I suppoes the surefire way is to have the caption WITHIN the picture, but then my Photoshop talents are small.
That would work, but the disadvantage is that the text won't scale or follow user formatting choices. It probably won't be readable on a phone, neither will it be accessible to screen readers and such. This might not be important for your use case, but in my opinion the nice thing to do is to leave it as flowable text if at all possible, even if that results in a page break between image and byline on some readers.

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
Man Eating Duck is offline   Reply With Quote
Old 10-29-2012, 10:42 PM   #10
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,002
Karma: 10381859
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by GraciousMe View Post
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.)
Of course. Everyone has this "issue." eBooks don't have pages, and the reading devices don't yet honor keep-togethers or even commands within divs to display together. Yes, it's frustrating, but at this time, nothing can be done about it other than tweaking the CSS to try to get the captions as close as possible.

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
Hitch is online now   Reply With Quote
Old 10-30-2012, 11:12 AM   #11
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
Question

Quote:
Originally Posted by Hitch View Post
What device/reader are you using to view your images and their captions? From your statement, it does not seem to be ADE?

Hitch
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.)
GraciousMe 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
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


All times are GMT -4. The time now is 02:43 PM.


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