Web 上のレイアウトでの direct:rtl の使用方法の詳細な説明

おそらく、世界中のほとんどの言語は左から右に読まれるため、direction:rtl に関する情報はあまりありません。テキストの右から左への書き込みの特定の動作は Unicode で定義されていますが、これは私たちが考慮したいことではありません。必要なのは、ブロックレベルのボックスに対する右から左への書き込みの影響に関する関連特性を利用して、基本的なレイアウトを作成することです。
コンテンツを右に移動するには、通常 text-align:right を使用しますが、これはコンテンツを右揃えにするだけで、要素を右に寄せることを意味します。場合によっては、コンテンツを 1 つずつ右に配置する必要があるため、 flat:right が使用されます。しかし、float:right にも問題があります。Float 自体がストリームからコンテンツを流出させ、コンテナを崩壊させます。これを修正するには他の対策が必要になります。
direction:rtl を使用すると、他の副作用なしで float のような効果を実現できますが、その前提として、子要素はブロックレベルの要素でなければなりません。 RTL は Unicode の文字属性に基づいて一部の文字に対して特別な処理を実行するため、インライン レベルの要素は RTL で予期しない結果になる可能性があります。その具体的な処理方法は非常に複雑なので、この記事では説明しません。つまり、この rtl がレイアウトのみを目的としている場合は、子要素でインライン レベルの要素を使用しないでください。

<style>
body {font:14px/18px Consolas;}
div {
  width:100px;padding:10px;
  margin:10px 0px 30px 0px;
  border:1px solid #CCC;
}
.float {overflow:hidden;} /*加overflow防止容器坍缩*/
.float span {float:right;}
.align {text-align:right;}
.align span {text-align:left;}
.direction {direction:rtl;}
.direction span {direction:ltr;display:inline-block;}
</style>
float right
<div class="float">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
align right
<div class="align">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
direction rtl
<div class="direction">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>

実際、方向スタイルは非常に深いトピックです。ここでは、レイアウトにその基本プロパティの 1 つを使用するだけです。他のプロパティは Unicode の文字属性で始まる必要があり、関連する unicode-bidi スタイルもあります。アラビア語や古代中国語のプロジェクトに取り組んでいない場合は、基本的にこの言語を使用することはないため、通常は深く学習する必要はなく、理解するだけで十分です。

以上がWeb 上のレイアウトでの direct:rtl の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。