New subject: Image code (was: some new CSS styles for images)

23 Jun 2003

I'd like to add some CSS classes to our stylesheets, based on the 
popular image layouts listed on this page: 
http://www.wikipedia.org/wiki/Wikipedia%3AImage_markup_gallery

For example, instead of this:
------------
<div style="float:right;margin:0 0 1em 1em;">[[Image:image name|alt
text]]

''Caption''</div>
------------

we could write this:

---------------
<div class="floatright">[[Image:image name|alt text]]

''Caption''</div>
------------------

and the style rules would be in our stylesheet as:

div.floatright { float:right;margin:0 0 1em 1em; }
div.floatright p { font-style: italic; }

Advantages:

1. easier to type for contributors
2. less "evil" code in the wiki text. It's easier for the average reader 
to understand what the "evil" code does.
3. we have built-in formatting for captions which is applied 
consistently across all pages
4. when we switch to a markup such as: "{{floatright}}[[Image:foo]]", 
the css is already in place and the way rendered pages look will not change.
5. we can easily choose to apply borders to all our images, or a soft 
background color.

I propose to add:
1. float right, as above
2. float left
3. centered block
4. "gallery", see the example in the attached document