IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > テキスト > writing-modeの解説
  カテゴリ別さくいん
  タグ別さくいん

writing-modeの解説

縦書き・横書きを指定するには?

要素書式

writing-mode : 【書記方向】 ;

対応ブラウザ

  • IE 9:○(-ms-writing-mode / writing-mode でもよいが実装は独自)
  • Firefox 10.0:×
  • Opera 11.61:×
  • Chrome 17.0:○(-webkit-writing-mode)
  • Safari 5.1:○(-webkit-writing-mode)

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

値一覧

以下はIE実装です。

内容
lr-tb行内のテキストは左から右へ進み、行は上から下へ進む。横書き。英語などの方式。
lr-bt行内のテキストは左から右へ進み、行は下から上へ進む。横書き。
rl-tb行内のテキストは右から左へ進み、行は上から下へ進む。横書き。アラビア語などの方式。
rl-bt行内のテキストは右から左へ進み、行は下から上へ進む。横書き。
tb-lr行内のテキストは上から下へ進み、行は左から右へ進む。縦書き。モンゴル語などの方式。
tb-rl行内のテキストは上から下へ進み、行は右から左へ進む。縦書き。日本語などの方式。
bt-lr行内のテキストは下から上へ進み、行は左から右へ進む。縦書き。
bt-rl行内のテキストは下から上へ進み、行は右から左へ進む。縦書き。
lrlr-tbと同じ。
rlrl-tbと同じ。
tbtb-rlと同じ。

以下は策定中の標準仕様で、現在のところ、ChromeSafari(-webkit-writing-mode)が実装しています。

内容
horizontal-tb行内のテキストは横に進み、行は上から下に進む。横書き。
行内のテキストの左右の方向はdirectionプロパティによって指定する。
vertical-rl行内のテキストは縦に進み、行は右から左に進む。縦書き。
行内のテキストの方向はdirectionプロパティによって指定する。
vertical-lr行内のテキストは縦に進み、行は左から右に進む。縦書き。
行内のテキストの方向はdirectionプロパティによって指定する。

解説文

writing-modeプロパティは、縦書き、横書きなどの文字の書記方向を指定します。

writing-modeプロパティはIEの独自実装が先行した経緯があり、IEではベンダープレフィックスなしで指定することもできますが、その場合でも指定する値はIE独自のものです。

それに対して、標準規格は現在、策定中であるということもあり、ChromeSafari(-webkit-writing-mode)のみが実装しています。また、これらのブラウザではベンダープレフィックス付きで指定する必要があります。

IEで指定する場合、値はハイフンを挟んで二つの部分に分かれます。前半部分は、行内のテキストの進行方向を表し、後半部分は、行の進行方向を表します。右から左は「rl」、左から右は「lr」、上から下は「tb」、下から上は「bt」となります。(「r」、「l」、 「t」、 「b」はそれぞれ「right」、「left」、「top」、「bottom」の頭文字です )

たとえば、通常の英文などの横書きは、テキストが左から右で、行が上から下なので「lr-tb」になります。同じように、日本語の縦書きはテキストが上から下で、行が右から左なので、「tb-rl」になります。

以下の例ではIEで縦書きを指定しています。

-ms-writing-mode: tb-rl;

ChromeSafari(-webkit-writing-mode)が実装している現時点での標準仕様による指定方法では、値がハイフンで前半後半に分かれることと、後半の指定の意味は同じですが、前半の指定が異なります。

横書きの場合、前半分に「horizontal」を指定し、実際の左右の方向は、directionプロパティ(値が「rtl」なら右から左、「ltr」なら左から右)で指定します。また、後半部分は上から下の「tb」のみがサポートされます。下から上への行の進行はサポートされていません。

縦書きの場合、前半部分に「vertical」を指定します。テキストの進行方向は、directionプロパティで指定した左右の方向が、左側を下にするように時計回りに90度回転した形で解釈されます。

たとえば、「vertical-rl」の場合、縦書きで行は右から左へと進行していきます。この時、directionプロパティが「ltr」なら、テキストは上から下への進行になります。

以下の例では右から左に進み、行は上から下に進む横書き(アラビア語など)を指定しています。

direction:rtl;
-webkit-writing-mode: horizontal-tb;

どちらの実装でも、テキストの進行方向の指定は、既定では、文字列の配置(右寄せ左寄せ)にのみ効果を持ち、文字の順序には効果を持ちません。文字単位での既定の書字方向は、Unicodeの場合は文字種ごとに決められています。

既定で左から右へ描かれる言語の文字を、右から左へ表示されるように指定しても、文字単位で右から左に表示されるわけではなく、左から右に書かれた文章が右寄せで表示され、左側で改行が発生するようになるだけです。

文字単位での表示順序を操作するためには、unicode-bidiプロパティを指定して、既定の書字方向の変更を許可(値「bidi-override」を指定)する必要があります。

なお、重要な違いとして、IEでは縦書きを指定しても、文字種から判断して日本語などの縦書きする言語だった場合は、文字の向きは横書きと同じ(文字の上下と画面の上下が同じ)になりますが、ChromeSafariの場合は、縦書きを指定すると一律に横に回転(画面の左側が文字の下になる)して表示されます。

サンプルソース

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <style>
  .box{
      float:left;
      width:200px;
      height:200px;
      margin-left:50px;
      border:solid 1px silver;
  }
  /* 縦書きの指定 */
  #box1 {
      -ms-writing-mode:tb-rl;
      -webkit-writing-mode:vertical-rl;
      direction:ltr;
  }
  /* 右寄せの横書きの指定 */
  #box2 {
      -ms-writing-mode:rl-tb;
      -webkit-writing-mode:horizontal-tb;
      direction:rtl;      
  }
  /* 文字の書記方向も含めて右から左に進む横書きの指定 */
  #box3 {
      -ms-writing-mode:rl-tb;
      -webkit-writing-mode:horizontal-tb;
      direction:rtl;
      unicode-bidi:bidi-override;
  }
  </style>
  </head>
  <body>
  <p id="box1" class="box">
   縦書き<br>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
   Duis ac massa risus, sit amet commodo metus. <br>
   Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis. 
   Morbi quis libero id nulla lacinia placerat. </p>
  <p id="box2" class="box">
   右から左の横書き<br>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
   Duis ac massa risus, sit amet commodo metus. <br>
   Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis. 
   Morbi quis libero id nulla lacinia placerat. </p>
  <p id="box3" class="box">
   文字も右から左の横書き<br>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
   Duis ac massa risus, sit amet commodo metus. <br>
   Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis. 
   Morbi quis libero id nulla lacinia placerat. </p>
  </body>
  </html>

関連項目

(関連項目はありません)



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年11月14日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2024 GRAS Group, Inc. All rights reserved.