Thread: Figure captions
View Single Post
Old 07-12-2010, 05:27 PM   #3
capidamonte
Not who you think I am...
capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.capidamonte can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
capidamonte's Avatar
 
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
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