Page MenuHomePhabricator

Templates should have 'meta icons' to fix text direction issues
Open, NormalPublic

Description

Many Wikimedia wikis use "header icons" to display meta information about articles - whether they have a particular quality ranking, whether they are protected or semi-protected or whatever. These are absolutely positioned using CSS.

To see a widely used example of this, check out this template on en.wp:

http://en.wikipedia.org/wiki/Template:Topicon

On right-to-left wikis like Hebrew, these are placed on the other side of the screen, obviously.

But an issue can arise if you read a right-to-left wiki with a left-to-right language set in your preferences.

An example:

  1. Go to Hebrew Wikipedia - http://he.wikipedia.org/ - and sign in.
  2. Set your preferences to have English (or another LTR language).
  3. Go to the article on Israel - http://he.wikipedia.org/wiki/%D7%99%D7%A9%D7%A8%D7%90%D7%9C

This article has icons for being protected (or semi-protected, can't tell: my Hebrew isn't that good) and for being a featured article. Only it overlaps the title of the article which has been put on the left.

One possible solution for this is to specify a particular CSS class or other method which positions the 'meta icons' based on where the title is.

It is worth noting also that not all articles in right-to-left languages have right-to-left article names - see http://he.wikipedia.org/wiki/London_Calling


Version: unspecified
Severity: normal

Details

Reference
bz31738

Event Timeline

bzimport raised the priority of this task from to Normal.Nov 21 2014, 11:50 PM
bzimport added a project: MediaWiki-Templates.
bzimport set Reference to bz31738.
bzimport added a subscriber: Unknown Object (MLST).

Created attachment 9239
screenshot of the issue on Hebrew Wikipedia

Attached:

This is a wider problem. These top icons are not part of the core code - they are implemented separately in every project. So, apparently there is demand for them, but it's impossible to fix them in all languages in one fell swoop.

It would be nice to have some core CSS that implements them in a uniform and easy to use way and makes them behave nicely with right-to-left languages and other things on the top of pages, such as the FlaggedRevs box. When this is done, every project will have to convert its templates to use the new functionality.

reachouttothetruth wrote:

Duplicate of bug 23796? A software-based solution would take care of this problem.

More like a blocker of 23796 with RTL focus.

When doing the 1.18 RTL improvements, I did not really know what the direction of the page title should be based on. I left it, so it follows the user language direction. Because these icons are at the opposite side of where the content starts, it obviously interferes with the page title when using a language in the other direction...

A solution could be to make the page title follow the page content language, so the page title would no longer depend on the user language direction.

On dewiki we solve this problem with

mw.loader.using( [ 'mediawiki.util' ], function () { $( function () {

		if ( mw.config.get( 'dontShowTopicons', false ) ) return;
		mw.util.$content
		.find( 'div.topicon' )
		.insertBefore( '#firstHeading' )
		.show();

} ) } );
in [[MediaWiki:Vector.js]]

div.topicon {

		float: right;
		margin-left: 3px;
		font-size: 0.8em;

}
#firstHeading {

		overflow: visible;

}
in [[MediaWiki:Vector.css]

and
.topicon {

		display: none;

}
in [[MediaWiki:Common.css]]

Example: https://de.wikipedia.org/w/index.php?title=Burg_Stahleck_%28Bacharach%29&uselang=ar&useskin=vector

For enwiki and other wikis with [[Template:Top icon]] containing absolute positioning and individual position per icon the text direction issue can be fixed:

Actual:

<div class="topicon" style="display: none; right: 55px;">
div.topicon {

display: block !important;
position: absolute;
top: 10px;
z-index: 10;

}

Solution:

<div class="topicon" style="display: none; margin-right: 55px; margin-left: 55px;">
div.topicon {

display: block !important;
position: absolute;
top: 10px;
z-index: 10;
right: 0; /* gets flipped for RTL */

}

(In reply to comment #8)

right: 0; /* gets flipped for RTL */

See also relevant bug 31923: flipping of site CSS should be disabled by default.

Restricted Application added a project: I18n. · View Herald TranscriptJun 2 2015, 2:20 PM
Amire80 moved this task from Backlog to MediaWiki-core on the RTL board.Aug 30 2015, 7:16 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 30 2015, 7:16 AM
Jorm removed a subscriber: Jorm.Dec 26 2015, 7:20 PM
Amire80 moved this task from Untriaged to RTL on the I18n board.Feb 28 2018, 12:11 PM