Page MenuHomePhabricator

Refactor thumbnail styles (drop unsemantic names, and rewrite magnify rules in scope of thumbnails)
Closed, DuplicatePublic

Description

These classes are used to position thumbnails left, right or center respectively but these class names make no sense on mobile and are not helpful to our skin system in general - a thumbnail should always be centered on a 320px screen, and a floatleft class may look better floated right on a theoretical skin with text aligned right.

Let's replace these class names with more semantic ones or drop their usage altogether.

It's not clear from the stylesheet how the magnify class relates to thumbnails. It should be rewritten in terms of the parent thumbnail class and we should consider moving it to the parser if it is not being copied across to Parsoid.

Acceptance criteria

  • https://gerrit.wikimedia.org/r/c/mediawiki/core/+/647333 merged
  • The floatleft, floatright, tright and tleft are replaced with more meaningful classes
  • The magnify class is more tightly coupled to the elements that can use it by using a meaningful selector e.g. thumb__magnify instead of .magnify

Note These classes are widely in use inside wiki content and templates

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson changed Security from none to None.
Jdlrobson added a subscriber: Jdlrobson.

This thread [1] has some interesting thoughts on that subject. In a nutshell describe the value of the content not the value of the presentation. How would center be interpreted usefully on an Apple watch...?

[1] http://stackoverflow.com/questions/6222731/should-css-class-names-like-floatleft-that-directly-describe-the-attached-styl

Danny_B triaged this task as Medium priority.Jan 23 2016, 12:30 AM
Danny_B added a subscriber: Danny_B.

These are being used in the wild now, FYI, though I generally agree with the intent of the ticket.

Krinkle renamed this task from Kill floatleft, center and other unsemantic class names to Remove css classes floatleft, center, and other unsemantic names.Jan 10 2019, 7:05 PM
Aklapper added a subscriber: Omar_Ghrida.

@Omar_Ghrida: I don't see what this has to do with Front-end-Standards-Group at all - this sounds like it's only about the MW Core skin architecture instead.

Restricted Application added a subscriber: alaa. · View Herald TranscriptDec 3 2020, 2:26 PM
Jdlrobson renamed this task from Remove css classes floatleft, center, and other unsemantic names to Refactor thumbnail styles (drop unsemantic names, and rewrite magnify rules in scope of thumbnails).Mar 29 2021, 9:17 PM
Jdlrobson updated the task description. (Show Details)
Reedy renamed this task from Refactor thumbnail styles (drop unsemantic names, and rewrite magnify rules in scope of thumbnails) to Refactor thumbnail styles (drop unsemantic names, and rewrite magnify rules in scope of thumbnails).Mar 29 2021, 9:19 PM

The floatleft, floatright, tright and tleft are replaced with more meaningful classes

Following on from the other, more-recent, task because I thought about it marginally more, I think what this is saying is that you'd rather see e.g. mw-image-left, mw-image-right, mw-image-thumb-left, and mw-image-thumb-right (and/or center as mw-image-centered as discussed in the other task). Going that direction seems reasonable. I am not sure if all 4 are necessary, so that is another consideration. (I think they are thinking about how images work.)

I think truly semantic names are not feasible, and it is not obvious to me what those names look like anyway that ultimately works for the users. Users expect to be able to have some control over layout (on resolutions where layout can be reasonably controlled). The fundamental issue is that users run out of space if you assume images that are all aligned to one side or the other (i.e. the images push all the way to the bottom of the page and often out of the section in which they are most relevant). I guess you could ask them to put more in galleries and less floating stuff, or just less images total, but then you get the 'don't dictate what I put in my wikipage' response. :^)

I think it's more or less fine if resolutions which can't support content left/right for whatever reason do not do so. Minerva and Timeless today both have a media query that takes care of presenting an image without evil content creeping up around it on the sides, as alluded to. From what I can tell, no-one bats an eye that the classes used beneath the hood seem to indicate a preference. It may be lying to developers, but I think there's nothing that can be done about that given user expectation. Beyond that, skins which can support alignment outside the main content panel (as in at least one prototype I've seen lying around) can take these as a cue that that content may be preferred to one side or the other. (And there are definitely some preferences e.g. IMAGELOCATION talks about concerns regarding whether a portrait of a person faces in or out of the page.)

I do think there may be some sad sorts out there for where the old classes are used, but adding margins and floats as inline, or TemplateStyles (where applicable), is not hard. Much of it will be bottable I suspect, if/when it becomes necessary.

Maybe as a broader counter point, adding margins/floats inline messes with the end-goal of making content responsive, so that may be a point in favor of the utility classes rather than removal or renaming to 'more semantic' names (i.e. renaming to mw-image-thumb-left|right would discourage users from using the classes on other content such as wikitables that the skins could use to get a pretty end result).

Is it really appropriate to break an existing part of how tables are formatted on major wikis just to clean up the styles of image thumbnails? By all means the way thumbnails are styled can change, but tables styled as {| class="wikitable floatright" are very common and should continue to work. It allows consistency in appearance with only one word of code to learn for editors. It also is straightforward to change in a skin as e.g. Minerva can just ignore that class. By contrast, inline style on pages like style="float:right;clear:right;margin: 0 0 0.5em 0.5em is a lot to remember and type for editors, will inevitably get changed and broken when copied around articles, and has to be explicitly overridden by any skin that doesn’t want the default appearance.

Let's measure "very common": floatright is used only about 2.6k times in articles (which is in fact small). floatleft even less at 400 times in articles, which is in fact miniscule. tright: 900, and tleft 450.

These classes are not used commonly at all. (By contrast, center seems to hit 10k per the other task, but that's only 10k out of 6.3 million articles.)

I do think my point about

Maybe as a broader counter point, adding margins/floats inline messes with the end-goal of making content responsive, so that may be a point in favor of the utility classes rather than removal or renaming to 'more semantic' names (i.e. renaming to mw-image-thumb-left|right would discourage users from using the classes on other content such as wikitables that the skins could use to get a pretty end result).

remains interesting.

That is interesting: it’s a class that I’d seen around for a while, including in documentation, but it’s obviously much less popular than I thought. And yeah floating to the left is less popular in general than floating to the right and your stats reflect that.

Still, if you have a look at https://en.wikipedia.org/w/index.php?title=Special:Search&limit=100&offset=0&ns0=1&search=insource%3A%22float%3Aright%22 you’ll see what I mean about inline CSS being inconsistent: there’s a wide range of margins being chosen and hardly anyone remembers clear:right. In particular, tables with float:right but no margins at all exist and look dreadful. I maintain the view that there should be a class to align tables and divs to the right, subject to the skin, rather than expecting people to write CSS in articles.

There are 37000 results for the search linked above, of which many are actually template parameters not inline CSS. This would suggest that 10-20% of floated tables use the class.

Is it really appropriate to break an existing part of how tables are formatted on major wikis just to clean up the styles of image thumbnails

To clarify this task is about refactoring. That shouldn't imply breakage. If anything it should prevent future breakage by having well-understood styling rules.