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 07-12-2010, 02:40 PM   #1
amoroso
Groupie
amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.
 
amoroso's Avatar
 
Posts: 181
Karma: 1004070
Join Date: Jul 2010
Location: Italy
Device: Cybook Opus, Kindle
Figure captions

Based also on what I read here, I put together some code for adding simple, minimal, good looking figure captions. Both the figure and caption should be centered, with italic caption text slightly smaller than default. I would like this code to be generic, i.e. likely to work correctly across many reading systems. Here is the CSS code in the stylesheet:
Quote:
div.figure {text-align: center; page-break-inside: avoid;}
img.figure-image {page-break-after: avoid;}
p.figure-caption {text-align: center; text-indent: 0; font-style: italic; font-size: 80%; page-break-before: avoid;}
And here is a typical HTML usage:
Quote:
<div class="figure">
<img class="figure-image" src="../Images/my-image.jpg" />
<p class="figure-caption">This is the caption text.</p>
</div>
Is this code generic? What other useful styling may be added? Is it better to represent the caption text as <P> or <DIV>?
amoroso is offline   Reply With Quote
Old 07-12-2010, 04:48 PM   #2
crutledge
eBook FANatic
crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.
 
crutledge's Avatar
 
Posts: 14,761
Karma: 13385000
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
Very nice. Should work well in Epub. I've never tried "avoid", but I see what you are trying to do. I also avoid () having the image on one page and the caption on the next. I solved the problem by incorporating the caption into the image.

Mobi does not recognize the CSS. Nor does it do tables well. I also avoid this by converting tables to images.

I like your thinking.

Charlie
crutledge is offline   Reply With Quote
Old 07-12-2010, 05:27 PM   #3
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 343
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
In my opinion, <div>s are overused by everyone. They're particularly overused by computer-generated code, because it's a simple hack.

I get why you've done it here, but classes and ids would work just as well, and would simplify your markup.

For example:

Code:
<img class="figure" id="figure_01" src="../Images/my-image.jpg" />
<p class="figure" id="figure_01_caption">This is the caption text.</p>
With this you can apply a general center style to the class "figure" and specific styles to either img or p tags with the "figure" class. Oh, text-align: center doesn't apply to images, you have to tweak the margins. And if you need to do something to one figure individually, you could.

Code:
img.figure {margin-left:auto; margin-right:auto; page-break-after: avoid;}
p.figure {text-align: center; text-indent: 0; font-style: italic; font-size: 80%; page-break-before: avoid;}
Simpler, direct and less structurally complex. Plus, you get the bonus of being able to directly link to the ids in, say, a table of images. Or you could cut them out completely, and lose no functionality from your original example. The only reason I can see for using a <div> is that you might want to box and/or float the whole thing. But you could do it without a <div> anyway.

An even simpler structure, using generated content and adding the required alt tag:

Code:
<img class="figure" alt="This is the caption text." src="../Images/my-image.jpg" />
The CSS is somewhat more complex, sorta, but you only have to edit in one place, of course:
Code:
img.figure {margin-left:auto; margin-right:auto;}
img.figure:after {
content: attr(alt);
display: block;
page-break-before: avoid;
text-align: center;
text-indent: 0;
font-style: italic;
font-size: 80%; }
BTW, nothing is going to be generally applicable as there are no standards for markup and CSS that are shared between publishers. In fact, I'm willing to guess that most individual publishers aren't even particularly strict about having their own set of standards.

$0.02

EDIT: the generated content should work -- but it isn't working for me in Firefox. Anyone with an idea as to why? Typo? Syntax?

Last edited by capidamonte; 07-12-2010 at 05:49 PM.
capidamonte is offline   Reply With Quote
Old 07-13-2010, 04:38 AM   #4
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: 5,902
Karma: 4269879
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by capidamonte View Post
In my opinion, <div>s are overused by everyone. They're particularly overused by computer-generated code, because it's a simple hack.

I get why you've done it here, but classes and ids would work just as well, and would simplify your markup.
In this particular case, I think the use of a <div> is justified, as it marks up some structural element that's going to be handled as a block. I would "simplify" the styling the other way, though:

CSS (no need to use classes for things inside the figure):

Code:
div.figure {text-align: center; font-style: italic; font-size: 80%; page-break-inside: avoid;}
/* these two lines should not be needed,
   except to override other styles */
div.figure img {page-break-after: avoid;}
div.figure p {text-align: center; text-indent: 0; page-break-before: avoid;}
XHTML (an id is always useful for references):

Code:
<div class="figure" id="figure-01">
<img src="../Images/my-image.jpg" />
<p>This is the caption text.</p>
</div>
I'd add some "margin: 1em 0;" to the div.figure, too, and maybe some top margin to the p inside it.

Quote:
Oh, text-align: center doesn't apply to images, you have to tweak the margins.
No, but it works fine if it's inside a <div> ADE, for instance, does not support "auto" margins. A <div> also lets you use the page-break-inside, which would work whether the caption comes below or above the image.

Code:
An even simpler structure, using generated content and adding the required alt tag:
But I think the ePUB standard does not support generated content, and styling the alt tag would be a nightmare (say you need bold type, images inside the caption, multiple paragraphs, superscripts...)
Jellby is offline   Reply With Quote
Old 07-13-2010, 07:31 AM   #5
amoroso
Groupie
amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.amoroso ought to be getting tired of karma fortunes by now.
 
amoroso's Avatar
 
Posts: 181
Karma: 1004070
Join Date: Jul 2010
Location: Italy
Device: Cybook Opus, Kindle
Quote:
Originally Posted by crutledge View Post
I've never tried "avoid", but I see what you are trying to do.
I was actually unsure about that, but left the code anyway. I read here that few reading systems support `avoid'. The suggested solution is to start a new file with the image and caption, which reading systems process by putting them at the beginning of a new page.

Quote:
Originally Posted by crutledge View Post
I also avoid () having the image on one page and the caption on the next. I solved the problem by incorporating the caption into the image.
How do you incorporate the caption into the image? Do you put the caption into the image as graphics?

Quote:
Originally Posted by crutledge View Post
Mobi does not recognize the CSS.
I currently focus on ePub.
amoroso is offline   Reply With Quote
Old 07-13-2010, 10:09 AM   #6
crutledge
eBook FANatic
crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.crutledge ought to be getting tired of karma fortunes by now.
 
crutledge's Avatar
 
Posts: 14,761
Karma: 13385000
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
Quote:
Originally Posted by amoroso View Post
How do you incorporate the caption into the image? Do you put the caption into the image as graphics?
Yep. I use GIMP and adjust the graphic size, move it into a new blank image large enough to contain the original image and the caption, add the caption with selected font and size and save the image with the original name. It almost takes longer to tell than to do.

Learning to use GIMP took a while as graphic folks have there own vocabulary, but there are good books on GIMP. And It's FREE,

Either way, have fun.
crutledge is offline   Reply With Quote
Old 07-13-2010, 02:29 PM   #7
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 343
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
@Jellby: pretty elegant. I get the <div> thing as I said.

I also get the compromises you're suggesting for ADE and ePub. So, practical. After this many years, though, that we're still making compromises like this makes me sad.

Still, sick of <div>s. Between <div>s and <span>s, cleaning up badly formatted text is frustrating. It's like people have never heard of a single other tag than <p>, <i> and <b>.
capidamonte 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
Can't figure this out, HELP! chilady1 PDF 1 09-26-2010 12:13 AM
captions and images together detede Apple Devices 11 06-14-2010 09:00 PM
I'm Too Stupid To Figure It Out On My Own... tippit78 HanLin eBook 3 03-26-2010 05:32 AM
Another person trying to figure it all out tmoody Introduce Yourself 10 07-27-2009 01:09 PM
only 3 weeks to figure this out... undertodetsy Sony Reader 10 02-01-2008 09:32 AM


All times are GMT -4. The time now is 05:47 PM.


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