(originally posted to tech list, but replying here because I think it's more on-topic here)
Steve Bennett wrote:
Hi all, There's a bot substituting {{clear}} with the equivalent HTML: <div style="clear: both"></div>. There are several reasons I can think of why this is a bad idea:
Myself, I never understood the point in it at all. Why do you ever want to clear floating elements? It creates ugly stretches of empty space. If you feel that you need it in some particular situation, then surely that is an indication that the floating elements are positioned badly, and using "clear:both" only adds to it by also positioning the section headers badly.
If there are too many images on the page, surely the page would look better if they were turned into a gallery or removed entirely, instead of stacking floating elements left and right.
Timwi
On 6/13/06, Timwi timwi@gmx.net wrote:
(originally posted to tech list, but replying here because I think it's more on-topic here)
Steve Bennett wrote:
Hi all, There's a bot substituting {{clear}} with the equivalent HTML: <div style="clear: both"></div>. There are several reasons I can think of why this is a bad idea:
Myself, I never understood the point in it at all. Why do you ever want to clear floating elements? It creates ugly stretches of empty space. If you feel that you need it in some particular situation, then surely that is an indication that the floating elements are positioned badly, and using "clear:both" only adds to it by also positioning the section headers badly.
If there are too many images on the page, surely the page would look better if they were turned into a gallery or removed entirely, instead of stacking floating elements left and right.
It's quite useful on templates, since you can use a combination of "clear" and <noinclude> to add usage notes directly to the template page. If "clear" isn't used and the notes contain an example use of the template (this tends to come up with infoboxes), the example (which is presumably "float: right") will overlap with the actual rendered template.
(This is, admittedly, a rather obscure example.)
On 6/13/06, Kirill Lokshin kirill.lokshin@gmail.com wrote:
It's quite useful on templates, since you can use a combination of "clear" and <noinclude> to add usage notes directly to the template page. If "clear" isn't used and the notes contain an example use of the template (this tends to come up with infoboxes), the example (which is presumably "float: right") will overlap with the actual rendered template.
(This is, admittedly, a rather obscure example.)
There are plenty of less obscure ones. Here's one: http://en.wikipedia.org/wiki/Golden_ratio
At the end of the section "Aesthetic uses", the {{-}} prevents the large image hanging down into the next section, overlapping the section title line. And it doesn't produce a huge amount of excess space, either.
FWIW, it also comes in handy for WP:FPC, where you can be sure of keeping any images from the previous section from hanging over into the next section.
I would probably use it less if it wasn't for the ugly way images tend to cut off that line.
Steve
On 6/13/06, Timwi timwi@gmx.net wrote:
Myself, I never understood the point in it at all. Why do you ever want to clear floating elements? It creates ugly stretches of empty space. If you feel that you need it in some particular situation, then surely that is an indication that the floating elements are positioned badly, and using "clear:both" only adds to it by also positioning the section headers badly.
I use it frequently. The "ugly stretches of empty space" are often better than images crossing headings, images piling up on each other etc. And hell, that empty space might just inspire someone to fill it in :)
If there are too many images on the page, surely the page would look better if they were turned into a gallery or removed entirely, instead of stacking floating elements left and right.
As far as layout goes, to me an image gallery is a total abdication: "There's some text up there. There are some images down here". Images carefully chosen and well spaced out and laid out throughout the text is vastly preferable. Some principles I tend to follow, which obviously conflict:
- No images on the same level as a heading - Don't start paragraphs with images on the left - Alternate images on the left and right sides - Don't centre images except for large panoramas - Make high-quality, important images, bigger. Make diagrams smaller. - Make all image widths multiples of 50px. - Attempt to align images vertically. - Place images close to the most relevant text. - Start the article with a large (300px) image on the right hand side.
I would love some formal guidelines for the layout of images. Hell, some more formal guidelines for layout in general wouldn't go astray.
Steve
On 6/14/06, Steve Bennett stevagewp@gmail.com wrote:
As far as layout goes, to me an image gallery is a total abdication: "There's some text up there. There are some images down here". Images carefully chosen and well spaced out and laid out throughout the text is vastly preferable. Some principles I tend to follow, which obviously conflict:
- No images on the same level as a heading
- Don't start paragraphs with images on the left
- Alternate images on the left and right sides
- Don't centre images except for large panoramas
- Make high-quality, important images, bigger. Make diagrams smaller.
- Make all image widths multiples of 50px.
- Attempt to align images vertically.
- Place images close to the most relevant text.
- Start the article with a large (300px) image on the right hand side.
I would love some formal guidelines for the layout of images. Hell, some more formal guidelines for layout in general wouldn't go astray.
[[Wikipedia:Manual of Style/Images]]?
On 6/14/06, Mark Wagner carnildo@gmail.com wrote:
[[Wikipedia:Manual of Style/Images]]?
Pity it doesn't exist :(
Ok I have updated the text in the MoS - it didn't have much to say beyond the rather outdated picture tutorial. The MoS is supposed to offer guidance after all, not leave the door wide open...
Steve