Page MenuHomePhabricator

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

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

Related Gerrit Patches:

Related Objects

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.

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

@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.

cscott added a subscriber: cscott.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.

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 raised the priority of this task from Normal to So Normal

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

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

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

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

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

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

Should this have been called <figure-phrasing>?

@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

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.

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

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

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

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

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