Page MenuHomePhabricator

Using an LTR wiki in an RTL language aligns infobox labels incorrectly
Closed, ResolvedPublic

Assigned To
Authored By
Amire80
Mar 25 2017, 11:58 AM
Referenced Files
F22693864: Screen Shot 2018-06-26 at 2.41.10 PM.png
Jun 26 2018, 10:10 PM
F22694048: Screen Shot 2018-06-26 at 2.58.18 PM.png
Jun 26 2018, 10:10 PM
F22694119: Screen Shot 2018-06-26 at 3.07.40 PM.png
Jun 26 2018, 10:10 PM
F22694010: Screen Shot 2018-06-26 at 2.58.18 PM.png
Jun 26 2018, 10:10 PM
F22693664: image.png
Jun 26 2018, 10:10 PM
F22693788: image.png
Jun 26 2018, 10:10 PM
F22693849: Screen Shot 2018-06-26 at 2.40.21 PM.png
Jun 26 2018, 10:10 PM
F22633732: Screen Shot 2018-06-25 at 9.42.54 AM.png
Jun 25 2018, 1:49 PM
Tokens
"Like" token, awarded by Eugene233.

Description

To reproduce, go to https://en.m.wikipedia.org/wiki/Hararit?uselang=he . This is an English Wikipedia article, with the UI language set to Hebrew.

Notice that the infobox labels are aligned to the right, while they are supposed to be aligned to the left.

The following should be incorporated into the file resources/skins.minerva.content.styles/hacks.less.

[dir="rtl"] .content .infobox {
	/* @noflip */
	text-align: left;
}

Testing instructions

  1. Ask Jon to switch staging to Hebrew
  2. Check that infobox labels and values are right-aligned (you can see this for reference T161399#4311864)
  3. Add ?uselang=en to page URL and check that infobox labels and values are still right-aligned
  4. Ask Jon to switch staging to English
  5. Check that infobox labels and values are left-aligned
  6. Add ?uselang=he to page URL and check that infobox labels and values are still left-aligned

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson subscribed.

The text-align: right rule comes from .content table.infobox. It can be rectified by adding a check for dir="rtl"
Suggested low priority as this can only be accessed by URL via the mobile interface.

Jdlrobson lowered the priority of this task from Low to Lowest.May 1 2017, 5:30 PM

@Amire80 is this simply a case of adding:

[dir="rtl"] .content table.infobox {
    text-align: left;
}

?
Can you try adding that to User minerva.css and see if that works ?

It does work like this:

[dir="rtl"] .content .infobox {
	/* @noflip */
	text-align: left;
}

Looks pretty hacky and artificial, but resolves the problem.

Change 373286 had a related patch set uploaded (by Eugene233; owner: Eugene233):
[mediawiki/skins/MinervaNeue@master] Added Hack to assign info boxes properly when using RTL languages on LTR wiki

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

xSavitar renamed this task from using an LTR wiki in an RTL language aligns infobox labels incorrectly to Using an LTR wiki in an RTL language aligns infobox labels incorrectly.Aug 23 2017, 1:59 PM

Change 373286 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] using an LTR wiki in an RTL language aligns infobox labels incorrectly

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

Thanks for CR+2 the patch @Jdlrobson. Can this be marked as resolved? :)

This disturbs RTL wikis, having infobox left aligned is not that expected on Persian Wikipedia, and its info shouldn't be left aligned in any RTL wiki. See

image.png (716×587 px, 128 KB)
on https://fa.m.wikipedia.org/wiki/هری_پاتر_(شخصیت) I've workaround it locally on https://fa.wikipedia.org/w/index.php?type=revision&diff=23005783&oldid=23005756

This seems like a deeper issue. The CSS is parsed with the incorrect language settings.

@media (min-width: 720px) {
  table.infobox {
    margin: 0.5em 35px 1em 0 !important;
    max-width: 320px;
   width: auto !important;
   float: left !important;
   clear: left !important;
  }
}

Those statements are flipped and they should not have been flipped. It's content CSS and the content css is english, so that CSS shouldn't be flipped. If it is, then that means it is being processed as UI instead of Content.

The statements in the original MediaWiki:Common.css are:

/* Infobox template style */
.infobox {
	border: 1px solid #a2a9b1;
	border-spacing: 3px;
	background-color: #f8f9fa;
	color: black;
	/* @noflip */
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	/* @noflip */
	float: right;
	/* @noflip */
	clear: right;
	font-size: 88%;
	line-height: 1.5em;
}
eranroz subscribed.

Reopen per @Ebraminio comment

Change 440759 had a related patch set uploaded (by Eranroz; owner: Eranroz):
[mediawiki/skins/MinervaNeue@master] Fixing alignment of infoboxes for RTL/LTR

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

Change 440759 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fixing alignment of infoboxes for RTL/LTR

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

Jdlrobson added a subscriber: Eugene233.

Over to you Alex - please check infoboxes on RTL and LTR languages. YOu'll probably find staging helpful for this so let me know if I need to switch the language.

@Jdlrobson I'm a little confused here. Can you provide a screenshot of the incorrect alignment compared with the correct alignment?

Incorrect alignment example in production (before applying the fix):
https://he.m.wikipedia.org/wiki/%D7%9E%D7%95%D7%A0%D7%93%D7%99%D7%90%D7%9C_2018?uselang=he
(labels aligned right correctly, values aligned left, incorrectly)

Ok. Further clarification needed b/c the example provided above is different than the example in the description. Is this fix is intended to work on RTL language wikis and/or LTR language wikis when uselang is set to an RTL language?

Also adding this for clarification, although I'm not entirely sure it captures the issue accurately.

labels aligned right correctly, values aligned left, incorrectlylabels and values aligned right, correctly
Screen Shot 2018-06-25 at 9.42.54 AM.png (1×734 px, 154 KB)
Screen Shot 2018-06-25 at 9.42.40 AM.png (1×782 px, 158 KB)
alexhollender_WMF added a subscriber: ABorbaWMF.

Passing this over to @ABorbaWMF to QA. It would be great if someone could take a look at the testing instructions I added and make sure they describe the desired states correctly, @Amire80 @eranroz @Jdlrobson.

@alexhollender, sounds good and I'll take a look. Quick question, is there a reason we would switch staging to Hebrew twice as in steps 1 and 4 above. Is there a need to change it to another language in between those steps?

@Jdlrobson, Let me know what works for you in terms of timing for the staging switch to Hebrew.

@ABorbaWMF whoops, just updated step 4... change to *english

I've updated staging to Hebrew Wikipedia.

Seems to be working for me across a few devices. Tried a couple of URLs as well. I did notice some spacing issues with references in the infobox and the USA article has weird spacing between the globe image in the infobox and some text that seems to relate to a button that didn't load. But that seems like a separate issue.

URLw/ ?uselang=en
image.png (1×720 px, 278 KB)
image.png (1×720 px, 270 KB)
Screen Shot 2018-06-26 at 2.40.21 PM.png (1×376 px, 176 KB)
Screen Shot 2018-06-26 at 2.41.10 PM.png (1×368 px, 175 KB)
Screen Shot 2018-06-26 at 2.58.18 PM.png (1×414 px, 145 KB)
Screen Shot 2018-06-26 at 2.58.18 PM.png (1×414 px, 145 KB)

Closeup of USA infobox

Screen Shot 2018-06-26 at 3.07.40 PM.png (1×672 px, 306 KB)

@Jdlrobson, we can switch back to en on staging now if you like.

Thanks Anthony. USA issue looks like a problem with our staging server so i think we are good to sign this off!

Looks good, thanks all