By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Image with credit and caption - an experiment

P: n/a
See
http://pages.prodigy.net/chris_beall...periments.html

I've ended up with what seems like a rather complex structure for what I
thought would be a somewhat simple problem. Even that complex solution
works well only in FireFox (haven't tested Safari...).

Can anyone come up with a better solution, where 'better' means:
- Works as well as the example above, but is simpler.
OR
- Works as well as the example above, but across more browsers.

Chris Beall

Mar 31 '07 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Scripsit Chris Beall:
http://pages.prodigy.net/chris_beall...periments.html

I've ended up with what seems like a rather complex structure for
what I thought would be a somewhat simple problem.
The essential difficulty with the problem is that you apparently wish to set
a maximum width for the caption. Perhaps the reason is that you intend to
use the construct in contexts where the available horizontal width is fairly
small.

Anyway, if you accept setting the width explicitly, rather than maximum
width "inherited", there should be no serious difficulty, unless I'm missing
something. (I use the quotes, because the max-width property is not
inherited, though it may affect the widths of children.)

By the way, on IE 7, the numbered lists on your demo page have "1." as the
number of all items, vertically positioned at the level of the last line of
an item.

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

Apr 1 '07 #2

P: n/a
Jukka K. Korpela wrote:
Scripsit Chris Beall:
>http://pages.prodigy.net/chris_beall...periments.html
I've ended up with what seems like a rather complex structure for
what I thought would be a somewhat simple problem.

The essential difficulty with the problem is that you apparently wish to
set a maximum width for the caption. Perhaps the reason is that you
intend to use the construct in contexts where the available horizontal
width is fairly small.
Jukka,

This relates to a somewhat more general wish: I wish to limit the length
of a text line to about 30em, not just within this structure, but
throughout the site (with some carefully-considered exceptions...). I'm
aware that not everyone agrees with this approach, but I believe it
helps readability under browsing conditions that I believe are common.
I understand that others may believe otherwise and I support their right
to do so.

My experience with this experiment was that the essential difficulty (at
least the one that leaves me least satisfied) is that there is no way to
say:
width: shrink-to-fit
Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term 'table'. Floating the
structure will also cause the shrink-to-fit algorithm to be applied, but
that doesn't meet the objective of allowing the structure to be inline
or centered.
Anyway, if you accept setting the width explicitly, rather than maximum
width "inherited", there should be no serious difficulty, unless I'm
missing something. (I use the quotes, because the max-width property is
not inherited, though it may affect the widths of children.)
'Inherited' was the wrong term for me to use. The style sheet for the
site includes:
p, li {max-width: 30em}
thus (absent an override within the structure) this restriction on
paragraph width is a constraint on the caption within the structure.
By the way, on IE 7, the numbered lists on your demo page have "1." as
the number of all items, vertically positioned at the level of the last
line of an item.
Yes, I know. IE 7 + max-width on li elements = garbage. I've posted
the problem to two MS newsgroups. I'm sure they will fix it Real Soon
Now... [Those who want to try an exercise in frustration should try to
report an IE 7 bug to MS. The possibility seems never to have occurred
to them.]

Chris Beall
Apr 1 '07 #3

P: n/a
Chris Beall wrote:
>
My experience with this experiment was that the essential difficulty (at
least the one that leaves me least satisfied) is that there is no way to
say:
width: shrink-to-fit
Try floating the image and credit using the image size and a padding
half the size of the image? This should do the image and credit...then
all you have to do is the caption.

<div style="float:left; width:256px; padding-left:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>

<div style="float:right; width:256px; padding-right:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>
Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term 'table'. Floating the
structure will also cause the shrink-to-fit algorithm to be applied, but
that doesn't meet the objective of allowing the structure to be inline
or centered.
It seems like you're doing a lot of work trying to find a table solution
without using a table. Is it worth it?
Apr 1 '07 #4

P: n/a
On 2007-04-01, Chris Beall <Ch*********@prodigy.netwrote:
Jukka K. Korpela wrote:
>Scripsit Chris Beall:
>>http://pages.prodigy.net/chris_beall...periments.html
I've ended up with what seems like a rather complex structure for
what I thought would be a somewhat simple problem.

The essential difficulty with the problem is that you apparently wish to
set a maximum width for the caption. Perhaps the reason is that you
intend to use the construct in contexts where the available horizontal
width is fairly small.

Jukka,

This relates to a somewhat more general wish: I wish to limit the length
of a text line to about 30em, not just within this structure, but
throughout the site (with some carefully-considered exceptions...). I'm
aware that not everyone agrees with this approach, but I believe it
helps readability under browsing conditions that I believe are common.
I understand that others may believe otherwise and I support their right
to do so.

My experience with this experiment was that the essential difficulty (at
least the one that leaves me least satisfied) is that there is no way to
say:
width: shrink-to-fit
Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term 'table'.
display: table, as you've discovered, is about the only way to do
centered shrink-to-fit (except for display: inline-block, which would be
perfect, but isn't supported by FF or IE).
Floating the structure will also cause the shrink-to-fit algorithm to
be applied, but that doesn't meet the objective of allowing the
structure to be inline or centered.
Exactly.
Apr 1 '07 #5

P: n/a
zzpat wrote:
Chris Beall wrote:
>>
My experience with this experiment was that the essential difficulty
(at least the one that leaves me least satisfied) is that there is no
way to say:
width: shrink-to-fit

Try floating the image and credit using the image size and a padding
half the size of the image? This should do the image and credit...then
all you have to do is the caption.

<div style="float:left; width:256px; padding-left:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>

<div style="float:right; width:256px; padding-right:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>
zzpat,

Um, there's a missing </divin the above. Without knowing where you
intended it to go, I can't fairly test this version. I am, however,
skeptical that this could produce a structure that can be centered on
the viewport, as required by Objective #6 and as stated below.
>Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term 'table'. Floating the
structure will also cause the shrink-to-fit algorithm to be applied,
but that doesn't meet the objective of allowing the structure to be
inline or centered.

It seems like you're doing a lot of work trying to find a table solution
without using a table. Is it worth it?
As a mental exercise, you bet. May retard the onset of Alzheimer's. In
terms of monetary remuneration, not a chance. I think my Objectives
state a rather common problem; I find it interesting to see what the
optimum way is to solve that problem. 'Optimum', for me, includes
minimizing semantic distortions in the HTML, such as using a table
structure for layout purposes (and, yes, one could argue that I've just
moved the semantic distortion to the CSS, but I'm more comfortable with
that, for some reason). I have no philosophical objection to doing so
if necessary. 'Optimum' also includes reasonable (which I get to
define...) accommodation for audio UAs and I've been led to understand
that using tables for layout can cause them problems.

Regards,
Chris Beall

Apr 2 '07 #6

P: n/a
Scripsit Ben C:
display: table, as you've discovered, is about the only way to do
centered shrink-to-fit
I don't see how setting display: table would be working solution in WWW
authoring. IE ignores it. Using table markup in HTML works much more widely
(and causes justified screams of horror among purists).
(except for display: inline-block, which would
be perfect, but isn't supported by FF or IE).
As I mentioned elsewhere, display: inline-block is partially supported by
IE, though not in a manner that would help here.
>Floating the structure will also cause the shrink-to-fit algorithm to
be applied, but that doesn't meet the objective of allowing the
structure to be inline or centered.

Exactly.
Besides, browsers do not always follow the book, especially since the book
(CSS specification) has changed. A floated element _should_, by the current
book, take the shrink-to-fit width by default, but browsers don't do that
consistently, so the safe option is to use float elements with explicitly
set widths only (or with implied definite width as for images).

As for setting maximum width in general, the following might be reasonable
compromise:

<style type="text/css">
body { max-width: 30em; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
body { width: 30em; }
</style>
<![endif]-->

On IE 6 and older, we get a fixed width of 30em, which is not optimal but
neither is it that bad. On any other browser with more than 1 % of usage, we
get a maximum width of 30em. On a mixed collection of little-used browsers,
we just get the page, with no width or maximum width restriction imposed.

If you also want to have the content centered, then you have a somewhat
different problem. I would take my chances with
body { margin: 0 auto; }
(using a correct doctype to cause "standards mode"), and ignore IE 5 (i.e.,
accept the catastrophe that on IE 5, the content is not centered).

Finally, if you want maximum width and horizontal centering _and_ you want
that on IE 6 too, the practical option is to use a single-cell table with
align="center" and with a suitable width set for the cell (e.g. <td
style="width: 30em">), since for a table cell, the width setting is
effectively max-width. Just stay tuned to having your Purist's license
revoked.

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

Apr 2 '07 #7

P: n/a
On 2007-04-02, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit Ben C:
>display: table, as you've discovered, is about the only way to do
centered shrink-to-fit

I don't see how setting display: table would be working solution in WWW
authoring. IE ignores it.
So I have heard. I assumed the OP knew that, I just wanted to confirm
his statement that there is really no other CSS way besides display:
inline-block and display: table in case he was thinking "but there must
be an another way".
Using table markup in HTML works much more widely
(and causes justified screams of horror among purists).
>(except for display: inline-block, which would
be perfect, but isn't supported by FF or IE).

As I mentioned elsewhere, display: inline-block is partially supported by
IE, though not in a manner that would help here.
Exactly, I believe you said it's shrink-to-fit auto width that it
doesn't do. I think it's better generally not to advise the use of
display: inline-block in IE.
>>Floating the structure will also cause the shrink-to-fit algorithm to
be applied, but that doesn't meet the objective of allowing the
structure to be inline or centered.

Exactly.

Besides, browsers do not always follow the book, especially since the book
(CSS specification) has changed. A floated element _should_, by the current
book, take the shrink-to-fit width by default, but browsers don't do that
consistently, so the safe option is to use float elements with explicitly
set widths only (or with implied definite width as for images).
Is that really a problem in practice though? Which browsers don't do
shrink-to-fit auto widths for floats? [Not a rhetorical question].

[...]
Finally, if you want maximum width and horizontal centering _and_ you want
that on IE 6 too, the practical option is to use a single-cell table with
align="center" and with a suitable width set for the cell (e.g. <td
style="width: 30em">), since for a table cell, the width setting is
effectively max-width.
You mean min-width? In other words, if you set width on a table cell,
you are specifying a minimum width insofar as that the browser will
exceed it if the cell's contents require it.

Actually the way browsers work out column widths is more complicated but
it's not necessary to go into that here.

In practice in this case since the width is 30em it's unlikely to make
much difference if it consists of text and there are no long images. If
the table cell contains an inline image wider than 30em, the cell will
be extended. But body or any block box with width: 30em or max-width:
30em will be overflowed instead.
Apr 2 '07 #8

P: n/a
Scripsit Ben C:
Is that really a problem in practice though? Which browsers don't do
shrink-to-fit auto widths for floats? [Not a rhetorical question].
I haven't checked the situation recently. I have just written down "don't
rely on that", after some observations. It may depend on many things like
the context and on what's inside the floated element.
>- - since for a table
cell, the width setting is effectively max-width.

You mean min-width?
No, I mean effectively max-width. Technically, width for td is suggested
minimum width. When there is no width set for the table and there is nothing
in the cell that absolutely requires more width and other columns have no
requirements, that width will be used. When the available space is narrower,
the width of the entire table is normally adapted to it, even when this
means overriding the cell width settings. This, in effect, makes the width a
maximum width.
Actually the way browsers work out column widths is more complicated
but it's not necessary to go into that here.
Indeed, since for our purposes, we can focus on single-cell tables (with
table-layout defaulted).

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

Apr 2 '07 #9

P: n/a
Ben C wrote:
>
Which browsers don't do
shrink-to-fit auto widths for floats?
The only one that comes immediately to mind is Mac IE. It is a dead
browser, though, so as long as the results are still usable when
shrink-wrapping doesn't happen, feel free to ignore that browser.

--
Berg
Apr 2 '07 #10

P: n/a
On 2007-04-02, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit Ben C:
[...]
>You mean min-width?

No, I mean effectively max-width. Technically, width for td is suggested
minimum width. When there is no width set for the table and there is nothing
in the cell that absolutely requires more width and other columns have no
requirements, that width will be used. When the available space is narrower,
the width of the entire table is normally adapted to it, even when this
means overriding the cell width settings. This, in effect, makes the width a
maximum width.
Well, I suppose so... yes it's true that a styled width on the whole
table generally trumps the styled widths on individual cells, so in that
context it's a maximum width.

I don't agree that it's technically a suggested minimum width though.
It's a suggested width, and in table-layout: auto most browsers will aim
to hit or get close to that width subject to satisfying all the other
requirements: any other widths and percentage widths the author may have
asked for, which may be inconsistent; minimum content widths; and
available width for the whole table.
Apr 2 '07 #11

P: n/a
Chris Beall wrote:
>
As a mental exercise, you bet. May retard the onset of Alzheimer's. In
terms of monetary remuneration, not a chance. I think my Objectives
state a rather common problem; I find it interesting to see what the
optimum way is to solve that problem. 'Optimum', for me, includes
minimizing semantic distortions in the HTML, such as using a table
structure for layout purposes (and, yes, one could argue that I've just
moved the semantic distortion to the CSS, but I'm more comfortable with
that, for some reason). I have no philosophical objection to doing so
if necessary. 'Optimum' also includes reasonable (which I get to
define...) accommodation for audio UAs and I've been led to understand
that using tables for layout can cause them problems.
I started working on it and it's a bit harder than I thought.
My version uses floats but has two problems. The image and credit
floats to the side, not the center. Otherwise, I think everything else
works, so maybe you can check it out and let me know what else isn't
working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=us-ascii" http-equiv="content-type" />
<title>img_credit_caption</title>

<style type="text/css">
/*<![CDATA[*/
..setup {
clear : both;
padding-top : 1em;
}
..credit {
float : right;
text-align : right;
font-style: italic;
padding-bottom: 1em;
font-size : .8em;
}
..caption {
clear : both;
text-align : left;
border: solid black 1px;
padding : .5em;
width : 30em;
}
..setup p {
font-size : .9em;
}
..image {
width : 100px;
height : 100px;
border : 1px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<div class="setup">
<h1>Center</h1>
<div style="margin: auto; width:100px;">
<div class="image">&nbsp;</div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="margin: auto;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</div>
<h1>Floating Image Right:</h1>
<div class="setup" style="width:100px; float:right;">
<div class="image">&nbsp;</div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="float:right;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</div>
<div class="setup" style="float:left; width:100px">
<h1>Floating Image Left:</h1>
<div class="image">&nbsp;</div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="float:left;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</body>
</html>

The image "width" is defined in .image (instead of using real images)
and the width of that amount must be changed in each div.

<div class="setup" style="float:left; width:100px">

I'll toy with it again when I get more time.
Apr 2 '07 #12

This discussion thread is closed

Replies have been disabled for this discussion.