CSS の方向と unicode-bidi の比較
多言語のページを作成する場合、アラビア語とヘブライ語に触れたことのある学生は、五四運動以前の執筆順序も右から左であったことを含め、執筆方向の重要性を理解する必要があります。 CSS では、unicode-bidi 属性と direction 属性により、HTML または XML テキストのレンダリング方向が決定されます。
direction
方向属性には 3 つの値があります。
親要素の設定を使用して継承します
ltr デフォルト値、左から右、左から右
rtl 右から左 右から左へ
デフォルトの書き込み順序は左から右で、特別な設定はありませんが必須ですが、アラビア語の場合は右から左へ、この時正しく表示するには方向属性を設定する必要があります
ブラウザの書き換えを防止text-alignデフォルト設定にしましょう
<p style="direction:rtl;text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</p>もあります対応するhtml属性設定可能なdir
<p dir="rtl" dtyle="text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</p>direction属性 text-alignとは異なり、後者は方向であり、書き順は変わりません
<p style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</p> <p style="text-align:right;">1 2 3 4 5 6。</p>
unicode-bidi
。方向性、unicode の書き方の問題は、direction で対応できるようですが、bidi は何をするのでしょうか？
ブラウザは通常、lang 属性または特別なフォントファミリーに基づいて書き込み方向を決定しますが、文に両方向のコピーライティングが含まれる場合は、unicode-bidi 属性を使用する必要があります
unicode-bidi には 3 つの広範なサポートがあります。
normal のは元の順序で使用されます
embed はインライン要素に作用し、direction 属性の値は埋め込み層を指定し、暗黙的な並べ替えはオブジェクト内で実行されます
bidi-override は値に従って厳密に並べ替えます方向属性の。暗黙の双方向操作ルールを無視してください
正直、この説明は理解できません。例を見てみましょう
<p style="direction:rtl;text-align: initial;">this is a test</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this is a test
</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this <span style="unicode-bidi:embed;">is a</span> test
</p>最初の行は単純な右揃えで、テキストは逆に書かれません。後ほど説明します)
2行目の2つの属性は、右から左に書くだけでなく、実際には右から左に書くという本格的な書き方です
3行目の素晴らしい効果です。行は 2 行目の基礎にあります スタイル unicode-bidi:embed が追加されました。逆方向に書かれることはなくなり、通常の書き順で書かれるようになります
方向を設定するだけでアラビア語の単語が正しく表示されるのはなぜですか、しかし、英語の単語は右から左に書くだけですか？ unicode-bidi:bidi-override; が設定されている場合にのみ機能します。これはアラビア語に自動的に機能します。ブラウザでは単一の数字と文字を使用できません。言語の決定には rtl のデフォルト設定が使用され、言語が unicode-bidi でのみ書き換えられます。宣言時にアラビア語を指定すると、ページは自動的に順序を書き込みます rtl
<html lang="ar">
direction 書き込み方向を示し、
writing-modeとは異なる機能を持ち、それぞれに長所と短所があり、組み合わせて使用できます。
以上がCSS の方向と unicode-bidi の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7664
15
1393
52
1205
24
91
11
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
