Page MenuHomePhabricator

[Design] Images get 40px margin via WebKit when loading with content service
Closed, ResolvedPublic1 Estimated Story Points

Description

Parsoid wraps many images (those not in a gallery construct) in a <figure> element. WebKit gives <figure> elements a 40px start and end margin.[1] As a result, many images have different margins when the article is loaded via the MW API vs. the content service.

For example (from "Jellyfish" on enwiki):

Screenshot_20160411-130604.png (2×1 px, 1 MB)

Screenshot_20160411-130634.png (2×1 px, 1 MB)

I rather like the little bit of extra margin, but it's an unintentional design change, so let's think about whether to override the WebKit styles to match the previous behavior or to add the margin for MW API loading as well.

[1] https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?order=name#L70

Event Timeline

Change 284751 had a related patch set uploaded (by Mholloway):
Add style directives for images in Parsoid HTML

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

Change 284815 had a related patch set uploaded (by Mholloway):
Add styles for Parsoid images

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

Change 284751 merged by jenkins-bot:
Add style directives for images in Parsoid HTML

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

Change 284815 merged by jenkins-bot:
Add styles for Parsoid images

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

QA: in the "Jellyfish" article, the images in the first section of text should be as wide as the paragraph width.

Testing on Android 5.1 ZTE phone and Wikipedia app 2.1.144-alpha-2016-05-13. This is fixed now as images match the width of the paragraphs.

Mholloway set the point value for this task to 1.May 20 2016, 6:10 PM