limit caption width to image width

Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.

Peter Parker wrote:

Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.


I suppose this is too elementary. Contain the image and the caption in

a div with the same width as the image.

If the image with caption is to be floated, the div will take the width
of the image without it being actually declared on the div.

Other than that the width of the containing div must be specifically
declared.

If the image width is not known, presumably the image file is being
sourced from a remote location using some sort of server side scripting.
If so each of those scripting programs have a native function to get
the image width (and other size parameters) For example the php function
is getimagesize()

There is nothing wrong getting the image width client side with
javascript except where the client disables javascripting.

Louise

On 2007-05-06, boclair <boclair (AT) bigpond (DOT) net.au> wrote:

Peter Parker wrote:
Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.


I suppose this is too elementary. Contain the image and the caption in
a div with the same width as the image.

If the image with caption is to be floated, the div will take the width
of the image without it being actually declared on the div.

Yes, although in that case the width it takes on will be the maximum of
the image's width and the width of the caption (generally with no line
breaks if enough space is available). This is probably a good thing
though.

Ben C wrote:

On 2007-05-06, boclair <boclair (AT) bigpond (DOT) net.au> wrote:
Peter Parker wrote:
Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.


I suppose this is too elementary. Contain the image and the caption in
a div with the same width as the image.

If the image with caption is to be floated, the div will take the width
of the image without it being actually declared on the div.

Yes, although in that case the width it takes on will be the maximum of
the image's width and the width of the caption (generally with no line
breaks if enough space is available). This is probably a good thing
though.

Yes. However more often than not, the image will need to be bordered in
which case the image needs to display block declared. This is what I had
in mind.

Louise

Scripsit boclair:

I suppose this is too elementary. Contain the image and the
caption in a div with the same width as the image.

If the image with caption is to be floated, the div will take the
width of the image without it being actually declared on the div.

Yes, although in that case the width it takes on will be the maximum
of the image's width and the width of the caption (generally with no
line breaks if enough space is available). This is probably a good
thing though.

Yes. However more often than not, the image will need to be bordered
in which case the image needs to display block declared. This is what
I had in mind.

I don't quite follow. How would bordering affect this? Usually if you want a
border around an image, it's best to edit the image in an image processing
program, adding a border. But in any case, you can set a border for an image
in CSS (or HTML) without setting display: block.

And I think you would still have the problem that for

<div style="float: right">
<img ...><br>
caption text
</div>

the width would be determined by the caption text requirements, not the
image width, when the caption is longer than the image width.

So I think the only reasonable solution is to determine the width of the
image (via server scripting, if the page is more or less dynamic) and set
that width for the block.

I think I found a tricky way though...

<table width="1">
<tr><td><img ...></td></tr>
<tr><td>caption text</td></tr>
</table>

It's too tricky though, and there's no guarantee of success.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2007-05-06, boclair <boclair (AT) bigpond (DOT) net.au> wrote:

Ben C wrote:
On 2007-05-06, boclair <boclair (AT) bigpond (DOT) net.au> wrote:
Peter Parker wrote:
Could someone show me how to limit caption width to image width dynamically
(image width is not known in advance) if that's possible? I was thinking of
using Javascript to get the image width which is then used for caption
width. Is there a better way? Thank you.


I suppose this is too elementary. Contain the image and the caption in
a div with the same width as the image.

If the image with caption is to be floated, the div will take the width
of the image without it being actually declared on the div.

Yes, although in that case the width it takes on will be the maximum of
the image's width and the width of the caption (generally with no line
breaks if enough space is available). This is probably a good thing
though.

Yes. However more often than not, the image will need to be bordered in
which case the image needs to display block declared. This is what I had
in mind.

You get the same effect though.

This:

<float>
<img display: block>
<caption>
</float>

(in pseudo-CSSTML) will come out looking much the same as this:

<float>
<img display: inline>
<br>
<caption>
</float>

with the float taking on the width of the img or the caption whichever
is wider, assuming the available space is wider than either.

On 2007-05-06, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

Scripsit boclair:

I suppose this is too elementary. Contain the image and the
caption in a div with the same width as the image.

If the image with caption is to be floated, the div will take the
width of the image without it being actually declared on the div.

Yes, although in that case the width it takes on will be the maximum
of the image's width and the width of the caption (generally with no
line breaks if enough space is available). This is probably a good
thing though.

Yes. However more often than not, the image will need to be bordered
in which case the image needs to display block declared. This is what
I had in mind.

I don't quite follow. How would bordering affect this? Usually if you want a
border around an image, it's best to edit the image in an image processing
program, adding a border. But in any case, you can set a border for an image
in CSS (or HTML) without setting display: block.

And I think you would still have the problem that for

div style="float: right"
img ...><br
caption text
/div

the width would be determined by the caption text requirements, not the
image width, when the caption is longer than the image width.

I suspect that's desirable though.

So I think the only reasonable solution is to determine the width of the
image (via server scripting, if the page is more or less dynamic) and set
that width for the block.

I think I found a tricky way though...

table width="1"
tr><td><img ...></td></tr
tr><td>caption text</td></tr
/table

It's too tricky though, and there's no guarantee of success.

Yes that will generally work, although if the longest word in the
caption is wider than the image, the table will get that width. So not
strictly what the OP seemed to be asking for, which is that width should
only be determined by the width of the image in all circumstance.

Another approach which does satisfy the literal requirement would be to
make the caption absolutely positioned (perhaps leaving top as auto to
rely on the browser's guess at its static position). That way it will be
taken out of the flow and play no part in the calculation of the float's
width. I didn't suggest this at first though because I think it is not
really a good thing to do in practice. The table cell (image gets min of
image width and width of longest word in caption) is always going to
look better.

Jukka K. Korpela wrote:

Scripsit boclair:


Yes. However more often than not, the image will need to be bordered
in which case the image needs to display block declared. This is what
I had in mind.

I don't quite follow. How would bordering affect this? Usually if you
want a border around an image, it's best to edit the image in an image
processing program, adding a border. But in any case, you can set a
border for an image in CSS (or HTML) without setting display: block.

Again depending. I was thinking along these lines

If the image might be used on a number of pages, declaring a thin css
border provides differentiation between the image and the page
background (e.g. an image with sections shaded close to that of the page
background).

If a css border is used a "display block" declaration to prevent the
descender space being rendered between the image and the bottom border.

The con is css being disabled.

I think that that the adding of image borders server side is certainly
do-able, but manipulation of images on the server on call is expensive
compared to the use of css. But there is the con

Louise