Caption, distance from image

[GraciousMe]

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;}

[theducks]

Originally Posted by GraciousMe

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 )

[Man Eating Duck]

Originally Posted by theducks

.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:

.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

[DiapDealer]

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.

[GraciousMe]

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.

[Man Eating Duck]

Originally Posted by GraciousMe

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:

<h3 title="Figure 1" class="figure"><img alt="" src="../Images/figure_1.jpg"/></h3>

and in the CSS (from theducks' example):

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.

[GraciousMe]

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.

[mrmikel]

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.

[Man Eating Duck]

Originally Posted by GraciousMe

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

[Hitch]

Originally Posted by GraciousMe

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

[GraciousMe]

Originally Posted by Hitch

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