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
tarquin-
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]]
Then would you have to write
<div class="floatright" style="width:300px;">
to get the pixel width? This is important for preventing the caption from expanding the floating framge. And the resulting code seems more complex than before because you now need two attributes. What's with the 0 0 1em 1em anyway? margin:10px works fine.
Regards,
Erik
Erik Moeller wrote:
Then would you have to write
<div class="floatright" style="width:300px;">
to get the pixel width? This is important for preventing the caption from expanding the floating frame.
write shorter captions?
What's with the 0 0 1em 1em anyway? margin:10px works fine.
I don't know. I copied the style from the recommended markup on the Image Use Policy page.
tarquin-
Erik Moeller wrote:
Then would you have to write
<div class="floatright" style="width:300px;">
to get the pixel width? This is important for preventing the caption from expanding the floating frame.
write shorter captions?
Hardly an option, since you don't even know how wide it can be, and results are going to vary under different configurations. Sorry, I would suggest not to use the CSS at this time. I do encourage you to work on a redesign of the image handling code, though.
Regards,
Erik
Erik Moeller wrote:
tarquin-
write shorter captions?
Hardly an option, since you don't even know how wide it can be, and results are going to vary under different configurations. Sorry, I would suggest not to use the CSS at this time. I do encourage you to work on a redesign of the image handling code, though.
How about "width=1"? Works for tables (the table gets resized by the image). Is this true for <div> as well?
I don't think we should just hack some special image code; maybe Lee's wiki-tables are the answer. And, if you want special code, there's always my "Nupedia thumbnail preview" code ;-)
Magnus
On Mon, 23 Jun 2003 21:20:29 +0200, Magnus Manske magnus.manske@web.de gave utterance to the following:
Erik Moeller wrote:
tarquin-
write shorter captions?
Hardly an option, since you don't even know how wide it can be, and results are going to vary under different configurations. Sorry, I would
suggest not to use the CSS at this time. I do encourage you to work on a
redesign of the image handling code, though.
How about "width=1"? Works for tables (the table gets resized by the image). Is this true for <div> as well?
No - that ought to cause overlap of article text and image, as the image overflows its container. (assuming you mean width:1px - the = is html rather than css, and units are mandatory for valid css on nonzero values.
Erik Moeller wrote:
write shorter captions?
Hardly an option, since you don't even know how wide it can be, and results are going to vary under different configurations. Sorry, I would suggest not to use the CSS at this time. I do encourage you to work on a redesign of the image handling code, though.
That is beyond my current skills. I don't know any PHP. I learn languages fast, but on my platform (Win98) I can't run the Wikipedia script to play with it & teach myself how it works. I plan on installing Linux but I need to clean up my HD and make some partitions.
Quote from [[Wikipedia:Image use policy]] --
"Markup for images is quite complicated."
This suggests something must be done.
And:
"If your caption is longer than a few words, you may need to explicitly set the |div| width."
I really think that if a caption is more than a few words, writers should consider either: * reintegrating the text into the page somehow * centering the image so the caption is read as part of the flow
I don't know what proportion of images need the width setting and what proportion don't, so I don't know how good a trade-off this is. I don't think that this:
<div class="floatright" style="width:300px;">
is a *huge* complication -- in fact, it is rather clear which part is *standard*, and which part is specific to *this* image.
How about we ask at the village pump or the image use page and see what people at large find easiest? I don't think better image markup will be happening for some time, and this seems to me to be a good "halfway house".
Erik Moeller wrote:
I do encourage you to work on a redesign of the image handling code, though.
dumb question: where is the image handling code (I've done a full-text search of the scripts for "src" and "img", no joy)
On 23 Jun 2003 17:39:00 +0200, Erik Moeller erik_moeller@gmx.de gave utterance to the following:
tarquin-
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]]
Then would you have to write
<div class="floatright" style="width:300px;">
to get the pixel width? This is important for preventing the caption from
expanding the floating framge.
You would indeed, because any browsers which follow CSS1 or CSS2 rather than CSS2.1 (the latter was only formalized in February this year) ought to render a floated div of unspecified width as 100% wide rather than "shrink- wrapping" it. If you float the image directly it will shrink-wrap, but then there is no way to include the caption.
Do we have a database table of image details? If do, this ought to contain height and width information, which would allow php to automatically insert the width as it writes the image statement. (You would probably need to write a perl script robot to work its way through the current image stock generating such a table, and then modify the upload script to keep it up to date for new images.)
What's with the 0 0 1em
1em anyway? margin:10px works fine.
That means Top and Right margins of zero, bottom and left of 1x the user's line-height. A lack of right margin is more efficient and looks better
Regards,
Erik _______________________________________________ Wikitech-l mailing list Wikitech-l@wikipedia.org http://mail.wikipedia.org/mailman/listinfo/wikitech-l
wikitech-l@lists.wikimedia.org