2016-12-02 21 views
3

LTRとRTLの両方の言語をサポートするサイトにしたいと考えています。RTL言語を追加する

私が欲しいのは、いくつかの要素に読み込まれたテキストがRTLの場合、方向をRTLに切り替えます。また、入力の場合、ユーザータイプのテキストの場合、RTLであればトリガし、RTLへの方向を変更します。

Facebookのようなものです。検索にアラビア語のテキストを入力すると、自動的に方向がRTLに切り替わります

グーグルやスクリプトなどのチュートリアルは見つかりませんでした。

私は正しい方向を自動的にトリガーする属性dir="auto"しか見つかりませんでしたが、古いブラウザではサポートされていないようです。

これを行う方法については、アドバイス、チュートリアル、スクリプトなどが参考になります。

+0

これを行う方法は、入力時(onkeyup)にコンテンツをチェックし、内容(first-charまたはすべての文字列)に基づいて 'dir'属性の値を追跡します。 – Dekel

+1

'dir =" auto "'はhtml5の一部です(以前のブラウザではサポートされていません)。 – Dekel

+0

@Dekelあなたの最初のコメントについてYeap私はそれをオプションとして見ましたが、そこにJSの例があります。私は例や何かを見つけることができないことに驚いています – carpics

答えて

1

ユーザがタイプするときにテキストボックスのコンテキストをLTRからRTLに切り替えるだけであれば、入力イベント(入力、キー入力、キーダウンなど)を聞く必要があります。テキストボックスがLTRアラインメントかRTLアラインメントかをコードが判断できるようにします。

しかし、アルゴリズムはそれほど単純ではなく、さまざまな製品が異なった働きをすることに注意してください。いくつかの例 -

  • のFacebook、ほとんどの部分は、最初に「強い」の文字を認識しようとすると、アルゴリズムを使用していますので、英語の多くが続く1つのヘブライ語で文を入力すると、まだ段落が表示されますRTLを整列させます。 (のタイプがのときに表示される内容と、コメントが投稿されたときに表示される内容(別の問題)との違いがあるようです)
  • Googleハングアウトは、そのRTL/LTRコンテキストを各方向の強い文字。入力時に、ある言語の入力を開始すると、コンテキストがLTRからRTLに数回切り替わることがあります。

ここには間違いがありません。唯一の優先度とアルゴリズムとして最適なものがあります。

あなたがここにUnicodeの双方向アルゴリズムにおける「強い文字」について読むことができます。http://unicode.org/reports/tr9/

あなたはMediaWikiの言語ファイルに目的を埋め込むための文字列の最初の「強いキャラクター」を認識する方法の例を見ることができ、 (グループ1はLTRとグループ2のRTLです)これらを使用して、最初に強い文字または大半の文字に基づいてtextareaのdir = ""属性を設定するJavaScriptメソッドを作成できますフィット: https://github.com/wikimedia/mediawiki/blob/6f19bac69546b8a5cc06f91a81e364bf905dee7f/languages/Language.php#L174

RTL/LTRをオンラインでサポートすることを補足します入力とテキストボックスに関するはちょうどではありません。 LTRコンテキストとRTLコンテキストの切り替えには、コンテンツの配置やメニューやロゴなどの位置のミラーリングなど、UIの調整も含まれます。

これは、ページをRTL言語に翻訳できるようにする場合に適しています。つまり、レイアウトも鏡にする必要があります。あなたの唯一の目的がテキストボックスのコンテキストを切り替えることだけであれば、これについて心配する必要はありませんが、サイトで翻訳が許可されているかどうかを確認するには、UIとインターフェイス全体をミラーリングする方法を検討する必要があります。