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


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:

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

border: 1px solid #CCC;

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

Version: unspecified
Severity: major

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

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

Add Comment