Create a version of mediawiki.skinning.content for Parsoid HTML

The provides a transitional central content styling module for all
consumers of Parsoid's HTML+RDFa, to avoid local duplication (and
variation) of these rules in each of the consuming applications such as
Parsoid's read service[0], VisualEditor[1], MobileFrontend[2], Kiwix[3],
Flow[4] and others.

In a short while (probably before MW 1.24 branches), we expect to switch
over the primary read HTML to Parsoid- rather than MWParser-generated,
at which time this HTML will become the core for MediaWiki's content
styling, with skins able to over-ride or augment this styling as they see
fit.

[0] http://parsoid-lb.eqiad.wikimedia.org/enwiki/Foobar?oldid=608091782
[1] http://en.wikipedia.org/wiki/Foobar?oldid=608091782&veaction=edit
[2] http://en.m.wikipedia.org/wiki/Foobar?oldid=608091782
[3] http://www.kiwix.org/wiki/Main_Page
[4] http://en.wikipedia.org/wiki/Wikipedia_talk:Flow/Developer_test_page

Change-Id: I400336c12d58308d7177b24180693874effadf69

diff --git a/resources/Resources.php b/resources/Resources.php
index 3a6f5e3..0e5d087 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -133,6 +133,14 @@ return array(
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
        ),
 
+       'mediawiki.skinning.content.parsoid' => array(
+               // Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser
+               // with the commonInterface.css styles; skinStyles should be used if your
+               // skin over-rides common content styling.
+               'skinStyles' => array(
+                       'default' => 'resources/src/mediawiki.skinning/content.parsoid.less',
+               ),
+       ),
 
        /**
         * Skins

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
new file mode 100644 (file)
index 0000000..0ab4b37
--- /dev/null
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -0,0 +1,76 @@
+/**
+ * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
+ */
+
+/**
+ * References
+ *
+ * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags.
+ *
+ * Markup:
+ * Cake is good<sup>[2]</sup>
+ * The cake is a lie<span class="reference">[1]</span>
+ *
+ * Styleguide 1.1.
+ */
+span.reference {
+       font-size: smaller;
+       line-height: normal;
+       vertical-align: super;
+}
+
+/**
+ * Block media items
+ */
+figure[typeof*='mw:Image'] {
+       margin: 0;
+
+       a {
+               border: 0;
+       }
+
+       .mw-halign-right {
+               /* @noflip */
+               margin: .5em 0 1.3em 1.4em;
+               /* @noflip */
+               clear: left;
+               /* @noflip */
+               float: left;
+       }
+
+       /* @noflip */
+       .mw-halign-left {
+               /* @noflip */
+               margin: .5em 1.4em 1.3em 0;
+               /* @noflip */
+               clear: right;
+               /* @noflip */
+               float: right;
+       }
+
+       .mw-halign-center {
+               margin-left: auto;
+               margin-right: auto;
+       }
+
+       figcaption {
+               display: table-caption;
+               caption-side: bottom;
+               /* In mw-core the font-size is duplicated, 94% in thumbiner
+                  and again 94% in thumbcaption. 88% for font size of the
+                  caption results in the same behavior. */
+               font-size: 88%;
+               line-height: 1.4em;
+               text-align: left;
+
+               /* taken from .thumbcaption */
+               padding: 3px;
+       }
+}
+
+figure[typeof~='mw:Image/Thumb'], figure[typeof~='mw:Image/Frame'] {
+       display: table;
+       overflow: hidden;
+       text-align: center;
+       padding: 3px;
+}