Page MenuHomePhabricator
Create Task
Maniphest T118520

Use <figure-inline> instead of <span> for inline figures.
Closed, ResolvedPublic
Actions

Description

Custom tag types are supported in HTML5, and they are parsed as inline content. Thus instead of replacing <figure> with <span> in the Parsoid DOM spec for inline figures, we could replace <figure> with <figure-inline> instead. That would allow better semantic matching than abusing <span>s.

We'd still have to protect block-level content in the figure caption, of course. I think we already move the caption into data-mw for inline media, but if we didn't we'd have to use <figcaption-inline> (or some such) since <figcaption> is also a block element.

Note that IE6-8 require a bit of thunk JavaScript to support custom elements (basically, document.createElement('figure-inline'), more details here). But we're deprecating IE8 in January 2016 anyway, and T118517 would add the necessary JS thunk for us where it's needed.

Details

SubjectRepoBranchLines +/-
Use custom figure-inline HTML5 element for inline mediamediawiki/coremaster+183 -156
Allow <figure-inline> attributes through Sanitizermediawiki/coremaster+1 -0
Use figure-inline instead of span for inline mediamediawiki/extensions/VisualEditormaster+16 -13
Customize query in gerrit

Related Objects
Search...

Event Timeline

cscott created this task.Nov 12 2015, 10:45 PM
cscott raised the priority of this task from to Needs Triage.
cscott updated the task description. (Show Details)
cscott added a project: Parsoid-DOM.
cscott added subscribers: • GWicke, Arlolra, • ssastry.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptNov 12 2015, 10:45 PM
• GWicke added a comment.EditedNov 12 2015, 11:01 PM

Un-registered custom elements are dropped from the DOM in old IE versions, but the nested content still renders. (Tested with https://people.wikimedia.org/~gwicke/element_test.html at http://netrenderer.com/.) This means that we will get an acceptable rendering for use cases like inline images marked up with <figure-inline> even if JavaScript is completely turned off & the element is not registered.

Jdforrester-WMF subscribed.Nov 12 2015, 11:24 PM

We're disabling JavaScript in IE8. Reading should continue to work fine, without JS.

• GWicke added a comment.Nov 12 2015, 11:28 PM

@Jdforrester-WMF: I know about disabling JS in general (and strongly support it), but we could consider supplying simple & targeted fix JS for old IE if that makes sense.

• GWicke mentioned this in T105845: RFC: Page components / content widgets.Nov 12 2015, 11:41 PM
• GWicke mentioned this in T103624: Semantic media roles.
• brooke mentioned this in T118517: [RFC] Use <figure> for media.Nov 13 2015, 2:47 PM
• MZMcBride subscribed.Nov 18 2015, 11:02 PM
cscott mentioned this in E93: RFC Meeting: Use <figure> for media (2015-12-02).Nov 18 2015, 11:03 PM
cscott subscribed.Dec 2 2015, 10:03 PM

As @GWicke states, just because we're disabling JS in general in ResourceLoader doesn't mean that we can't include a line of JavaScript to make <figure> render correctly, either as an explicit <script> tag in the head or via some other mechanism.

The wikitech-l thread also mentions a few other uses of JS for browser detection in IE8 stylesheets. It may be that ResourceLoader also wants to drop a single line of JavaScript for this purpose in the head, even for IE8, so that it can then determine whether to load IE8-specific stylesheets.

Jdforrester-WMF added a subtask: T122965: Provide a way to support HTML5 elements in browsers that don't support it and don't have JS shipped, like IE8 and below.Jan 6 2016, 5:43 PM
Arlolra claimed this task.Jun 15 2017, 9:39 PM
Arlolra triaged this task as Medium priority.Jun 15 2017, 10:00 PM
Arlolra raised the priority of this task from Medium to Medium.
• GWicke added a comment.EditedJun 15 2017, 10:58 PM

Arlolra raised the priority of this task from Normal to Normal.

So Normal is the new Normal? ;)

Arlolra added a comment.Jun 15 2017, 11:11 PM

Arlolra raised the priority of this task from Normal to So Normal

gerritbot subscribed.Aug 4 2017, 2:15 PM

Change 370206 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] Use figure-inline instead of span for inline media

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

gerritbot added a project: Patch-For-Review.Aug 4 2017, 2:15 PM
gerritbot added a comment.Aug 4 2017, 4:46 PM

Change 370227 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/services/parsoid@master] T118520: Use figure-inline instead of span for inline media

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

Arlolra closed subtask T122965: Provide a way to support HTML5 elements in browsers that don't support it and don't have JS shipped, like IE8 and below as Resolved.Aug 9 2017, 10:34 PM
gerritbot added a comment.Aug 10 2017, 4:22 PM

Change 371074 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/extensions/VisualEditor@master] Use figure-inline instead of span for inline media

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

• Mattflaschen-WMF mentioned this in T173972: Fix Flow BadImageRemover and support figure-inline.Aug 23 2017, 6:09 PM
gerritbot added a comment.Sep 19 2017, 4:11 PM

Change 371074 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Use figure-inline instead of span for inline media

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

gerritbot added a comment.Sep 19 2017, 4:27 PM

Change 370206 abandoned by Arlolra:
Use figure-inline instead of span for inline media

Reason:
Going to incorporate this in I877baf403088c716ad8e89752008b7a59b7e466c

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2017-09-26 (1.31.0-wmf.1)).Sep 19 2017, 5:00 PM
Arlolra added a subscriber: Bianjiang.Sep 26 2017, 7:52 PM
• Mattflaschen-WMF added a parent task: T173972: Fix Flow BadImageRemover and support figure-inline.Sep 26 2017, 10:01 PM
• Mattflaschen-WMF removed a parent task: T173972: Fix Flow BadImageRemover and support figure-inline.
• Mattflaschen-WMF added a subtask: T173972: Fix Flow BadImageRemover and support figure-inline.
gerritbot added a comment.Sep 26 2017, 10:11 PM

Change 380890 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/Flow@master] BadImageRemover: Update for inline-image change in Parsoid

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

Etonkovidova closed subtask T173972: Fix Flow BadImageRemover and support figure-inline as Resolved.Oct 2 2017, 9:34 PM
• bearND created subtask T177301: Update MCS transforms to account for <figure-inline> instead of <span> for inline figures.Oct 3 2017, 5:38 PM
Arlolra added a comment.Oct 5 2017, 5:35 PM

Should this have been called <figure-phrasing>?

• Fjalapeno added subscribers: • bearND, phuedx, Tgr, • Fjalapeno.Oct 12 2017, 6:53 PM

@cscott hey we had a question come up the other day at the RI meeting:

It makes sense to use figure-inline in place of span to be more semantic. But can you explain why we are using figure-inline instead of figure?

How are clients expected to treat figure-inline differently than figure?
What is the advantage of using a custom tag rather than say a CSS class to denote inline figures?

Thanks!

cc @Tgr @bearND @phuedx

Arlolra added a comment.Oct 12 2017, 7:30 PM

The spec has this explanation, https://www.mediawiki.org/wiki/Specs/HTML/1.5.0#Images

The outer <figure> element needs to become a <span> element when the figure is rendered inline, since otherwise the HTML5 parser will interrupt a surrounding block context. The inner <figcaption> element is rendered as a data-mw attribute in this case (since block content in an invisible caption would otherwise break parsing).

So, the difference is in how a browser will render it. Hope that helps.

• bearND closed subtask T177301: Update MCS transforms to account for <figure-inline> instead of <span> for inline figures as Resolved.Oct 24 2017, 2:30 AM
gerritbot added a comment.Nov 22 2017, 6:21 PM

Change 370227 merged by jenkins-bot:
[mediawiki/services/parsoid@master] T118520: Use figure-inline instead of span for inline media

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

Arlolra closed this task as Resolved.Nov 22 2017, 6:31 PM
Stashbot mentioned this in T114072: <section> tags for MediaWiki sections.Dec 12 2017, 7:57 PM
Stashbot mentioned this in T181226: Don't output section wrappers in body_only mode.
Stashbot mentioned this in T21910: Headings of the form ===+\s+ are not preprocessed correctly..
Stashbot mentioned this in T152540: Migrate to HTML5 section ids.
Stashbot mentioned this in T103714: Fragment encoding in heading anchors and in links differ.
Stashbot mentioned this in T97093: Parsoid should mark interwiki links as such.
Stashbot subscribed.

Mentioned in SAL (#wikimedia-operations) [2017-12-12T19:57:07Z] <arlolra> Updated Parsoid to 741fc5d (T114072, T181226, T21910, T152540, T103714, T97093, T118520, T181229, T182338, T182170, T169006)

Stashbot mentioned this in T181229: Content after reference tag in template disappears.Dec 12 2017, 7:57 PM
Stashbot mentioned this in T182338: Parsoid: Interwiki links with angle brackets should be invalid.
Stashbot mentioned this in T182170: Create new high-priority linter category for multiple unclosed formatting tags whose effects accumulate.
Stashbot mentioned this in T169006: Correctly redirect in Parsoid /transform/wikitext/to/lint endpoint.
gerritbot added a comment.Feb 12 2018, 10:41 PM

Change 370206 restored by Arlolra:
Use figure-inline instead of span for inline media

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

cscott added a comment.Apr 22 2019, 5:01 PM
In T118520#3680881, @Arlolra wrote:

The spec has this explanation, https://www.mediawiki.org/wiki/Specs/HTML/1.5.0#Images

The outer <figure> element needs to become a <span> element when the figure is rendered inline, since otherwise the HTML5 parser will interrupt a surrounding block context. The inner <figcaption> element is rendered as a data-mw attribute in this case (since block content in an invisible caption would otherwise break parsing).

So, the difference is in how a browser will render it. Hope that helps.

A few more details: https://phabricator.wikimedia.org/T118517#2710039

gerritbot added a comment.Apr 22 2019, 5:07 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

gerritbot added a comment.Apr 26 2019, 7:10 PM

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

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.3; 2019-04-30).Apr 26 2019, 8:00 PM
Arlolra mentioned this in T251641: RFC: HTML element for inline media from wikitext.May 11 2020, 11:10 PM
gerritbot added a comment.Sep 17 2020, 9:20 PM

Change 370206 abandoned by Arlolra:
[mediawiki/core@master] Use custom figure-inline HTML5 element for inline media

Reason:
Per https://phabricator.wikimedia.org/T251641

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

• ssastry mentioned this in T266143: Parsoid clients should handle inline media HTML change from <figure-inline> to <span>.Oct 21 2020, 2:36 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL