Directionality support

If you want to make a feature or extension compatible with right-to-left interface and different directionality in general, here are some guidelines:

ResourceLoader
Thanks to ResourceLoader including CSSJanus, CSS is automatically flipped to right-to-left when the user language is RTL. This is default since 1.18 (in previous versions it was dependent on the wiki content language).
 * Attention: when developing with ResourceLoader debug on, the CSS will not be flipped. So you should test RTL interface with debug off.

What kind of languages?

 * $wgLang - user language (and the respective direction)
 * $wgContLang - site content language (and respective direction) -> here LTR
 * Title->getPageLanguage - page content language (and respective direction) -> by default the same as site content language
 * There are some default exceptions: see below
 * It can be set in extensions by the hook PageContentLanguage

What should follow which kind?

 * Special pages follow user language by default.
 * Source code should be English (CSS/JS pages are set to English by default).
 * Pages with translated subpages should follow the language of the translation (e.g. "Page" is wgContLang, "Page/he" is "he"). This is by default for the MediaWiki namespace.
 * Input boxes and textareas follow content direction by default.
 * When viewing a diff, it follows the user language, but the actual diff text is in the page content language.

What should I add in the source code?

 * Anything on special pages that is different from the user language should have a tag.
 * Anything on custom namespaces that contains text different from the default wiki content should also have a div tag.
 * When the diff text is not the same as the page content language, use $diff->setDiffLang( 'code' ); where $diff is a DifferenceEngine object.

lang/dir attributes
You should use HTML: but sometimes that is difficult in dynamically generated elements and you can fall back on CSS:

wiki content
You can use .mw-content-ltr and .mw-content-rtl to make use of edit section links and ul/ol elements based on that direction.
 * E.g.

This is of course used for the page content of articles. It is also for example used in the CodeReview extension for the code summary and code comments, which can contain ul/ol elements (* and # wikitext).

Adding UI stuff within these classes should not be done. For example, the category links and FlaggedRevs review form are inside #bodyContent but outside .mw-content-ltr/rtl.

A new feature is that these classes can be used within these classes. For example, .mw-content-rtl can be used in an LTR (mw-content-ltr) article. This is useful for multilingual pages. Prior to this, local MediaWiki:Common.css hacks had to be used to make e.g. bullet lists show correctly in  text (note that that has not changed; only mw-content-ltr/rtl classes contain these improvements).

body classes
The body tag has an ltr or rtl class by default, which follows the user language. You shouldn't use that, because CSS is automatically flipped based on the user language. The body tag also features a new sitedir-ltr and sitedir-rtl class which follows $wgContLang->getDir</tt>. If there is need for it, a "userlang-ltr/rtl" and/or "pagelang-ltr/rtl" could be added as well.

float/text-align
Shared CSS features the following, which are flipped according to the user language direction (so this is for LTR): You can use these when useful.

You can also use $wgLang->alignStart</tt>, $wgContLang->alignStart</tt>, $wgLang->alignEnd</tt>, $wgContLang->alignEnd</tt> which gives the appropriate 'right' or 'left' values.

Examples
Special:AllMessages is a special page, which means it follows the user language direction. However, the actual messages should follow the direction of the selected language. The cells in the table containing the content of the messages, have a lang & dir attribute.
 * translatewiki:Special:Allmessages = English, LTR
 * translatewiki:Special:Allmessages/he = Hebrew, RTL

Local wikis
MediaWiki:Common.css pages and relatives are also flips. This means that you have to add @noflip where needed.