WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「書字方向」

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>
◆スタイル指定なし
Hello?السلام عليكم!こんにちは。

※単語は、左から表示。文字は、英語、日本語:左から表示。アラビア語:右から表示。

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

※単語、文字ともに、英語、日本語、アラビア語全て左から表示

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

※単語は、右から表示。文字は、英語、日本語:左から表示。アラビア語:右から表示。

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

※単語、文字ともに、英語、日本語、アラビア語全て右から表示

◆direction:rtl;
インライン要素<span>に指定
Hello?السلام عليكم!こんにちは。

※directionが、適用されない。スタイル指定なしと同じ。

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

※単語は、右から表示。文字は、英語、日本語:左から表示。アラビア語:右から表示。


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン