unicode-bidi

Unicodeの規格により、日本語は「左から右に表示」、アラビア語は「右から左に表示」など、言語ごとに表示する方向が定められています。unicode-bidiプロパティは、定められた言語の表示方向をdirectionプロパティで指定したものに変更することができます。


ブラウザ

IE5 / IE5.5 / IE6 / N6 / N7 / O7 / O9 / Fx1 / Fx2

▲PageTop

書式

要素[.class名][#id名]{ unicode-bidi : 値; }

▲PageTop

指定できる値

値 初期値 意味
normal ○ 指定しない場合と同様になります。
embed directionプロパティで指定した内容が、既存の表示方向の設定に組み込まれる形となります。
日本語で検証した結果、文章の表示順が変更されるようです。
bidi-override directionプロパティで指定した内容が、既存の表示方向の設定に置き換わる形となります。
日本語で検証した結果、文章の表示順、及び、文字の並び順も変更されるようです。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        direction : rtl;
        unicode-bidi : normal;
      }
      #sample2 {
        direction : rtl;
        unicode-bidi : embed;
      }
      #sample3 {
        direction : rtl;
        unicode-bidi : bidi-override;
      }
      #sample p {
        margin : 0;
        padding : 5px;
        width : 400px;
        background-color : #DCDCDC;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      【unicode-bidi : normal】<br>
      <p>
        <span id="sample1">あいうえお。</span>
        <span id="sample1">かきくけこ。</span>
        <span id="sample1">さしすせそ。</span>
      </p>
      <br>
      【unicode-bidi : embed】<br>
      <p>
        <span id="sample2">あいうえお。</span>
        <span id="sample2">かきくけこ。</span>
        <span id="sample2">さしすせそ。</span>
      </p>
      <br>
      【unicode-bidi : bidi-override】<br>
      <p>
        <span id="sample3">あいうえお。</span>
        <span id="sample3">かきくけこ。</span>
        <span id="sample3">さしすせそ。</span>
      </p>
    </div>
  </body>
</html>

表示結果

【unicode-bidi : normal】

あいうえお。 かきくけこ。 さしすせそ。


【unicode-bidi : embed】

あいうえお。 かきくけこ。 さしすせそ。


【unicode-bidi : bidi-override】

あいうえお。 かきくけこ。 さしすせそ。

▲PageTop

関連項目

HTML

<bdo>


CSS

direction

▲PageTop

▲