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

bzimport set Reference to bz53436.
Jdforrester-WMF created this task.Via LegacyAug 27 2013, 11:15 PM
gerritbot added a comment.Via ConduitDec 5 2013, 3:24 AM

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

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

gerritbot added a comment.Via ConduitDec 12 2013, 6:47 PM

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

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

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.