Page MenuHomePhabricator

Default horizontal alignment of thumbnails should depend on content language, not the UI
Closed, ResolvedPublic

Description

Parsoid currently has this in its CSS,

	// Default to right alignment. This is needed since Parsoid only specifies the
	// alignment class when the alignment is explicitly set.
	margin: 0.5em 0 1.3em 1.4em;
	clear: right;
	float: right;

From https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.parsoid.less#L91-L95

which will flip, presumably if the UI flips.

However, in the legacy parser output, we have,

			# Create a thumbnail. Alignment depends on the writing direction of
			# the page content language (right-aligned for LTR languages,
			# left-aligned for RTL languages)
			# If a thumbnail width has not been provided, it is set
			# to the default user option as specified in Language*.php
			if ( $frameParams['align'] == '' ) {
				$frameParams['align'] = $parser->getTargetLanguage()->alignEnd();
			}

from https://github.com/wikimedia/mediawiki/blob/master/includes/Linker.php#L386-L393

which, as stated, depends on the page content language, not the UI.

Event Timeline

Arlolra renamed this task from Default horizontal alignment should depend on content language, not the UI to Default horizontal alignment of thumbnails should depend on content language, not the UI.Dec 8 2020, 8:19 PM

I *think* what we should be doing is adding a class like mw-align-start instead of choosing left or right in the Linker. That would be float: inline-start, which could be simulated with:

body[dir=ltr] .mw-align-start { float: left }
body[dir=rtl] .mw-align-start { float: right }

https://developer.mozilla.org/en-US/docs/Web/CSS/float

This is because the default thumbnail direction isn't actually left or right, it is "start", which is a alignment property we don't support yet, but which is defined in CSS and probably we *should* support at some point. Then content language affects the directionality of the container div, and the alignment of the thumbnails follows. What's more, this even works if you add multilingual context and mix RTL and LTR in the same page!

Parsoid sets mw-content-$dir based on the page language,
https://github.com/wikimedia/parsoid/blob/master/src/Wt2Html/DOMPostProcessor.php#L734

but the above css isn't conditional on it.

It does use mw-content-$dir elsewhere, but see T258719

Change 649462 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] Set the default horizontal alignment based on the page content language

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

Arlolra triaged this task as Medium priority.

T258719 is perhaps relevant for which selector to use, but orthogonal to the issue here.

Change 654310 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[integration/visualdiff@master] Pretty much revert f01a5bc

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

Change 654311 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[integration/visualdiff@master] Revert most of 70ae32d

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

Change 654310 merged by Subramanya Sastry:
[integration/visualdiff@master] Pretty much revert f01a5bc

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

Change 649462 merged by jenkins-bot:
[mediawiki/core@master] Set the default horizontal alignment based on the page content language

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

Change 654311 merged by Subramanya Sastry:
[integration/visualdiff@master] Revert most of 70ae32d

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