direction「書字方向」

「direction」は、書字方向を指定します。
インライン要素に指定する場合は、「unicode-bidi」に、embed または bidi-override を指定する必要があります。

CSS Ver.	適用要素	継承
2.1	全要素	する

direction の指定方法

構文
direction : ltr \| rtl;
プロパティ/設定値	意味
direction : ltr;	左から右へ表示。
direction : rtl;	右から左へ表示。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

direction のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_bidi_embed_rtl { direction : rtl; unicode-bidi : embed;}
.css_bidi_override_rtl { direction : rtl; unicode-bidi : bidi-override;}
.css_bidi_override_ltr { direction : ltr; unicode-bidi : bidi-override;}
.css_direction_rtl { direction : rtl;}

<!-- html -->
<div class="common">
  <div class="cssTitle">◆スタイル指定なし</div>
  <div>Hello?السلام عليكم!こんにちは。</div>

  <div class="cssTitle">◆direction:ltr; (bidi-override)<br>インライン要素<span>に指定</div>
  <div><span class="css_bidi_override_ltr">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆direction:rtl; (embed)<br>インライン要素<span>に指定</div>
  <div><span class="css_bidi_embed_rtl">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆direction:rtl; (bidi-override)<br>インライン要素<span>に指定</div>
  <div><span class="css_bidi_override_rtl">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆direction:rtl;<br>インライン要素<span>に指定</div>
  <div><span class="css_direction_rtl">Hello?السلام عليكم!こんにちは。</span></div>

  <div class="cssTitle">◆direction:rtl;<br>ブロック要素<div>に指定</div>
  <div class="css_direction_rtl">Hello?السلام عليكم!こんにちは。</div>
</div>