Page MenuHomePhabricator

[Design] Images get 40px margin via WebKit when loading with content service
Closed, ResolvedPublic1 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):


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

Details

Related Gerrit Patches:
apps/android/wikipedia : masterAdd styles for Parsoid images
mediawiki/extensions/MobileApp : masterAdd style directives for images in Parsoid HTML

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 11 2016, 5:13 PM
Mholloway updated the task description. (Show Details)Apr 11 2016, 5:58 PM

Override it.

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.

bearND closed this task as Resolved.May 18 2016, 5:31 PM
bearND moved this task from Ready for Signoff to Done on the Mobile-App-Android-Sprint-82-Lead board.
Mholloway set the point value for this task to 1.May 20 2016, 6:10 PM