Page MenuHomePhabricator

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


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:

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 - - and sign in.
  2. Set your preferences to have English (or another LTR language).
  3. Go to the article on Israel -

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

Version: unspecified
Severity: normal


ReferenceSource BranchDest BranchAuthorTitle
repos/cloud/toolforge/builds-api!34create_harbor_projectmainraymond-ndibebuilds-api: create the harbor project beforehand if it does not exist
repos/cloud/toolforge/builds-api!33container_list_from_task_specmainraymond-ndibebuilds-api: Get the list of containers from the task spec
repos/cloud/toolforge/builds-api!13cleanup_old_pipelinerunsmainraymond-ndibe[builds-api.start] Cleanup old builds when triggering a new one
Customize query in GitLab

Event Timeline

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

Created attachment 9239
screenshot of the issue on Hebrew Wikipedia


hewiki_rtl.png (473×1 px, 195 KB)

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;
		.find( 'div.topicon' )
		.insertBefore( '#firstHeading' )

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

div.topicon {

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

#firstHeading {

		overflow: visible;

in [[MediaWiki:Vector.css]

.topicon {

		display: none;

in [[MediaWiki:Common.css]]


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


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

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



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