Page MenuHomePhabricator

Left-floated images should stack horizontally
Closed, DeclinedPublic

Description

Author: robertks

Description:
A section of the images tutorial (see link in attached URL) that provides for alignment of images using
the "CSS method" stopped working recently. Previously, the images arranged using this method lined up
in a horizontal row and wrapped on the page. Now, they are arranged in a single vertical column.


Version: 1.9.x
Severity: enhancement
URL: http://en.wikipedia.org/wiki/Wikipedia_talk:Picture_tutorial#Yikes.21__CSS_method_broken_as_of_December_5.2C_2006

Details

Reference
bz8170

Event Timeline

bzimport raised the priority of this task from to Lowest.Nov 21 2014, 9:31 PM
bzimport set Reference to bz8170.
bzimport added a subscriber: Unknown Object (MLST).

This is an effect of r17986: (bug 6016) Left-aligned images should stack
vertically, like right-aligned images, not horizontally.

robertks wrote:

Aha. I have a feeling that 6016 was misreported as a bug when it was, in fact, a feature, and its expression was critical to that functionality of
image display in Wikipedia.

Definitely not a feature. If you want to stack images horizontally, you
shouldn't float them... ?

ayg wrote:

Well, let's see. First of all, this is a question of what the default |left|
should do. Either way, you can add manual HTML to permit either way of
stacking: to get them to align vertically, add <div style="clear: left;"></div>
in between in each image, and to get them to align horizontally, wrap each image
in <div style="float: left;">...</div>. (They have to be floated left, Brion,
because they're all wrapped in divs. Is there some other way to get divs to
stack horizontally?) The question is, which behavior should be default, and why?

Now, let's look at the issue reported here. Quite simply, we have a tag for
this: <gallery>. The CSS method appears to be obsolete as far as I can see.
<gallery> has the added benefit of adding semantic markup, so galleries can be
styled separately from random left-floated images. It's also more concise and
readable.

On the other hand, right-floated images do certainly stack vertically. There's
much to be said for consistency, and the resulting confusion of someone was
probably why bug 6016 was filed in the first place. I would certainly expect
default behavior for right and left floats to be identical.

So: what, other than slight and temporary ugliness on a few old pages that were
never migrated to <gallery> (Wikipedia isn't famed for its brilliant page design
in any case), is to be gained by going back to the old behavior? Are there any
other reasons why you'd want to stack images horizontally than to make a
gallery? Is the <gallery> tag deficient somehow?

robertks wrote:

A vociferous yes to the last question; the gallery tag is deficient in numerous important ways, and many pages specifically opt for thumbnails instead of
galleries for aesthetic control reasons. Compare, for example, [http://en.wikipedia.org/w/index.php?title=Jeopardy%21_set_evolution&oldid=92628658 here]
and [http://en.wikipedia.org/w/index.php?title=Jeopardy%21_set_evolution&oldid=92642725 here]. The first version was an attempt by a user to switch the
image display to galleries after r17986 damaged the CSS behavior. The second version has restored the original display method using the HTML hack you have
kindly provided. In the gallery version, the thumbnails are too small to make out detail without enlarging the pictures, whereas in the CSS version you
don't need to enlarge any of the pictures to see detail. Gallery provides to option for adjusting the size of thumbnails. Second, the pictures are
designed to align in a horiztonal row on a 1600 × 1200 monitor display resolution, and align on two rows (i.e., form a 2 × 2 grid) at 1024 × 768. Galleries
have no provision for wrapping images to a browser window.

I have a feeling that the CSS "fixed" in r17968 was designed to be--no pun in intended--asymmetrical between the left and right especially for the purpose
of the CSS method described in this [http://en.wikipedia.org/w/index.php?title=Wikipedia:Picture_tutorial&oldid=92408551#Wiki_markup_and_CSS section] (which
has since been removed, but perhaps it would be better, if my cries for a reversion of r17968 go unheeded, to rewrite the section to mention the HTML hack
option?).

PS to Brion above: You and I know each other. I was the corpse in "Dr. Sexyknickers". Fancy meeting you here!

robertks wrote:

That should read, "Gallery provides NO option for adjusting the size of the thumbnails"...

I'm pretty sure the old behavior is not intentional; floats in general
are really fragile and icky, so unexpected side-effects are... frequent.

Probably the sensible thing would be to go ahead and improve gallery...

  • add some size override options for the thumbs it uses
  • add dynamic resizability (column wrap-around etc)

[Side note on resolutions: pretty much nothing looks good in a browser at
1600 pixels; I usually size my browsers to fit two windows side-by-side
on a monitor this size. Of course then you run into the problem that
everyone designs their sites for 1024-pixel-wide screens and you have
sidebars spilling off the edge...]

PS to Robert: Oh *man* that was bad. ;) I've still got it lying around;
if you like I can burn you a DVD. Drop me a line off-list.

robchur wrote:

*gives Brion a very funny look*

jepe wrote:

For nl.wikipedia I have made a new class, placed in MediaWiki:Common.css.

div.afbnaastelkaar div.floatleft,
div.afbnaastelkaar table.floatleft,
div.afbnaastelkaar div.tleft
{ clear:none; }

When wrapping left-aligned images in a div with this class, the images are
placed next to each other, like the behaviour before the bug fix.
(afbnaastelkaar = images next to each other)

circeus wrote:

The problem is that there are about as much pages that break from the "bug"
(because people wants it to work so) as there are that breaks from the "feature"
(because they expected to work it the same way as the right floats.)

Maybe JePe's solution is best.

budlight wrote:

It seems to me it should be reverted until there are appropriate features in the
gallery.

ayg wrote:

There has been no convincing reason given to do this other than backward compatibility, and presumably that's no longer much of an issue after eleven months. Closing WONTFIX.