CSS辞典 directionプロパティ、unicode-bidiプロパティの解説

文字を表示する方向を指定する「directionプロパティ」、文字の書字方向の上書き方法を指定する「unicode-bidiプロパティ」の使用方法を記載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

directionプロパティ(文字を表示する方向を指定)

初期値ltr
適用される要素すべての要素
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{direction: 方向;}Code language: CSS (css)

「directionプロパティ」(ディレクション)は、文字を表示する方向を指定します。

使用方法

ltr文字が左から右へ表示されます。
rtl文字が右から左へ表示されます。
すなりん
すなりん

directionプロパティ、unicode-bidiプロパティも、日本語や英語は左から右に書く言語ですが、アラビア語などの右から左に言語を表示するときに使用します。

unicode-bidiプロパティ(文字の書字方向の上書き方法を指定)

初期値normal
適用される要素すべての要素。ただし非インライン要素では値の一部は無効
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{unicode-bidi: 上書き方法;}Code language: CSS (css)

「unicode-bidiプロパティ」(ユニコードディレクショナル)は、文字の書字方向の上書き方法を指定します。

使用方法

normal文字の書字方向を上書きしない。
embed要素がインラインボックスの場合、directionプロパティの指定に従って、文字の書字方向を上書きします。
bidi-override要素がインラインボックスの場合、directionプロパティの指定に従って書字方向を
上書きします。ブロックボックス内では、内包される子要素の書字方向を上書きします。
isolate要素がインラインボックスの場合、双方向アルゴリズムに加えてdirectionプロパティの値に応じた書字方向決定アルゴリズムが組み込まれて表示されますが、
その際の周囲のインラインボックスから独立したものとして扱われるUnicodeにおける
LRI/RLIに相当します。
isolate-overrideisolate同様。周囲のインラインボックスから独立したものとして扱われながらインラインボックス内にbidi-override同様の上書き処理を適用します。
UnicodeにおけるFSI,LRO/FSI,RLOに相当します。
plaintextブロックコンテナー、及びインラインボックスに対してisolateと同様に作業しますが、書字方向の決定はdirectionプロパティの値ではなく
双方向アルゴリズムの規則に基づいて決定されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>directionプロパティ、unicode-bidiプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1 p{font-size:1.5em;}
          .sample2{
                    direction: rtr;
                    unicode-bidi: bidi-override;        
                  }
    </style>
  </head>
  <body>
      <div class="sample1">
          <h1>direction調整なし</h1>
          <p>アラビア語訳聖書(あらびあごやくせいしょ、アラビア語:ترجمة الكتاب المقدس للغة العربية‎)はキリスト教聖書</p>
          <h1>direction調整あり</h1>
          <p class="sample2">アラビア語訳聖書(あらびあごやくせいしょ、アラビア語:<span> ترجمة الكتاب المقدس للغة العربية‎</span>)はキリスト教聖書</p>
      </div>
  </body>
</html>
実行結果

direction調整なし

アラビア語訳聖書(あらびあごやくせいしょ、アラビア語:ترجمة الكتاب المقدس للغة العربية‎)はキリスト教聖書

direction調整あり

アラビア語訳聖書(あらびあごやくせいしょ、アラビア語: ترجمة الكتاب المقدس للغة العربية‎)はキリスト教聖書

chrome 実行サンプル

directionプロパティ、unicode-bidiプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

directionプロパティ、unicode-bidiプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

directionプロパティ、unicode-bidiプロパティのedgeブラウザの実行結果

opera 実行サンプル

directionプロパティ、unicode-bidiプロパティのoperaブラウザの実行結果

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す