How to...make a caption part of an image.

[rosshalde]

I have some pics that have captions, but I have not found a code that will force the caption to always stay with the image.

Instead, I am making the caption and image one combined image.

I have the standard apple software plus adobe acrobat. (no photoshop). I have no other specialty software.

Here is my current procedure.


1) open Preview and crop photo to desired appearance.
2) copy and paste into Pages
3) Create text box and place under photo where a caption would be
4) export as pdf
5) open in Acrobat and save as jpg
6) go back to Preview and resize again, because the pdf exports a lot of white border

I don't just copy and paste back out of Pages because that is a PNG file and it seems to supply less quality. Am I wrong?

Please tell me there is a much faster way.
I could not get a text box under the image in Preview. It looks like I can add text on a pic but not below like a caption.
My way works, but it is a lot of work for each image.

[DomesticExtremis]

Even the most rudimentary image editing software will allow you
to add text to an existing image, which should reduce the number of steps.

For how to add a caption using html/css - take a look at the wiki.

[rosshalde]

I can add text to an image, but as far as I can see, Preview and iPhoto don't permit me to put the caption under the image, just on it.
I looked at the code, and to be honest, for a total novice, I was a bit confused by it.

[Freehunter]

As to your step 5, saving as jpg. JPEG is a lossy format, it 'throws away' detail to compress the file. You are losing quality right there. Better to save as TIF ,with lossless or no compression, or as PNG which uses lossless compression. Keep that as a master should future changes be needed.

Any working images should be done in TIF or PNG.

The final version used in the book can be PNG, other tools can compress without losing quality but will still probably be bigger than JPEG. JPEG could be used but some quality will be lost, other tools can control the amount of compression and thus quality.

JPEG is good for pictures, the eye will blend over artifacts from compression so not so noticeable. Line drawings and text will suffer from artifacts created during JPEG compression, better to use PNG for those if you only have an image.

Every time you make a change in a JPEG and save it you are reducing the quality as it compresses the file again.

'fraid I don't know Apple so can't suggest other tools. Oh, there is free program, GIMP, with capabilities similar to Photoshop. It is somewhat complicated but I think there is a port for the MAC.

[JSWolf]

One suggestion is to STOP USING PAGES! Use Sigil instead.

[rosshalde]

ok, if i use sigil, how is that helping with the caption issue?
Also, instead of using pages as the epub import, should I just use Text Edit and have Sigil open an html document and do all formatting in Sigil?

[JSWolf]

Originally Posted by rosshalde

ok, if i use sigil, how is that helping with the caption issue?
Also, instead of using pages as the epub import, should I just use Text Edit and have Sigil open an html document and do all formatting in Sigil?

Yes, have Sigil open the HTML file and do your CSS by hand. You will end up with much neater code and chances are it will work better. Plus you won't have the mess that Pages makes of your code. You can easily clean things up and by doing it by hand, you'll learn more and that will help you in the future.

Pages is to ePub as Frontpage is to websites.

[rosshalde]

Should I upload the raw HTML directly after OCR or should I proofread and at least make my paragraphs in something like Text Edit or Pages first?

[theducks]

Originally Posted by rosshalde

Should I upload the raw HTML directly after OCR or should I proofread and at least make my paragraphs in something like Text Edit or Pages first?

I vote for Notepad++ (Windows). It colors tags, similar to what you see in Sigil/Calibre, making code vs body text, easy to distinguish

It has a decent dictionary, that allows Multiple, selectable custom dictionaries (allows a book specific list of exceptions to known languages)
Text editors don't insert their junk into your code.

[JSWolf]

Originally Posted by theducks

I vote for Notepad++ (Windows). It colors tags, similar to what you see in Sigil/Calibre, making code vs body text, easy to distinguish

It has a decent dictionary, that allows Multiple, selectable custom dictionaries (allows a book specific list of exceptions to known languages)
Text editors don't insert their junk into your code.

And after you finish editing the code and the CSS, insert it into Sigil to have Sigil create things like the ToC (NCX) and OPF and insert any images like the cover and so forth. Using both Notepad++ and Sigil will help you make an eBook that's not a code nightmare as all the code will be what you put in and not what some program botched.

[rosshalde]

I took your advice and decided to start a fresh project with a blank CSS and try to code everything myself. I am running into a problem. Sigil and iBook look ok, but the Nook and the Kobo aren't recognizing anything. Everything in just plain old <p>. My entire CSS is ignored even though it looks fine in Sigil and on iBook.n My guess is it is something at the top of my code that I usually don't have to mess with. Here is a short chapter and the CSS. Any direction would be greatly appreciated. Also, am I getting the idea correct about paragraph and how to use classes to alter from the basic paragraph?

code first

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p class="s1">Primer</p>

<div class="stanza">
<p>Here is a book</p>

<p>For all girls and boys,</p>

<p>I hope it will bring them</p>

<p>Many joys.</p>

<p>I hope it will teach them</p>

<p>To use their eyes.</p>

<p>I hope it will make them</p>

<p>Very wise.</p>
</div>

<p class="s2">(To be read to the class by the teacher.)</p>
</body>
</html>

now CSS
p{
text-align:justify;
font-size: 100%;
text-indent: 40px;
}

.s1{
text-align:center;
font-size: 120%;
font-weight: bold;
}
.s2{
font-style:italic;
font-size: 85%;
}
.s3{
font-style: italic;
font-size: 85%;
text-align: center;
}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;

.stanza p {
padding-left: 2em;
text-indent: -2em;
}

[JSWolf]

Your last CSS style has p in it. So you've just overrode your initial p style. So make the last style just .stanza.

[DomesticExtremis]

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
}/*Missing closing brace*/
.stanza p {
padding-left: 2em;
text-indent: -2em;
}

Could be a typo in your post, but if it's in the css, some readers may ignore the whole thing.

ETA: in Sigil, under Tools|Validate style sheets with w3c, the following error is listed:
33 .stanza Parse Error .stanza p { padding-left: 2em; text-indent: -2em; }

[JSWolf]

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;

.stanza p {
padding-left: 2em;
text-indent: -2em;
}

The above is your code. The blow is the fixed code.

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
text-indent: -2em;
}

[rosshalde]

Thank you. I did what you said... that part worked, but now the formatting of the poetry part is not working right. It is making stanzas, but not respecting the last two lines

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
padding-left: 2em;
text-indent: -2em;
}

Lets simplify. If I have just these few lines of code
<div class="stanza">
<p>Awake Miss Goldy could not keep,</p>

<p>On Baby’s bed she fell asleep.</p>

<p>They found her there when home they came</p>

<p>And ate her up. Oh, what a shame!</p>
</div>

with the new css

p{
text-align:justify;
font-size: 100%;
text-indent: 40px;
}

.s1{
text-align:center;
font-size: 120%;
font-weight: bold;
}
.s2{
font-style:italic;
font-size: 85%;
}
.s3{
font-style: italic;
font-size: 85%;
text-align: center;
}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }

.stanza {
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
padding-left: 2em;
text-indent: -2em;
}

will the <p> inside the <div class="stanza"> be treated as the normal<p> or will they be treated as following the <div>. It appears that they follow the <p>. What am I missing here to make the <p> inside the <div class="stanza"> behave differently?