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.