Page MenuHomePhabricator

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

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

Amire80 created this task.Mar 25 2017, 11:58 AM
Restricted Application added a project: I18n. · View Herald TranscriptMar 25 2017, 11:58 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson triaged this task as Low priority.Apr 10 2017, 6:55 PM
Jdlrobson added a subscriber: Jdlrobson.

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.

Jdlrobson updated the task description. (Show Details)
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJun 14 2017, 11:35 PM

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

Pulling in patch from volunteer into sprint for visibility!

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

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

TheDJ added a subscriber: TheDJ.Apr 17 2018, 8:54 AM

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.

TheDJ added a comment.EditedApr 17 2018, 8:58 AM

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 reopened this task as Open.Jun 17 2018, 6:57 PM
eranroz added a subscriber: eranroz.

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
alexhollender 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

Closeup of USA infobox

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

Jdlrobson reassigned this task from ABorbaWMF to ovasileva.Jun 26 2018, 10:13 PM

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

ovasileva closed this task as Resolved.Jun 27 2018, 9:01 AM

Looks good, thanks all