Wikipedia talk:Image markup with HTML
I've (Tarquin) made a suggestion to the tech mailing list which would simplify image markup for floated images. but this comes at a small cost. I'll explain the proposed changes here & people can comment on whether they like this trade-off or now.
Current
Here's what we currently have. For a floating image with a small caption:
<div style="float:right;margin:0 0 1em 1em;">[[Image:image name|alt text]]
''Caption''</div>
With a logner caption, you need to add in the width of the image, to limit the width of the div element. (otherwise it displays as wide as the caption and looks odd). This is the markup for a long caption, 300px for example:
<div style="float:right;margin:0 0 1em 1em;width:300px">[[Image:image name|alt text]]
''Caption''</div>
Proposed
All this involves is adding a CSS class to our stylesheet. For small caption images, we'd write:
<div class="floatright">[[Image:image name|alt text]]
''Caption''</div>
I think this is much simpler. But for wide captions, we'd need to write:
<div class="floatright" style="width:300px">[[Image:image name|alt text]]
''Caption''</div>
Whether this is better, worse, or about the same as before is debatable.
Comments
I think every picture that has a caption should have a width specification, otherwise effects are unpredictable depending on browser, font size etc. Even a slightly overflowing picture box is highly annoying because it invades article space. I also think that the "margin:0 0 1em 1em" is not necessary, it's sufficient to just say "margin:10px" to get a margin of 10 pixels on all sides. Under these circumstances, I don't really see much of a simplification.
I would support this change anyway, if I wouldn't think that current image handling is fairly braindead and should be rewritten to a large extent. After that, DIVs will probably not be directly entered anymore, so I consider minor optimizations in that area of little help. But I won't scream if it gets into our stylesheet regardless. --Eloquence 11:08 24 Jun 2003 (UTC)
Why don't we modify the wiki markup to create the div and apply the style? [[Image:image name|left|alt text]] or something? I think any impure wiki markup is a bad idea. CGS 12:05 24 Jun 2003 (UTC).
Table auto-size
| alt text This is a rather long caption, but thanks to the table tag (replacing the div tag), it does not increase the width of the whole construct! |
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Tables are for tabular data. You can tell this because it is called the table element. Pet peeve. CGS 12:24 24 Jun 2003 (UTC).
I'd also like to see text-align:center in the floatright class. It's not always what's desired, but it can always be overridden by a style="text-align:left" if need be. -- John Owens 12:34 24 Jun 2003 (UTC)
Ideally, we'd have practically no HTML in Wikipedia code. I really like the [[Image:blah|left|alt-text]] idea, since it could be done without any DIVs at all (but gets tricky if a caption is needed). The DIV width hack just seems ugly to me, but I am not sure how it can be worked around. Here's one possibility that may make things simpler:
<div class="floatleft">[[Image:blah|alttext]]<p style="width: 200px;">This is a really long caption which will be restricted to 200px in width</p></div>
That way, the div code can stay the same, and only the paragraph containing the caption need be modified. Even better, perhaps we could define a "caption" class that causes all captions to be displayed in a certain way (small font, emphasized maybe), but again, there's that width problem. I really dunno. All I'm sure of is that I strongly vote against using tables of any kind for this. -- Wapcaplet 13:36 24 Jun 2003 (UTC)