Also, we should avoid making static copies of the default styles. Instead we should load them via RL as above, so that custom site-specific styles are respected.

https://github.com/cscott/nell-wikipedia/blob/master/www/css/app.less is a reference for the parsoid-specific styling that might be required.

(In reply to comment #2)

https://github.com/cscott/nell-wikipedia/blob/master/www/css/app.less is a
reference for the parsoid-specific styling that might be required.

This actually looks more like generic content styles to me.

To keep the overhead in the head element low, we should probably link one CSS file only, and compile that from default MW styles and our custom ones in our web server.

Image styles for our figure output are being developed in https://gerrit.wikimedia.org/r/93417 , which is a big step ahead. Once those are ready we should integrate them into core.

(In reply to Gabriel Wicke from comment #4)

Once [styles] are ready we should integrate them into core.

Sure but people resist enlarging core styles to support Parsoid, e.g. comments on https://gerrit.wikimedia.org/r/#/c/118447/1

I agree with comment 0 "provide the Parsoid-specific add-on style separately so that they can be referenced by VE to render our DOM." The Parsoid extension could have its own CSS module and JS (e.g. for image Enlarge) for additional styling of its own HTML beyond MediaWiki's skin CSS . Then VE and Flow can addModule/Styles() these modules. Over time as core styles and CSS support Parsoid's HTML we can reduce the scope of this. I'm working on a patch along these lines for bug 60017.

Some more info on getting the right modules from ResourceLoader:

http://en.wikipedia.org/w/load.php?modules=startup&only=scripts&debug=true has a call to mw.loader.register somewhere that sets up all modules. Unfortunately there is no separate API to retrieve just the data.

We can then start a blacklist of modules that we definitely don't need (JS / chrome-only ones), and construct a RL call with the remaining modules. Automating this and packaging it as an 'contentModules' API would be awesome in the longer term.

gerrit 124785 defines an 'ext.parsoid.styles' ResourceLoader module in the Parsoid extension, and begins to add Parsoid-specific CSS to it.

Change 130489 had a related patch set uploaded by Spage:
Fix remoteExtPath to Parsoid module

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

Change 130489 merged by jenkins-bot:
Fix remoteExtPath to Parsoid module

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

Change 137969 had a related patch set uploaded by GWicke:
Link default content styles through RL

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

Change 137981 had a related patch set uploaded by GWicke:
Indicate language & content directionality on body

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

Change 137969 merged by jenkins-bot:
Link default content styles through RL

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

Change 137981 merged by jenkins-bot:
Indicate language & content directionality on body

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

Change 138617 had a related patch set uploaded by GWicke:
Bug 51245: Add auto-numbered link CSS to Parsoid styles

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

Change 138617 merged by jenkins-bot:
Bug 51245: Add auto-numbered link CSS to Parsoid styles

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

This round is now deployed in phase 1 wikis (mw.org etc).

Here are some more issues:

Images

http://parsoid-lb.eqiad.w
ikimedia.org/mediawikiwiki/Help:Images?oldi
d=1022353

• The styling of non-thumb captioned images is off:

[[File:example.jpg|center|100px|caption]]

Compare https://www.mediawiki.org/wiki/Help:Images#Horizontal_alignment

The caption should not render at all in this case.

• The gallery styles don't seem to apply to our output (see further down on the page). This is likely an issue with the gallery CSS selector being too specific / using something like div#content instead of .mw-body or .mw-body-content, very similar to bug 66461.

Change 139424 had a related patch set uploaded by GWicke:
Bug 51245: Add some more RL modules

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

(In reply to Gabriel Wicke from comment #16)

• The gallery styles don't seem to apply to our output (see further down on

the page). This is likely an issue with the gallery CSS selector being too
specific / using something like div#content instead of .mw-body or
.mw-body-content, very similar to bug 66461.

This turned out to be missing RL modules, which will be fixed by https://gerrit.wikimedia.org/r/139424.

Change 139473 had a related patch set uploaded by GWicke:
Bug 51245: Hide the caption of frameless or inline images in Parsoid HTML

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

(In reply to Gabriel Wicke from comment #16)

• The styling of non-thumb captioned images is off:

[[File:example.jpg|center|100px|caption]]

Compare https://www.mediawiki.org/wiki/Help:Images#Horizontal_alignment

The caption should not render at all in this case.

Will be fixed by https://gerrit.wikimedia.org/r/139473.

Change 139473 had a related patch set uploaded by Bartosz Dziewoński:
Hide the caption of frameless or inline images in Parsoid HTML

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

For easier copying/checking:

• http://parsoid-lb.eqiad.wikimedia.org/mediawikiwiki/Help:Images?oldid=1022353
• http://parsoid-lb.eqiad.wikimedia.org/enwiki/Wikipedia:Extended_image_syntax?oldid=611658800

(These won't work as well until wmf10 hits production on 26 June.)

Change 139867 had a related patch set uploaded by GWicke:
Minor: more specific parsoid image styling with child selectors

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

Change 139867 merged by jenkins-bot:
Minor: more specific parsoid image styling with child selectors

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

Change 139473 merged by jenkins-bot:
Hide the caption of frameless or inline images in Parsoid HTML

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

The basic linking is now done, and the styles are also starting to become fairly solid. Some remaining issues are:

• Linking page-specific styles (extensions primarily): Ideally RL would expose an API like 'give me all non-standard styles for page X' that we could link to. I heard that there might be a way to get the list of RL modules from action=parse output, but haven't been able to find them in the output yet. Pointers appreciated.

• Our styles are currently Vector-specific. We should perhaps split the styles into a 'common' and skin-specific part, following the model of core. Skin-specific Parsoid styling is already done for the minerva skin (mobile). Alternatively, we could try push our selectors into core soon, before the parsoid-only part becomes too complex. The disadvantage of the latter is that it'll create some overhead on all page views, so it's easier to sell once we actually use Parsoid HTML for normal page views.

https://gerrit.wikimedia.org/r/#/c/133301/ also removes the thumb background & the border around the image, in sync with the same change in core for consistency.

(In reply to Gabriel Wicke from comment #26)

I heard that there might be a way to get the list of RL
modules from action=parse output, but haven't been able to find them in the
output yet. Pointers appreciated.

http://en.wikipedia.org/w/api.php?action=parse&format=json&page=MathML&prop=modules

includes

"modulestyles":["ext.rtlcite","ext.math.styles","ext.geshi.language.xml","ext.geshi.local","ext.geshi.language.html5"]

Change 139424 merged by jenkins-bot:
Bug 51245: Add some more RL modules

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