Page MenuHomePhabricator

VisualEditor: Style Parsoid's <figure>s to look like MediaWiki's <div class="thumb">s rather than replacing them
Closed, ResolvedPublic

Description

Right now VisualEditor transforms the HTML Parsoid gives us (which is nicely-structured <figure>s) into the mess of <div>s that MediaWiki's PHP parser throws out (up?). This is so that VE's rendered HTML magically inherits the styling that the images get on the read page, which includes

Instead, we should just style these using CSS. However, this is difficult because the styles are specific to <div>s with known classes (and Parsoid's HTML has no <div>s), and is often over-ridden in wiki- or user-specific CSS (e.g. Wikia's sites' skins, or that on Cherokee Wikipedia).

From quickly playing around, a basic CSS style that implements core-MW would be something like:

figure
float: right;
border: 1px solid #CCC;
padding: 3px;
width: 172px;
background: #FAFAFA;
font-size: 13px;
margin-right: 1.2em;

img
border: 1px solid #CCC;

figcaption
padding: 3px;
font-size: smaller;
line-height: 1.4em;
width: 15em;
margin: 2px 0px;
padding-top: 0px;


Version: unspecified
Severity: major

Details

Reference
bz53436

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

bzimport raised the priority of this task from to High.
bzimport set Reference to bz53436.

Change 93417 had a related patch set uploaded by Jforrester:
Render CE MWBlockImageNodes as styled <figure>s

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

Change 93417 merged by jenkins-bot:
Render CE MWBlockImageNodes as styled <figure>s

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