Page MenuHomePhabricator

Use figure and figcaption HTML5 elements when possible
Open, MediumPublic

Description

Since MediaWiki allows images that are clearly separated out, we should see if we can use <figure> and <figcaption>. These tags are intended for "some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document."

This would particularly make sense for thumb and frame where a caption is already shown. However, figure can also be used without figcaption, which should simplify implementation.

The main concern is backwards-compatibility with browsers that don't know about these tags. They're new to HTML5 (which is now always on in MediaWiki), but

  1. Older IE will not be able to style these elements from CSS
  2. Older IE will not be able to select these elements from JavaScript. This can be worked around by calling createElement(tagName) once for each of the relevant tag names.

For issue number 2, I think jQuery's internal createSafeFragment already takes care of old IE. So only the styling issue remains.


See also: T25932: Allow use of semantic HTML5 elements in wikitext

Related Objects

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:45 AM
bzimport set Reference to bz49097.
bzimport added a subscriber: Unknown Object (MLST).
brion added a comment.Oct 2 2013, 7:01 PM

Docs on MDN for these elements:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

Core and mobile styles would have to be updated, and likely also some JS tools.

Alternatively, <figure> and <figcaption> could be thrown in around the existing <div>s and <span>s without changing the styles, assuming there's no default styles that override stuff.

Ltrlg added a subscriber: Ltrlg.Jan 11 2015, 6:20 PM

Change 196532 had a related patch set uploaded (by Prtksxna):
Use figure and figcaption HTML5 elements in Linker::makeThumbLink2

https://gerrit.wikimedia.org/r/196532

Change 196533 had a related patch set uploaded (by Prtksxna):
Stop specifying element for thumbinner class

https://gerrit.wikimedia.org/r/196533

Prtksxna set Security to None.

Should be fine if the HTML5 shiv works properly. No JS old IE is minimal per https://phabricator.wikimedia.org/T25932#851388 . IE 8 (last version not to support this out of the box) is EOL in January 2016 (less than 10 months away!)

TheDJ added a subscriber: TheDJ.Mar 25 2015, 9:03 AM

As Brion said, be sure to validate against TimedMediaHandler, Mobile, WikiEditor and other extensions that depend on the current thumbnail layout.

We will probably want to deploy the CSS changes before the element changes for cache reasons ?

Also we have https://en.wikipedia.org/wiki/Category:Graphics_templates where I have two concerns:

  1. How many of those templates will be affected
  2. Do we want users to use figcaption/figure from wikitext as well ? (I think this can be assessed at a later point in time).
TheDJ added a comment.Mar 25 2015, 9:21 AM
  1. Should be tested with the other skins.
  2. It seems CSS or scripts for some people would break: https://en.wikipedia.org/w/index.php?title=Special:Search&limit=20&offset=20&profile=all&search=thumbinner Mostly this is style
  3. MediaWiki:Gadget-ImageAnnotator.js would break and probably a few more
  1. Do we want users to use figcaption/figure from wikitext as well ? (I think this can be assessed at a later point in time).

In what cases would someone need to explicitly use figcaption from wikitext (the main point is for people to use File tags, and the parser to generate them)?

In T51097#1155608, @Mattflaschen wrote:

In what cases would someone need to explicitly use figcaption from wikitext (the main point is for people to use File tags, and the parser to generate them)?

https://en.wikipedia.org/wiki/Template:Multiple_image and other such templates need to replicate the HTML of the image thumbnails.

Krinkle added a comment.EditedJun 29 2015, 10:22 PM
In T51097#1155608, @Mattflaschen wrote:

In what cases would someone need to explicitly use figcaption from wikitext (the main point is for people to use File tags, and the parser to generate them)?

https://en.wikipedia.org/wiki/Template:Multiple_image and other such templates need to replicate the HTML of the image thumbnails.

I'm not opposing <figure> in wikitext per se, but templates don't need it. They just have to look similar. There shouldn't be any styles specific to the figure elements in core. The classname on <div> will suffice and result in the same visual appearance and behaviour.

Having said that, such templates shouldn't need to replicate the thumb HTML itself. We need to either support it by implementing the necessary bits in core (or an extension), or decide why it is undesired for some technical or UX reason and discourage its use.

I believe @tstarling and the parsing team have agreed on a long-term plan to make the PHP parser output and Parsoid output converge.

Change 196532 abandoned by Prtksxna:
Use figure and figcaption HTML5 elements in Linker::makeThumbLink2

Reason:
Can be unabandoned whenever we're ready.

https://gerrit.wikimedia.org/r/196532

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 20 2015, 11:48 AM
TheDJ removed a subscriber: wikibugs-l-list.

Change 196532 restored by Cscott:
Use figure and figcaption HTML5 elements in Linker::makeThumbLink2

Reason:
I don't think abandoning this is helpful. I'll put a -2 on it though to prevent premature commit.

https://gerrit.wikimedia.org/r/196532

Results

I877baf403088c716ad8e89752008b7a59b7e466c appears to work properly for the Android app, both master and the old deprecated Gingerbread version. I did not test the PhoneGap version. There are slight padding differences on some APIs but I think they're acceptable.

Setup

I don't play with a local MW instance enough so please excuse the verbose notes for verification.

I checked out master and made a page with some images. I checked out the patch and made another page with the same content. I can see that the master page has divs and the patch page has figures.

I visited the two pages in the Android app (master and our old deprecated Gingerbread version-- not PhoneGap) on a number of devices.

For posterity, some screen caps:

API 10 master and patch

API 19 master and patch

API 23 master and patch

Fire master and patch

@dr0ptp4kt, a quick follow up on gallery. The gallery images have their own request[0]. I also double checked functionally on a couple devices:

API 10 master and patch

API 23 master and patch

For _even more_ thoroughness, here's link preview[1] which uses the same request as the gallery on master and its own request on Gingerbread:

API 10 master and patch

API 23 master and patch

[0] https://phabricator.wikimedia.org/diffusion/APAW/browse/master/app/src/main/java/org/wikipedia/page/gallery/GalleryCollectionFetchTask.java
[1] These look trash because I don't have all the extensions installed. The trash looks different on different APIs because the requests[2,3] and extract processing has changed since Gingerbread[4].
[2] http://192.168.1.11:8080/w/api.php?action=query&format=json&titles=Thomas_Jefferson&continue=&prop=extracts%7Cpageimages%7Cpageterms&redirects=true&exchars=512&explaintext=true&piprop=thumbnail%7Cname&pithumbsize=320&wbptterms=description
[3] http://192.168.1.11:8080/w/api.php?action=query&format=json&formatversion=2&prop=extracts%7Cpageimages&redirects=true&exsentences=5&explaintext=true&piprop=thumbnail%7Cname&pithumbsize=320&titles=Thomas_Jefferson
[4] https://phabricator.wikimedia.org/rAPAWd945afc63d8025a2ae1198987f0b8cf95dc74efa#a0928e81

@Mholloway and @Niedzielski, are you able to verify no degradation of user experience with the Mobile Content Service in force with this patch, too? CC @bearND in case this task needs to wait until next week.

@dr0ptp4kt, since this requires the Content Service to point at a local Vagrant instance, a local RESTBase and maybe also a local Parsoid install will be necessary. It'll take me a little while to get that configured. Unless this is urgent, let's see if @bearND can run this test.

ssastry edited projects, added MediaWiki-Parser; removed Parsoid.Dec 17 2015, 7:32 PM
ssastry moved this task from Backlog to In Progress on the MediaWiki-Parser board.
Danny_B moved this task from Unsorted to Semantic HTML on the Accessibility board.Jan 22 2016, 9:45 PM
Jdlrobson added a subscriber: Jdlrobson.EditedJan 3 2017, 3:23 AM

I'm a little confused why this is in code review. The patch is over a year old and I'm unclear what the current state of this task is - have there been new developments? Has there been a request? I see some recent comments on the ticket from @ssastry:

No, not to be abandoned. We had an RFC hearing around this, and the block figure image usage had approval, but inline image markup was still to be resolved. Brion and Scott were going to do some follow up around that. Separately, we need to figure out transition plans for when we move to <figure> markup since it will break user scripts, gadgets, etc. So, all those are blockers on getting this merged and deployed.

Seems there is a lot more to work out here before we can help review this task?

(Is someone more in the loop able to refresh the description so it does not date back to the Bugzilla days? :))

Arlolra claimed this task.Jun 15 2017, 9:41 PM
Arlolra raised the priority of this task from Low to Medium.Jun 15 2017, 10:02 PM

Change 196533 abandoned by Umherirrender:
Stop specifying element for thumbinner class

Reason:
See T178932

https://gerrit.wikimedia.org/r/196533

matmarex removed a subscriber: matmarex.Nov 20 2017, 7:18 PM
ssastry moved this task from In Progress to Backlog on the MediaWiki-Parser board.Apr 6 2018, 8:41 PM
ssastry changed the status of subtask T118517: [RFC] Use <figure> for media from Open to Stalled.Mar 29 2019, 11:05 PM

Change 505645 had a related patch set uploaded (by C. Scott Ananian; owner: C. Scott Ananian):
[mediawiki/core@master] Allow <figure-inline> attributes through Sanitizer

https://gerrit.wikimedia.org/r/505645

Change 505645 merged by jenkins-bot:
[mediawiki/core@master] Allow <figure-inline> attributes through Sanitizer

https://gerrit.wikimedia.org/r/505645

Change 507512 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] Use figure and figcaption HTML5 elements for media

https://gerrit.wikimedia.org/r/507512

Change 196532 abandoned by Arlolra:
Use figure and figcaption HTML5 elements for media

Reason:
In favour of https://gerrit.wikimedia.org/r/c/mediawiki/core/ /507512

https://gerrit.wikimedia.org/r/196532

Krinkle removed a subscriber: Krinkle.Jul 8 2019, 8:58 PM