Re: Captions

Posted by GregChapman on Apr 01, 2012; 2:17pm
URL: https://support.nabble.com/Captions-tp7418606p7426886.html

Hi Harvey,

Harvey44 wrote

I've tried to figure this out:

<div style="clear:both; float:right; width:410px; font-size:80%; text-align:center; margin:-.8em 90px 1em 2.3em">(caption text)</div>

Ideally, you need to understand "The Box Model" before reading further. See the page on my GregTutor site which explains about boxes in web page construction, and the terms, "block", "in-line" and "normal flow" which all impact on the concepts behind these styling rules.)

div - a generic containing block. (It's just an HTML tag, like a paragraph, table or list, on which you can hang styling instructions).

Style="..." - an attribute of the div element. In this case defining how the div should be rendered by the browser.

float:right: - This box is to be taken out of "normal flow" (See that Box Model page again) and made to move to the right of the box on the page in which it is contained.

clear:both; - By default, when a box is taken out of normal flow, any following boxes are permitted to move up the page and fill any space alongside a floated box. This instruction over-rides that and demands that the content of this box sits below any floated items. ("both", because it is also possible to be specific about boxes that have been floated left or right.)

width:410px; - This box is to be 410px wide!

font-size:80%; - By default, most styling instructions are inherited from those specified for the parent box (i.e. the box in which this one is contained) . In this case the text is to be 80% of that size.

text-align:center; - The text in this box, a "block", is to be centred.

margin:-.8em 90px 1em 2.3em: Specifies in clockwise order, starting from the top, the margins around the box:

-.8em : Top margin. An "em" is a "logical" unit. These are useful because, for example, if the visitor chooses to magnify text the relationship of text to margin size will stay constant. The default margin would be 1em, so this has the effect of making it 80% of the normal 1 line space that it would otherwise have.

90px : Left margin. Pixels are an "absolute" unit. Specifying this ensures the distance stays constant, even if the visitor chooses to magnify the text in his browser.

1em : Bottom Margin. This is the default margin around most boxes. As with the top margin value, because it is a logical unit, it's actual size on screen can vary, depending on the size inherited from the styling intructions of the boxes in which this element is contained.

2.3em : Left Margin. Another margin that will very according to the magnification that the visitor may apply to the  text in his browser.

In addition I am trying to do something much simpler, which I've done often out magazine and I can;t make it work.

Should be much easier to center a caption beneath a centered image but this just doesn't seem to work either:

<img src="http://nabble-support.1.n2.nabble.com/file/n7425909/image.jpg" width="500" class="center single" />
<span style="text-align:center; font-size:80%">(caption text)</span><br/>

For this one you do need a grasp  the box concept and the differences between "inline" and "block". Although an image is, by default, treated as an inline element, the styling rules, for the class "center" say this:

display: block;
margin-left: auto;
margin-right: auto;

which say that when rendering this box, treat it as a block and auto-equalise the margins to either side (i.e. centre it!). Because it is displayed as a block it starts on a new line and fills the space of the block in which it is contained.

(I haven't investigated what effect the class "single" my additionally have on the styling of the image.)

In contrast line:

<span style="text-align:center; font-size:80%">(caption text)</span><br/>

uses the span tag, which is an inline element, centring the text in the middle of a box which may itself be within a line of text has no meaning (You wouldn't think it odd if WORD refused to centre a few words in the middle of a line of text would you? You can only centre blocks of text that end in a carriage return in WORD - and so it is on a web page! You can only centre blocks, not boxes that are in line.)

Try replacing the < span > tag with any tag that is defined as a block and it should work, e.g. a <div>, or <p>. As a block it will start on a new line and will fill  the width of the block in which it is contained - subject to any styling rules you impose on that block.