検索

CSS の方向と unicode-bidi の比較

Jun 20, 2017 am 10:39 AM
cssdirectionについて比較した

多言語のページを作成する場合、アラビア語とヘブライ語に触れたことのある学生は、五四運動以前の執筆順序も右から左であったことを含め、執筆方向の重要性を理解する必要があります。 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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール