🐠 🍴 👩🏾‍🌾 1Cを右から左へ：1CでRTLをサポートした方法：エンタープライズプラットフォーム 🚳 🖐🏻 🏳️

プラットフォーム1C：エンタープライズは、英語、ドイツ語、フランス語、中国語、ベトナム語を含む22の言語にローカライズされています。最近、バージョン8.3.17で、アラビア語をサポートしました。

アラビア語の特徴の1つは、その中のテキストが右から左に書かれ、読まれるということです。アラビア語のUIは水平方向にミラーリングする必要があります（ただし、すべてではなく、常にではありません。ここには微妙な点があります）。カーソルの左側にあるコンテキストメニューを開くなどです。

カットの下で-1C：EnterpriseプラットフォームのWebクライアントでRTL（右から左）をどのようにサポートしたか、そしてアラブの世界が右から左に書く理由を説明する仮説の1つについて。

ちょっとした歴史

私たちは左から右へ書くことに慣れています。この書き方は主に、紙にテキストを書くとき、右利きの人（そして統計によれば、彼らの約85％）がすでに書かれたものを見るという事実によって生成されます-書く（右）手は書かれたテキストをカバーしません。左利きは苦しむ必要があります。

「なぜアラビア語が右から左に書かれるのか」という仮説の1つはこのように聞こえます。アラビア語の起源となった言語は、紙とその類似物（パピルス、羊皮紙など）がなかった当時に始まりました。情報を記録する唯一の方法は、文字を石に刻むことでした。そして、右利きの人がハンマーとノミを振るうのはどのように便利でしょうか？もちろん、左手にノミを持ち、右にハンマーで留めてノックします。そしてこの場合、右から左に書く方が便利です。

そして今、私たちが何世紀にもわたるこの遺産にどのように対処したかについて。

どのようにしてタスクを開始しましたか？

プラットフォーム開発者は誰もアラビア語を話せず、RTLインターフェースの開発経験もありませんでした。RTLのトピックについて多くの記事をまとめました（特に、2GISの会社が行った作業と慎重に作成した記事、記事1、記事2に感謝します）。資料を調べてみると、ネイティブスピーカーなしではできないことに気づきました。そのため、アラビア語への翻訳者を探すと同時に、従業員を探し始めました。必要な経験を積んだアラビア語のネイティブスピーカーが、インターフェースのアラビア語の詳細についてアドバイスしてくれるでしょう。いくつかの候補者を検討した後、私たちはそのような人を見つけて仕事に取り掛かりました。

フォントで遊んでみましょう

デフォルトでは、プラットフォームフォントのArial、10ptを使用します。特定の構成の開発者は、ほとんどのインターフェイス要素のフォントを変更できますが、実際に示されているように、これが行われることはめったにありません。それら。ほとんどの場合、1Cプログラムのユーザーは、画面にArialによって書かれた碑文を見ることができます。

Arialは21の言語をうまく表示します（中国語とベトナム語を含む）。しかし、アラビア語の同僚のおかげで判明したように、このフォントでレンダリングされたアラビア語のテキストは非常に小さく、読みにくいです

。100％：

アラブのユーザーはDPIを125％、150％増加させて作業する傾向があります。このDPIでは状況は改善されますが、フォントの性質上、Arialは依然として読みにくいです。

125％：

150％：

この問題を解決するためのいくつかのオプションを検討しました。

Arial , , ( ).
Arial 11pt RTL-.
Arial , LTR- Arial.

ソリューションを選択する際には、Arial 10ptフォントが1C：Enterpriseプラットフォームで非常に長い間使用されていること、私たちとパートナーが1300を超えるエディションのソリューションを作成したプラットフォームで、Arial 10ptフォントがサポートされているすべてのOS（Windows、Linux）でうまく機能していることを考慮する必要がありました。およびさまざまなバージョンのmacOS）、およびブラウザ。フォントやそのサイズを変更すると、ユーザーインターフェイスの大規模なテストが必要になり、これらのテストの多くは自動化できません。フォントを変更すると、現在のユーザーにとって使い慣れたプログラムインターフェイスも変更されます。

さらに、アラビア語を含むすべての言語を適切に表すユニバーサルフォントを見つけることができませんでした。たとえば、Segoe UIフォントは、10ポイントでもアラビア語を適切にレンダリングしますが、中国語はサポートされておらず、一部のオペレーティングシステムでもサポートされていません。 Tahomaは、アラビア語のテキストを10ポイントでレンダリングするのは得意ですが、Linuxのサポートと、太字のラテン語/キリル語の「太りすぎ」に問題があります（アラビア語の太字は見栄えがします）。等。

RTLインターフェイスでデフォルトのフォントサイズを11ptに増やすと、かなりの量のUIテストが必要になります。すべてが正しくレンダリングされていること、すべてのラベルがそれらに提供されているスペースに配置されていることなどを確認する必要があります。また、11ポイントでも、Arialはアラビア文字を完全に表示しません。

その結果、人件費と効果の面で3番目の方法が最適であることが判明しました。アラビア語を除くすべての文字に引き続きArialを使用します。また、アラビア語の文字の場合は、これに適したフォントであるAlmaraiを使用します。これを行うには、CSSに追加します。

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Almarai'), 
       local('Almarai-Regular'),
       url(https://fonts.gstatic.com/s/almarai/v2/tsstApxBaigK_hnnQ1iFo0C3.woff2) 
            format('woff2');
  unicode-range: 
       U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

次に、デフォルトのフォントを使用する必要がある場合は、次のようにフォントを設定します。

font-family: 'Almarai', Arial, sans-serif;

このアプローチの利点は、インターフェイスにユニコード範囲内の文字が1つもない場合、そのフォントが読み込まれないことです。ただし、そのようなシンボルが表示されるとすぐに、ブラウザはフォント自体をダウンロードし（またはそのローカルバージョンを使用し）、目的のフォントでシンボルを表示します。

「フリップ」インターフェース

ご想像のとおり、WebクライアントのHTMLレイアウトはフリップの準備ができていませんでした。最初のステップを実行し、ルート要素にdir =” rtl”属性を設定し、html [dir = rtl] {text-align：right;}スタイルを追加した後、骨の折れる作業を開始しました。この作業の過程で、ここで共有したいいくつかのプラクティスを開発しました。

対称

ボタンの例を見てみましょう。プラットフォームのボタンには、画像、テキスト、およびドロップダウンリストマーカーを含めることができます。そして、プラットフォームに基づくアプリケーションソリューションの開発者の裁量で、あらゆる構成でこれらすべてを行います。

「RTLの前」列は、ボタン要素の最初のパディングをグラフィカルに表します。インデントの量がボタン内の要素の存在、およびそれらの配置の順序に依存していることは明らかです。画像がある場合、テキストは左のインデントを必要としません。画像が右側の場合、画像は負のシフトになります。ドロップダウンリストにマーカーがある場合、テキストのコンテナは右側にさらにインデントがあります。マーカーが画像の直後にある場合、右側にもマージンがあります。対称的なパディングのあるテキストのみのボタンを除いて、ifが多すぎます。対称！インデントを対称的に分散させると、反転するものは何もありません。これが主なアイデアになりました。

[RTL後]列には、同じボタンの新しい対称インデントが表示されます。写真とリストマーカーの間のくぼみでニュアンスを解決することは残っています。私はあらゆる方向性のための普遍的な解決策を望んでいました。三角形自体は疑似要素の上に境界線を付けて描画され、画像の後にある場合にのみインデントが必要です。この条件下で、必要なインデントの幅で別の疑似要素が追加されます。向きが変わると、三角形とパディング自体が入れ替わります。

注意。 以下のすべての例は、デフォルトでLTRインターフェイス用です。 RTLインターフェイスで例がどのように表示されるかを確認するには、dir = "ltr"をdir = "rtl"に変更します。

<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
.button {
    display: inline-flex;
    align-items: center;
    border: 1px solid #A0A0A0;
    border-radius: 3px;
    height: 26px;
    padding: 0 8px;
}
.buttonImg {
    background: #A0A0A0;
    width: 16px;
    height: 16px;
}
.buttonBox {
    margin: 0 8px;
}
.buttonDrop {
    display: flex;
}
.buttonDrop:after {
    content: '';
    display: block;
    border-width: 3px 3px 0;
    border-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
}
.buttonImg + .buttonDrop::before {
    content: '';
    display: block;
    width: 8px;
    overflow: hidden;
}
</style>
</head>
<body>
<a class="button">
    <span class="buttonImg"></span>
    <span class="buttonBox"></span>
    <span class="buttonDrop"></span>
</a>
<a class="button">
    <span class="buttonImg"></span>
    <span class="buttonDrop"></span>
</a>
</body>
</html>

不要な要素、疑似要素、ラッパーは避けようとしています。ただし、この場合、CSSの条件を増やすか、疑似要素を追加するかを選択すると、その汎用性のために、疑似要素を使用したソリューションが勝ちました。フォームにはそのようなボタンがあまりないため、要素を追加するときのパフォーマンスはInternetExplorerでも低下しません。

対称性の原理は、パネルをスクロールする際にも役立つことが証明されています。コンテンツを水平方向に移動するために、以前は単一のmargin-leftプロパティを適用しました：-Npx; ..。

これで、値は対称マージンに設定されます：0 -Npx; 、つまり左右に一度に、そしてどこに移動するか-指定された方向に応じて、ブラウザ自体が認識します。

原子クラス

私たちのプラットフォームの機能の1つは、各ユーザーの好みに応じて、「オンザフライ」でコンテンツとその場所をフォーム上で動的に変更する機能です。変更の一般的なケースは、テキストの水平方向の配置（左、右、または中央）です。これは、text-alignを適切な値に揃えるだけで実現されます。 RTLの逆転は、各コントロールおよびその配置の各ケースのスクリプトとスタイルの条件を拡張することを意味します。最小ソリューションコストは4行です。

.taStart {
    text-align: left;
} 
html[dir=rtl] .taStart {
    text-align: right;
}
.taEnd {
    text-align: right;
}
html[dir=rtl] .taEnd {
    text-align: left;
}

したがって、必要な場所に、クラスは必要な配置でインストールされ、必要に応じて簡単に交換できます。style = "text-align：..."の配置設定を適切なクラスに置き換えるだけです。

同じ原理を使用して、別のタイプの配置（float）を設定します。

.floatStart {
    float: left;
} 
html[dir=rtl] .floatStart {
    float: right;
}
.floatEnd {
    float: right;
}
html[dir=rtl] .floatEnd {
    float: left;
}

また、それがない場合と同様に、ミラーリング用のクラス、たとえばアイコン。これは、RTLインターフェイスでミラーリングが必要なコンテナにもインストールされます。

html[dir=rtl] .rtlScale {
    transform: scaleX(-1);
}

アンチスケール

「単純な」線形要素を扱ったので、次は「複雑な」線形要素に移ります。プラットフォームには、トグルスイッチなどもあります。それらは異なる幾何学的形状にすることができます。ブラウザは要素の配置に対応し、トグルスイッチのインデントは最初は対称です。だから問題は何ですか？問題はフレームの丸みにあります。

フレームの丸めは、その位置に応じて、トグルスイッチ要素ごとに計算されます。「左上」、「右上」、「右上と右下」-バリエーションが異なります。

トグルスイッチでコンテナ全体を反転させることができますが、テキストも反転しますか？この手法を「アンチスケール」と呼びました。ミラーリングが必要なコンテナにアトミッククラスrtlScaleを追加しますそして、その子要素にtransformプロパティを追加します：inherit; ..。LTRインターフェースでは、このメソッドは無視されますが、RTLインターフェースでは、必要に応じて2回反転されたテキストが表示されます。

<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
html[dir=rtl] .rtlScale {
    transform: scaleX(-1);
}
.tumbler {
    display: inline-flex;
    border-radius: 4px 0 0 4px;
    border: 1px solid #A0A0A0;
    padding: 4px 8px;
}
.tumblerBox {
    transform: inherit;
}
</style>
</head>
<body>
<div class="tumbler rtlScale">
    <div class="tumblerBox"> </div>
</div>
</body>
</html>

Flexbox

もちろん、残念ながら、この驚くべきテクノロジーは思いつきませんでしたが、非常に喜んでその機能を目的に使用しました。たとえば、セクションパネルで。このパネルのスクロールボタンはスペースを取りません。ある方向または別の方向にスクロールできる場合、パネルの上部に表示されます。位置のかなり論理的な実装：絶対; 右/左：0; 普遍的ではないことが判明したので、私たちはそれを放棄しました。その結果、ユニバーサルソリューションは次のようになり始めました。スペースを占有しないようにスクロールボタンの親コンテナをゼロ幅に設定し、最後にあるスクロールボタンの方向をflex-direction：row-reverse;で変更しました。..。

したがって、行の終わりにあるボタンは、幅がゼロのコンテナの行の終わりに押し付けられ、パネル上に「後方」に表示されます。

<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
.panel {
    display: inline-flex;
    background: #fbed9e;
    height: 64px;
    width: 250px;
}
.content {
    width: 100%;
}
.scroll {
    display: flex;
    position: relative; 
    width: 0; 
}
.scrollBack {
    order: -1; 
}
.scrollNext {
    flex-direction: row-reverse; 
}
.scroll div {
    display: flex; 
    flex: 0 0 auto; 
    justify-content: center; 
    align-items: center; 
    background: rgba(255,255,255,0.5); 
    width: 75px; 
}
</style>
</head>
<body>
<div class="panel">
    <div class="content"> </div>
    <div class="scroll scrollBack">
        <div></div>
    </div>
    <div class="scroll scrollNext">
        <div></div>
    </div>
</div>
</body>
</html>

ちなみに、ゼロ幅のアイデアは他の問題の解決にも役立つことがわかりました。ドロップダウン要素（コンテキストメニュー、ドロップダウンリストなど）は、プラットフォームで広く使用されています。ポジショニングの計算は複雑で微妙であるため、ミラーリングにはさらに複雑で微妙なものが必要です。

解決策は、ドロップダウンをゼロサイズのコンテナ（アンカーと呼ばれる）に入れることです。アンカーはインターフェイスの必要なポイントに絶対的に配置され、開始エッジのあるコンテンツがアンカーの開始エッジに押し付けられ、コンテンツが目的の方向に配置されます。

<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
.anchor {
    border: 1px solid red; 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    max-width: 0; 
    max-height: 0; 
    top: 25%;
    left: 50%;
}
.anchorContent {
    background: #FFF; 
    border: 1px solid #A0A0A0; 
    width: inherit; 
    height: inherit; 
    padding: 4px 8px; 
}
</style>
</head>
<body>
<div class="anchor">
    <div class="anchorContent"> </div>
</div>
</body>
</html>

絶対に配置された要素

要素の絶対的な配置を回避できない場合（style =” position：absolute;”またはstyle =” position：fixed;”）、dir =” rtl”は無力です。水平座標が左側のスタイルではなく右側のスタイルに適用されると、アプローチが助けになります。

さらに、JSで座標を計算するときに、要素のscrollLeftプロパティとoffsetLeftプロパティにアピールがある場合、RTLインターフェイスでこれらのプロパティを直接使用すると、予期しない結果が生じる可能性があります。これらのプロパティの値を別の方法で計算する必要があります。 Webクライアントで使用するGoogleClosure Libraryでのこの機能の実装は、十分に証明されています。を参照してください。https://github.com/google/closure-library/blob/master/closure/goog/style/bidi.js。

最終的には

やった！LTRおよびRTLインターフェース用に、ソースコードを1つのバージョンにまとめて保存しました。まだ必要はありませんが、必要に応じて、2つの異なる方向の形式を1ページに同時に表示できます。ちなみに、私たちのトリックを使用すると、25％軽いCSSファイルになりました。

また、Windows、Linux、およびmacOSで動作するシン（ネイティブ） 1CクライアントでRTLをサポートしましたが、これは別の記事のトピックです。

1Cを右から左へ：1CでRTLをサポートした方法：エンタープライズプラットフォーム