Created attachment 9239
screenshot of the issue on Hebrew Wikipedia

Attached:

Also, for cross-reference, I've reported this on Hebrew Wikipedia...
http://he.wikipedia.org/wiki/%D7%A9%D7%99%D7%97%D7%AA_%D7%95%D7%99%D7%A7%D7%99%D7%A4%D7%93%D7%99%D7%94:%D7%A9%D7%92%D7%A8%D7%99%D7%A8%D7%95%D7%AA#Layout_issue_with_English_preference_setting

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.