Re: Captions

Posted by GregChapman on Apr 02, 2012; 8:50am
URL: https://support.nabble.com/Captions-tp7418606p7428781.html

Harvey44 wrote

Center images shouldn't need css right?

Depends what you mean!

When you ask Nabble to center an image it add the code:

class="center"

 to the image code. This is the equivalent of adding:

style="display: block; margin-left: auto; margin-right: auto;"

It is CSS that determines the image is centred, by telling the browser to treat it as a block, rather than inline and automatically equalise the left and right margins. The width available in which to place the image is known.  The width of the image is known. The calculation of the margins is easy.

If you wish to add a centred caption under the image then there is a problem. Unlike an image, text has no predetermined width. It fills the space available before wrapping to the next line. HTML and CSS has no mechanism for determining the width of text based on some nearby image. It might be possible to call a script to determine the width of an image and insert the appropriate width into the code that determines the width available for the following text, but it would mean particular coding techniques would be needed when it came to inserting an image with caption into a page.

Do I have to decide on image size? That would be difficult to do as all
images are different.

The kind of scripting I mention above is beyond my skills, which is why I stuck to the standard images sizes suggested by Nabble's existing facilities. 750, 500 and 250px width images. It's flexible enough for most circumstances and easy to implement, as shown in my post above (where you'll see that apart from width, margin dimensions and how the imaged is to be aligned, all the styling code is common between centred and left and right aligned and captioned images.).