Page MenuHomePhabricator

gallery should not use ul/li
Open, NormalPublic

Description

The gallery tag currently generates an unnumbered list containing the images. In the browser the bullets are hidden by CSS. When you copy a gallery from web page to a word processing you get a unnumbered list with annoying bullets.

The unnumbered list is not necessary for semantic reasons. For HTML4, div/div instead of ul/li should be satisfactorily and has no disadvantages.

For HTML5 the figure element would be the right element:
http://www.w3.org/TR/html5/the-figure-element.html#the-figure-element

<gallery title="Caption">
File:Image1.jpg|First Image
File:Image2.jpg|Second Image
</gallery>

should turn to

<figure class="gallery">
 <figcaption>Caption</figcaption>
 <figure>
  <img src="Image1.jpg" />
  <figcaption>First Image</figcaption>
 </figure>
 <figure>
  <img src="Image2.jpg" />
  <figcaption>Second Image</figcaption>
 </figure>
</figure>

See Also:

Details

Reference
bz36755

Event Timeline

bzimport raised the priority of this task from to Normal.Nov 22 2014, 12:28 AM
bzimport added a project: MediaWiki-Interface.
bzimport set Reference to bz36755.
bzimport added a subscriber: Unknown Object (MLST).
Fomafix created this task.May 11 2012, 7:14 AM

Related URL: https://gerrit.wikimedia.org/r/62207 (Gerrit Change Ida8ed0436626d3455b7d28ebac7c8fc6e0b47acd)

This is a special case of bug 23932. Apparently, styling such tags (new to HTML5) works pretty much everywhere, except IE before 9 *without JS*. The last consensus at 23932 was that we still need to worry about that. Anyway, we should probably determine a broad course there rather than doing this piecemeal.

TheDJ added a comment.Aug 12 2013, 3:20 PM

I disagree with the part of the premise of this ticket and the
solution that was identified.

If your copy paste gives you something ugly, then that's a bug in your copy paste, not in the definition of the html structure.

If you want to wrap the blocks in figures, then that would be nice, but it doesn't replace the original intent of using ul and li. It's just one of many ways to loose ugly bullet points, but in terms of structure, other then being html5, it's not necessarily better.

The gallery is semantically a list in at least Special:NewFiles and Category pages and actually using a list for it has benefits for assistive technology in these cases. Now I guess there could be made a case that inside articles, our gallery aren't really lists but rather groups of images, but then we should split the gallery generator into two modes that can work independent of eachother.

Using figure and figcaption are totally independent issues as far as i'm concerned. They are just div's with extra meaning.

IE8 does not support <figure> and <figcaption>: http://caniuse.com/#search=figure. The elements get ignored and are not styleable.

waldyrious updated the task description. (Show Details)Jan 19 2015, 2:44 PM
waldyrious set Security to None.
waldyrious updated the task description. (Show Details)
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 14 2015, 11:12 PM
Danny_B updated the task description. (Show Details)Feb 22 2016, 3:39 PM
Danny_B edited subscribers, added: Danny_B; removed: wikibugs-l-list.
Ltrlg added a subscriber: Ltrlg.Feb 24 2016, 2:13 PM
He7d3r updated the task description. (Show Details)Mar 14 2016, 4:20 PM
Krinkle removed a subscriber: Krinkle.Mar 14 2016, 5:11 PM

IE8 does not support <figure> and <figcaption>: http://caniuse.com/#search=figure. The elements get ignored and are not styleable.

html5shiv could solve that.

IE8 does not support <figure> and <figcaption>: http://caniuse.com/#search=figure. The elements get ignored and are not styleable.

html5shiv could solve that.

html5shiv uses JavaScript. Since MediaWiki 1.27 JavaScript is disabled on IE8.

Hmm, time to drop IE≤8 support completely obviously... (AFAIK, January 12, 2016 was the day, when MS dropped IE8's support, others have been killed ages ago)

For the record, we already use some HTML5 semantic tags as shown in chart in T25932: Enable, whitelist, and incorporate semantic HTML5 elements and mentioned in T25932#1325024 and T25932#1316167

Just because we don't support javascript in general on IE8, does not mean we would not be able to add html5shim for IE8 browsers.

Just because we don't support javascript in general on IE8, does not mean we would not be able to add html5shim for IE8 browsers.

I'm in favour of that.

Just because we don't support javascript in general on IE8, does not mean we would not be able to add html5shim for IE8 browsers.

Technical possible. Yes. But after setting browser support for IE8 to grade C all JavaScript-based workarounds for IE8 have been removed from MediaWiki. Example for hlist.

Ramsey-WMF moved this task from Untriaged to Tracking on the Multimedia board.Oct 13 2017, 11:14 PM

Since rMW3a30e03645f8 html5shiv is activated for IE8. Now it may be possible to use <figure> and <figcaption>.

Krinkle moved this task from Unsorted to Semantic HTML on the Accessibility board.Apr 20 2018, 4:19 PM