Jump to content

Directionality support/zh: Difference between revisions

From mediawiki.org
Content deleted Content added
Created page with "== 参见 =="
 
FuzzyBot (talk | contribs)
Updating to match new version of source page
 
(41 intermediate revisions by 8 users not shown)
Line 1: Line 1:
<languages/>
<languages/>
{{i18n navigation}}
{{i18n navigation}}
[[File:LTR content with RTL interface (after).png|thumb|350px|[http://translatewiki.net/wiki/Translating:MediaWiki?uselang=he English (LTR) content with Hebrew (RTL) interface.]]]
[[File:LTR content with RTL interface (after).png|thumb|350px|[http://translatewiki.net/wiki/Translating:MediaWiki?uselang=he 希伯来语(RTL)界面下的英语(LTR)内容。]]]
对不同{{ll|Writing systems|书写}}方向(从左向右、从右向左)的支持对多语言软件至关重要。
Support for different {{ll|Writing systems|writing}} directions (left-to-right, right-to-left) is an important aspect for multilingual software.
Since {{ll|MediaWiki 1.18|MediaWiki 1.18}}, the support has been considerably improved.
{{ll|MediaWiki 1.18|MediaWiki 1.18}}版本以来,这方面的支持已有了巨大改善。


如果您是系统管理员或开发者,希望开发与从右向左等等不同方向的书写体系的界面相兼容的功能或扩展,本页包括了相关的信息和指导。
This page gives some relevant information, and guidelines for developers and wiki administrators if you want to make a feature or extension compatible with the right-to-left interface and different directionality in general.


<div lang="en" dir="ltr" class="mw-content-ltr">
== User-level tips ==
== User-level tips ==
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
Some general tips for users, before getting to details for developers:
Some general tips for users, before getting to details for developers:
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
* Most browsers support changing the direction of a plain-text editing area, such as article search boxes, wiki syntax editing, edit summary, etc. Depending on browsers and operating systems, this is done by Ctrl-Shift (Chrome and IE on Windows), Ctrl-Shift-X (Firefox), Option-Click-Change direction (Mac). This should help you typing in a direction that is different from the site's usual direction.
* Most browsers support changing the direction of a plain-text editing area, such as article search boxes, wiki syntax editing, edit summary, etc.
* When typing a section in a language that has a direction that is different from the site's, add a div tag with appropriate lang, dir and class attributes. For example, when typing an English section in the Arabic Wikipedia, type <nowiki><div lang="en" dir="ltr" class="mw-content-ltr"></nowiki> in the beginning and {{tag|div|close}} in the end.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">Depending on browsers and operating systems, this is done by {{Key press|Ctrl|Shift}} (Chrome and IE on Windows), {{Key press|Ctrl|Shift|X}} (Firefox), Option-Click-Change direction (Mac).</span> <span lang="en" dir="ltr" class="mw-content-ltr">This should help you typing in a direction that is different from the site's usual direction.</span>
* When typing just a few words inside a paragraph, put them inside a {{tag|span|open}} tag with appropriate lang and dir attributes. (Many wikis have a template for this, such as <nowiki>{{lang}}</nowiki>).
<div lang="en" dir="ltr" class="mw-content-ltr">
* To separate numbers from an adjacent word with different directionality, use RLM or LRM characters. Many wikis have templates for this, for example <nowiki>{{כ}}</nowiki> in the Hebrew Wikipedia, <nowiki>{{RLM}}</nowiki> in the Arabic Wikipedia, <nowiki>{{رچ}}</nowiki> in the Persian Wikipedia, etc. When a template is available, it's usually preferred to using the Unicode character itself.
* When typing a section in a language that has a direction that is different from the site's, add a div tag with appropriate lang, dir and class attributes.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">For example, when typing an English section in the Arabic Wikipedia, type <syntaxhighlight lang=html inline><div lang="en" dir="ltr" class="mw-content-ltr"></syntaxhighlight> in the beginning and {{tag|div|close}} in the end.</span>
<div lang="en" dir="ltr" class="mw-content-ltr">
* When typing just a few words inside a paragraph, put them inside a {{tag|span|open}} tag with appropriate lang and dir attributes.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">(Many wikis have a template for this, such as <nowiki>{{lang}}</nowiki>).</span>
<div lang="en" dir="ltr" class="mw-content-ltr">
* To separate numbers from an adjacent word with different directionality, use RLM or LRM characters.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">Many wikis have templates for this, for example <nowiki>{{כ}}</nowiki> in the Hebrew Wikipedia, <nowiki>{{RLM}}</nowiki> in the Arabic Wikipedia, <nowiki>{{رچ}}</nowiki> in the Persian Wikipedia, etc.</span> <span lang="en" dir="ltr" class="mw-content-ltr">When a template is available, it's usually preferred to using the Unicode character itself.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
You can report bugs in RTL handling in Phabricator in any MediaWiki-related project using the RTL tag.
You can report bugs in RTL handling in Phabricator in any MediaWiki-related project using the RTL tag.
</div>


== ResourceLoader ==
<span id="ResourceLoader"></span>
==资源加载器==
<span lang="en" dir="ltr" class="mw-content-ltr">Thanks to [[ResourceLoader]] including [https://github.com/cssjanus/cssjanus CSSJanus], CSS is automatically flipped to right-to-left when the user language is RTL.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">This is default since 1.18 (in previous versions it was [[bugzilla:6100|dependent on the wiki content language]]).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">There is relatively little CSS that must depend on the content language.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
Thanks to [[ResourceLoader]] including [https://github.com/cssjanus/cssjanus 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 [[bugzilla:6100|dependent on the wiki content language]]). There is relatively little CSS that must depend on the content language.
* '''Attention:''' when using ResourceLoader's [[ResourceLoader/Features#Debug mode|debug mode]], the CSS may be inconsistently rendered compared to the production mode. As a temporary work-around test RTL interface with debug off. (Issue being tracked as [[Phabricator:T29025]].)
* '''Attention:''' when using ResourceLoader's [[ResourceLoader/Architecture#Debug mode|debug mode]], the CSS may be inconsistently rendered compared to the production mode.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">As a temporary work-around test RTL interface with debug off. (Issue being tracked as [[Phabricator:T29025]].)</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
== What kind of languages? ==
== What kind of languages? ==
</div>
{{Main|Language in MediaWiki}}

主条目:
{{ll|Manual:Language}}

<div lang="en" dir="ltr" class="mw-content-ltr">
* $wgLang - user language (and the respective direction)
* $wgLang - user language (and the respective direction)
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* $wgContLang - site content language (and respective direction) -> here LTR
* $wgContLang - site content language (and respective direction) -> here LTR
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Title->getPageLanguage() - page content language (and respective direction) -> by default the same as site content language
* Title->getPageLanguage() - page content language (and respective direction) -> by default the same as site content language
</div>
** There are some default exceptions: see below
** <span lang="en" dir="ltr" class="mw-content-ltr">There are some default exceptions: see below</span>
** It can be set in extensions by the hook [[Manual:Hooks/PageContentLanguage|PageContentLanguage]]
** <span lang="en" dir="ltr" class="mw-content-ltr">It can be set in extensions by the hook {{ll|Manual:Hooks/PageContentLanguage|PageContentLanguage}}</span>
** This sets the TOC (and stuff like grammar, although not really relevant mostly) to that language. To do that only, use parserOptions->setTargetLanguage()
** <span lang="en" dir="ltr" class="mw-content-ltr">This sets the TOC (and stuff like grammar, although not really relevant mostly) to that language. To do that only, use parserOptions->setTargetLanguage()</span>
* In extensions that should remain compatible with 1.17, you can use wfUILang(), however this breaks compatibility with 1.16 and below. This returns $wgLang in 1.18 and higher but $wgContLang in 1.17 (by default).
<div lang="en" dir="ltr" class="mw-content-ltr">
* In extensions that should remain compatible with 1.17, you can use wfUILang(), however this breaks compatibility with 1.16 and below.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">This returns $wgLang in 1.18 and higher but $wgContLang in 1.17 (by default).</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
=== What should follow which kind? ===
=== What should follow which kind? ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* Special pages follow the user language by default.
* Special pages follow the user language by default.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Source code should be English (CSS/JS pages are set to English by default).
* Source code should be English (CSS/JS pages are set to English by default).
</div>
* Pages with translated subpages should follow the language of the translation (e.g. "Page" is wgContLang, "Page/he" is "he"). This is the default for the MediaWiki namespace.
<div lang="en" dir="ltr" class="mw-content-ltr">
* Pages with translation as subpages should follow the language of the translation (e.g. "Page" is wgContLang, "Page/he" is "he"). This is the default for the MediaWiki namespace.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Input boxes and textareas follow content direction by default.
* Input boxes and textareas follow content direction by default.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* When viewing a diff, it follows the user language, but the actual diff text is in the page content language.
* When viewing a diff, it follows the user language, but the actual diff text is in the page content language.
[[File:Wait, -tahW- The Twisted Road to Right-to-Left Language Support.webm|thumb|Directionality can be confusing, but you can watch [[User:Mooeypoo|mooeypoo]]'s [[W:Linux.conf.au|linux.conf.au]] talk entitled "Wait, ?tahW: The Twisted Road to Right-to-Left Language Support" to get a better understanding of the issues and solutions involved.]]
[[File:Wait, -tahW- The Twisted Road to Right-to-Left Language Support.webm|thumb|Directionality can be confusing, but you can watch [[User:Mooeypoo|mooeypoo]]'s [[w:Linux.conf.au|linux.conf.au]] talk entitled "Wait, ?tahW: The Twisted Road to Right-to-Left Language Support" to get a better understanding of the issues and solutions involved.]]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
== What should I add in the source code? ==
== What should I add in the source code? ==
</div>
* Anything on special pages that is different from the user language should have a <nowiki><div dir="..." lang="..."></nowiki> tag.
* <span lang="en" dir="ltr" class="mw-content-ltr">Anything on special pages that is different from the user language should have a <syntaxhighlight lang=html inline><div dir="..." lang="..."></syntaxhighlight> tag.</span>
*: Example: SpecialRecentchanges->setTopText() which adds the "recentchangestext" message in the wiki content language.
*: <span lang="en" dir="ltr" class="mw-content-ltr">Example: SpecialRecentchanges->setTopText() which adds the "recentchangestext" message in the wiki content language.</span>
* Anything on custom namespaces that contains text different from the default wiki content should also have a div tag.
<div lang="en" dir="ltr" class="mw-content-ltr">
* When the diff text is not the same as the page content language, use <tt>$diff->setTextLanguage( 'code' );</tt> where $diff is a DifferenceEngine object.
* Anything on custom namespaces that contains text different from the default wiki content should also have a <code>div</code> tag.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* When the diff text is not the same as the page content language, use {{phpi|$diff->setTextLanguage( 'code' );}} where $diff is a DifferenceEngine object.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
=== lang/dir attributes ===
=== lang/dir attributes ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
You should use HTML:
You should use HTML:
</div>
<source lang="php">

<syntaxhighlight lang="php">
Xml::rawElement( 'div', array( 'lang' => $wgContLang->getCode(), 'dir' => $wgContLang->getDir() );
Xml::rawElement( 'div', array( 'lang' => $wgContLang->getCode(), 'dir' => $wgContLang->getDir() );
</syntaxhighlight>
</source>

but sometimes that is difficult in dynamically generated elements and you can fall back on CSS:
<span lang="en" dir="ltr" class="mw-content-ltr">but sometimes that is difficult in dynamically generated elements and you can fall back on CSS:</span>
<source lang="css">

<syntaxhighlight lang="css">
.class { direction: ltr; }
.class { direction: ltr; }
</syntaxhighlight>
</source>


<div lang="en" dir="ltr" class="mw-content-ltr">
=== Wiki content ===
=== Wiki content ===
</div>
{{MW 1.18|and after}}
{{MW 1.18|and after}}
You can use <tt>mw-content-ltr</tt> and <tt>mw-content-rtl</tt> classes to make use of edit section links and ul/ol elements based on that direction.
<div lang="en" dir="ltr" class="mw-content-ltr">
You can use <code>mw-content-ltr</code> and <code>mw-content-rtl</code> classes to make use of edit section links and ul/ol elements based on that direction.
</div>
:E.g.

<source lang="php">
:例如

<syntaxhighlight lang="php">
Xml::rawElement( 'div', array(
Xml::rawElement( 'div', array(
'class' => 'mw-content-' . $wgLang->getDir(),
'class' => 'mw-content-' . $wgLang->getDir(),
Line 68: Line 133:
'Text'
'Text'
);
);
</syntaxhighlight>
</source>

<div lang="en" dir="ltr" class="mw-content-ltr">
This is of course used for the page content of articles.
This is of course used for the page content of articles.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* On file pages, it is only added around the actual text while the rest of the file page is custom UI (file history, ...).
* On file pages, it is only added around the actual text while the rest of the file page is custom UI (file history, ...).
</div>
* On category pages it is added as on regular pages, but the text in the user language is embedded in a div with lang & dir attributes according to the user language.
<div lang="en" dir="ltr" class="mw-content-ltr">
* On special pages it is ''not'' added because these are largely in the user language. A piece of text on special pages can be in the content language, which should then be embedded in these classes. It is for example used in the CodeReview extension for the code summary and code comments, which can contain ul/ol elements (* and # wikitext) in the wiki content language and in principle not the user language obviously.
* On category pages it is added as on regular pages, but the text in the user language is embedded in a <code>div</code> with <code>lang</code> and <code>dir</code> attributes according to the user language.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* On special pages it is ''not'' added because these are largely in the user language.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">A piece of text on special pages can be in the content language, which should then be embedded in these classes.</span> <span lang="en" dir="ltr" class="mw-content-ltr">It is for example used in the CodeReview extension for the code summary and code comments, which can contain ul/ol elements (* and # wikitext) in the wiki content language and in principle not the user language obviously.</span>


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.
<span lang="en" dir="ltr" class="mw-content-ltr">Adding UI stuff within these classes should not be done.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">For example, the category links and FlaggedRevs review form are inside #bodyContent but outside .mw-content-ltr/rtl.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
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 <nowiki><div dir="ltr/rtl"></nowiki> text. You should therefore use <nowiki><div class="mw-content-ltr/rtl"></nowiki> instead of <nowiki><div dir="ltr/rtl"></nowiki> when editing wiki pages.
See also [[Special:MyLanguage/Manual:Interface/IDs and classes|IDs and classes]].

</div>
See also [[Manual:Interface/IDs and classes]].


<div lang="en" dir="ltr" class="mw-content-ltr">
=== body classes ===
=== body classes ===
</div>
The body tag has an <tt>ltr</tt> or <tt>rtl</tt> 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 (1.18) <tt>sitedir-ltr</tt> and <tt>sitedir-rtl</tt> class which follows <tt>$wgContLang->getDir()</tt>. If there is need for it, a "userlang-ltr/rtl" and/or "pagelang-ltr/rtl" could be added as well.
<span lang="en" dir="ltr" class="mw-content-ltr">The body tag has an <code>ltr</code> or <code>rtl</code> class by default, which follows the user language.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">You shouldn't use that, because CSS is automatically flipped based on the user language.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The body tag also features a new (1.18) <code>sitedir-ltr</code> and <code>sitedir-rtl</code> class which follows {{phpi|$wgContLang->getDir()}}.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If there is need for it, a "userlang-ltr/rtl" and/or "pagelang-ltr/rtl" could be added as well.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
=== float/text-align ===
=== float/text-align ===
</div>
You can use <tt>$wgLang->alignStart()</tt>, <tt>$wgContLang->alignStart()</tt>, <tt>$wgLang->alignEnd()</tt>, <tt>$wgContLang->alignEnd()</tt> which gives the appropriate 'right' or 'left' values.


<div lang="en" dir="ltr" class="mw-content-ltr">
You can use CSS <tt>float</tt> or <tt>text-align</tt> of which the value (left/right) is flipped for RTL interface languages.
You can use {{phpi|$wgLang->alignStart()}}, {{phpi|$wgContLang->alignStart()}}, {{phpi|$wgLang->alignEnd()}}, {{phpi|$wgContLang->alignEnd()}} which gives the appropriate 'right' or 'left' values.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
== Examples ==
You can use CSS <code>float</code> or <code>text-align</code> of which the value (left/right) is flipped for RTL interface languages.
</div>

<span id="Examples"></span>
== {{LC zh|lang = {{{lang|}}}|type = H|zh-hans = 示例|zh-hant = 範例}} ==

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
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.
</div>
* [[Special:Allmessages]] = English, LTR

* [[Special:Allmessages/he]] = Hebrew, RTL
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Special:Allmessages]] = English, LTR</span>
The cells in the table containing the content of the messages, have a lang & dir attribute.
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Special:Allmessages/he]] = Hebrew, RTL</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
The cells in the table containing the content of the messages, have a <code>lang</code> & <code>dir</code> attribute.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
The [[Extension:Translate|Translate extension]], making use of the PageContentLanguage hook, sets the right language (and consequently direction) for translated pages, see e.g. [[meta:Wikimedia_maintenance_notice/ar]] which benefits from the mw-content-rtl class on an LTR wiki.
The {{ll|Extension:Translate|Translate}} extension, making use of the PageContentLanguage hook, sets the right language (and consequently direction) for translated pages, see e.g. [[meta:Wikimedia_maintenance_notice/ar]] which benefits from the mw-content-rtl class on an LTR wiki.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
== Local wikis ==
== Local wikis ==
</div>
MediaWiki:Common.css pages and relatives are also flipped. This means that you have to add @noflip where needed.
<span lang="en" dir="ltr" class="mw-content-ltr">MediaWiki:Common.css pages and relatives are also flipped.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">This means that you have to add @noflip where needed.</span>


<div lang="en" dir="ltr" class="mw-content-ltr">
See [[phab:T33923|T33923]]: site CSS should not be flipped by default
See [[phab:T33923|T33923]]: site CSS should not be flipped by default.
</div>


== Issues ==
<span id="Issues"></span>
== 问题 ==
* Most major features and extensions have improved support since about 1.19, see [[translatewiki:Project:Better directionality and i18n development]] for that.
* <span lang="en" dir="ltr" class="mw-content-ltr">Most major features and extensions have improved support since about 1.19, see [[translatewiki:Project:Better directionality and i18n development]] for that.</span>
* Known remaining issues:
* <span lang="en" dir="ltr" class="mw-content-ltr">Known remaining issues:</span>
** External link icons are flipped according to user language direction (minor issue)
** <span lang="en" dir="ltr" class="mw-content-ltr">External link icons are flipped according to user language direction (minor issue)</span>
** [[Extension:LiquidThreads|LiquidThreads]]: Use contlang instead of pagelang, otherwise special page returns userlang
** {{ll|Extension:LiquidThreads|LiquidThreads}} - <span lang="en" dir="ltr" class="mw-content-ltr">Use <code>contlang</code> instead of <code>pagelang</code>, otherwise special page returns <code>userlang</code></span>
** [[Extension:WikiLove|WikiLove]]: kittens aligned left (<nowiki>[[File:Blabla.jpg|left]]</nowiki>) should be aligned right in RTL wikis (minor issue)
** {{ll|Extension:WikiLove|WikiLove}} - <span lang="en" dir="ltr" class="mw-content-ltr">kittens aligned left (<code><nowiki>[[File:Blabla.jpg|left]]</nowiki></code>) should be aligned right in RTL wikis (minor issue)</span>
** OmegaWiki: needs general overhaul (Expression and DefinedMeaning pages should follow user direction) + [[bugzilla:23035|23035]]
** <span lang="en" dir="ltr" class="mw-content-ltr">OmegaWiki: needs general overhaul (Expression and DefinedMeaning pages should follow user direction) + [[bugzilla:23035|23035]]</span>
* Search bugs: https://bugzilla.wikimedia.org/buglist.cgi?quicksearch=rtl
* <span lang="en" dir="ltr" class="mw-content-ltr">Search bugs: https://bugzilla.wikimedia.org/buglist.cgi?quicksearch=rtl</span>


<span id="See_also"></span>
== 参见 ==
== 参见 ==
* {{ll|Manual:Interface/IDs and classes}}
* [https://docs.google.com/present/edit?id=0AdI0egeOYDROZGY4emRyZzZfMzc5djQ5bmtmcg&ncl=true Better directionality support] (2011 presentation slides)
* {{ll|Localisation}}
* [[Manual:Interface/IDs and classes]]
* [[translatewiki:Project:Better directionality and i18n development]] <span lang="en" dir="ltr" class="mw-content-ltr">(around 2011) and the much older</span> [[m:BiDi workgroup]]
* [[Localisation]]
* {{ll|Manual:Hooks/PageContentLanguage}}
* [[translatewiki:Project:Better directionality and i18n development]] (around 2011) and the much older [[m:BiDi workgroup]]
* {{ll|Visual editor/Bidirectional text requirements}}
* [[Manual:Hooks/PageContentLanguage]]
* {{ll|Extension:RevisionSlider/Developing a RTL-accessible feature in MediaWiki - what we've learned while creating the RevisionSlider}}
* [[Manual:$wgBetterDirectionality]]
* <span lang="en" dir="ltr" class="mw-content-ltr">[https://www.youtube.com/watch?v=xpumLsaAWGw Quick Intro: Unicode Bidirectional Algorithm] by [[User:MSchottlender-WMF]]</span>
* [[Visual editor/Bidirectional text requirements]]
* [http://rtl.wtf/ rtl.wtf] - <span lang="en" dir="ltr" class="mw-content-ltr">articles and examples about how to support right-to-left online</span>
* [[Extension:RevisionSlider/Developing a RTL-accessible feature in MediaWiki - what we've learned while creating the RevisionSlider]]
* [http://rtl.wtf/ rtl.wtf], articles and examples about how to support right-to-left online


[[Category:Localisation{{#translation:}}]]
[[Category:Localisation{{#translation:}}]]

Latest revision as of 07:59, 1 March 2026

i18n文档
希伯来语(RTL)界面下的英语(LTR)内容。

对不同书写 方向(从左向右、从右向左)的支持对多语言软件至关重要。 自MediaWiki 1.18 版本以来,这方面的支持已有了巨大改善。

如果您是系统管理员或开发者,希望开发与从右向左等等不同方向的书写体系的界面相兼容的功能或扩展,本页包括了相关的信息和指导。

User-level tips

Some general tips for users, before getting to details for developers:

  • Most browsers support changing the direction of a plain-text editing area, such as article search boxes, wiki syntax editing, edit summary, etc.

Depending on browsers and operating systems, this is done by Ctrl+⇧ Shift (Chrome and IE on Windows), Ctrl+⇧ Shift+X (Firefox), Option-Click-Change direction (Mac). This should help you typing in a direction that is different from the site's usual direction.

  • When typing a section in a language that has a direction that is different from the site's, add a div tag with appropriate lang, dir and class attributes.

For example, when typing an English section in the Arabic Wikipedia, type <div lang="en" dir="ltr" class="mw-content-ltr"> in the beginning and ‎</div> in the end.

  • When typing just a few words inside a paragraph, put them inside a ‎<span> tag with appropriate lang and dir attributes.

(Many wikis have a template for this, such as {{lang}}).

  • To separate numbers from an adjacent word with different directionality, use RLM or LRM characters.

Many wikis have templates for this, for example {{כ}} in the Hebrew Wikipedia, {{RLM}} in the Arabic Wikipedia, {{رچ}} in the Persian Wikipedia, etc. When a template is available, it's usually preferred to using the Unicode character itself.

You can report bugs in RTL handling in Phabricator in any MediaWiki-related project using the RTL tag.

资源加载器

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). There is relatively little CSS that must depend on the content language.

  • Attention: when using ResourceLoader's debug mode, the CSS may be inconsistently rendered compared to the production mode.

As a temporary work-around test RTL interface with debug off. (Issue being tracked as Phabricator:T29025.)

What kind of languages?

主条目: Manual:语言

  • $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
    • This sets the TOC (and stuff like grammar, although not really relevant mostly) to that language. To do that only, use parserOptions->setTargetLanguage()
  • In extensions that should remain compatible with 1.17, you can use wfUILang(), however this breaks compatibility with 1.16 and below.

This returns $wgLang in 1.18 and higher but $wgContLang in 1.17 (by default).

What should follow which kind?

  • Special pages follow the user language by default.
  • Source code should be English (CSS/JS pages are set to English by default).
  • Pages with translation as subpages should follow the language of the translation (e.g. "Page" is wgContLang, "Page/he" is "he"). This is the 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.
Directionality can be confusing, but you can watch mooeypoo's linux.conf.au talk entitled "Wait, ?tahW: The Twisted Road to Right-to-Left Language Support" to get a better understanding of the issues and solutions involved.

What should I add in the source code?

  • Anything on special pages that is different from the user language should have a <div dir="..." lang="..."> tag.
    Example: SpecialRecentchanges->setTopText() which adds the "recentchangestext" message in the wiki content language.
  • 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->setTextLanguage( 'code' ); where $diff is a DifferenceEngine object.

lang/dir attributes

You should use HTML:

Xml::rawElement( 'div', array( 'lang' => $wgContLang->getCode(), 'dir' => $wgContLang->getDir() );

but sometimes that is difficult in dynamically generated elements and you can fall back on CSS:

.class { direction: ltr; }

Wiki content

MediaWiki版本:
1.18

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

例如
Xml::rawElement( 'div', array(
        'class' => 'mw-content-' . $wgLang->getDir(),
        'lang' => $wgLang->getCode(),
        'dir' => $wgLang->getDir(),
        'Text'
);

This is of course used for the page content of articles.

  • On file pages, it is only added around the actual text while the rest of the file page is custom UI (file history, ...).
  • On category pages it is added as on regular pages, but the text in the user language is embedded in a div with lang and dir attributes according to the user language.
  • On special pages it is not added because these are largely in the user language.

A piece of text on special pages can be in the content language, which should then be embedded in these classes. It is for example used in the CodeReview extension for the code summary and code comments, which can contain ul/ol elements (* and # wikitext) in the wiki content language and in principle not the user language obviously.

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.

See also IDs and classes.

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 (1.18) sitedir-ltr and sitedir-rtl class which follows $wgContLang->getDir(). If there is need for it, a "userlang-ltr/rtl" and/or "pagelang-ltr/rtl" could be added as well.

float/text-align

You can use $wgLang->alignStart(), $wgContLang->alignStart(), $wgLang->alignEnd(), $wgContLang->alignEnd() which gives the appropriate 'right' or 'left' values.

You can use CSS float or text-align of which the value (left/right) is flipped for RTL interface languages.

示例

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.

The Translate extension, making use of the PageContentLanguage hook, sets the right language (and consequently direction) for translated pages, see e.g. meta:Wikimedia_maintenance_notice/ar which benefits from the mw-content-rtl class on an LTR wiki.

Local wikis

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

See T33923: site CSS should not be flipped by default.

问题

参见