26.10.2011 13:08, Philip TAYLOR (Webmaster, Ret'd) wrote:
I am looking for a technique that will allow me
to generate a <DIV>, the width of which is the
width of its widest non-shrinkable immediate child
element; the DIV will always be floated.
[...]
The image has a natural width, which for most
images will be wider than the width of (say)
"party" in the caption that follows. But the following
paragraph is "shrinkable", in the sense that it has no
intrinsic width and could be as narrow as the longest
word therein (i.e., "party"). So I would like the text
in the caption paragraph to be forced to wrap to the width
of the image.
Most approaches (like just floating) tend to make the element as wide as
needed for the paragraph presented on one line if possible. That's
hardly suitable, and it's rather natural to want to let the image width
restrict the text width (unless the image width is fairly small).
And it seems that a table in HTML is the only fairly safe way of
achieving that.
> I do not want to use tables for reasons of
accessibility.
The impact of tables on accessibility has been greatly exaggerated,
especially in the case of simple table. In this case, it would be a
matter of a very simple table: a caption, one row, consisting of one
element. The magic is that the caption width will be set according to
the cell width, and there the cell contains just the image. You still
need CSS if you wish to make the caption text left-aligned (instead of
centered), for example.
So far, my experiments and research have drawn a blank;
even Jukka's otherwise most helpful page [1] does not
seem to address this desideratum.
[...]
[1] http://www.cs.tut.fi/~jkorpela/www/captions.html
The page mentions the single-cell table approach though not very
emphatically.
The approach can be simulated in CSS. The main problem with this is that
the properties needed are not universally supported; in particular old
versions of IE would be a problem.
<style>
.figure { display: table; }
.figure img { display: table-cell; }
.figcaption { display: table-caption; caption-side: bottom; }
</style>
<div class=figure>
<img src=test.png alt="(test image)">
<div class=figcaption>Now is the time for all good men to come to the
aid of the party</div>
</div>
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
