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.

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 Normal priority.Jun 15 2017, 10:00 PM
Arlolra raised the priority of this task from Normal to Normal.
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