【45-1】日本語の縦書きもできちゃう writing-modeプロパティ

最終更新日:2018年12月13日  (初回投稿日:2018年11月29日)

今回からしばらく、ライティングモードについて見ていきましょう。

ライティングモードは、W3C の CSS Writing Modes Level 3 でまとめられていて、 テキストの向き(横書き・縦書き・左から右・右から左 など)を指定するためのプロパティ群です。

今回はまず writing-modeプロパティを使ってみます。
writing-modeプロパティは、テキストが「横書き」か「縦書き」か、行の流れが「右から左」か「左から右」かを指定します。
ですので、日本語の縦書き表示もできちゃいます。

このプロパティは、もともと IE の独自仕様だったものが、W3Cの「Writing Modes Level 3」で標準仕様になろうとしています。

そのせいか、IE は「値」が独自仕様のままで、ベンダープレフィックス「-ms-」も付けるそうです。値は記事後半のサンプルコードを御覧ください。(Edgeからは標準仕様に対応)

このプロパティは、ほとんどのブラウザが実装しています。ただし一部のブラウザ(古めの iOS や Androidブラウザなど)はベンダープレフィックス「-webkit-」が必要です。(参考:Can I Use

writing-modeプロパティによる「縦書き」では、関連プロパティと一緒に使うことが多いです。関連プロパティを数回に渡ってアップします↓

【45-1】日本語の縦書きもできちゃう writing-modeプロパティ ←今日はココ
【45-2】縦書きでの文字の向きを決める text-orientation
【45-3】縦書きで「縦中横」ができる text-combine-uprightプロパティ

参考:
CSS Writing Modes Level 3 | W3C Candidate Recommendation
CSS Writing Modes Level 4 | Editor’s Draft
writing-mode - CSS | MDN

writing-modeプロパティの値

writing-modeプロパティの値はすべてキーワードです。

writing-modeプロパティの値
キーワード horizontal-tbがデフォルト値。
vertical-rl、vertical-lr、sideways-rl、sideways-lr
グローバル値 text-transform: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-transform: initial; 継承した親の値を解消しデフォルト値に戻す
text-transform: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 以下を除く、すべての要素
<tbody>、<thead>、<tfoot>、 <colgroup>、<col>、<tr>要素

それぞれのキーワードは、以下の意味があります。

horizontal-tb
デフォルト値です。文字は左から右へ水平に、行は上から下へ垂直方向に流れます。
「horizontal」は水平、「tb」は「top to bottom」の略。
vertical-rl
文字は上から下へ垂直に、行は右から左へ。これが日本語などの縦書き用。
「vertical」は垂直、「rl」は「right to left」の略。

tb-rl」という値は、SVG では使えますが CSS では非推奨になりました。代わりにこの「vertical-rl」を使うべきなんだそうです。
ただし IE は「-ms-writing-mode: tb-rl」で指定します。

vertical-lr
文字は上から下、行は左から右へ。モンゴル語の書き方だそうです。
「lr」は「left to right」の略。
sideways-rl
行ごと90度回転(3時の方向)して横向きにして垂直に流し、行は右から左へ。
「sideways」は横向きという意味。
(この値は Writing Modes Level 4 で草案中で、対応ブラウザは少数です)
sideways-lr
行ごと -90度回転(9時の方向)して横向きにして垂直に流し、行は左から右へ。
(この値は Writing Modes Level 4 で草案中で、対応ブラウザは少数です)

writing-modeプロパティの指定サンプル

writing-modeプロパティの値を使ってみます。
「sideways-rl」「sideways-lr」は Firefox が対応しています。

writing-mode: 未指定(=horizontal-tb) W3Cのライティングモード レベル3では、3つの値が仕様に入っています。
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。
writing-mode: vertical-rl W3Cのライティングモード レベル3では、3つの値が仕様に入っています。
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。
writing-mode: vertical-lr W3Cのライティングモード レベル3では、3つの値が仕様に入っています。
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。
writing-mode: sideways-rl W3Cのライティングモード レベル3では、3つの値が仕様に入っています。
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。
writing-mode: sideways-lr W3Cのライティングモード レベル3では、3つの値が仕様に入っています。
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。

下は、Firefox(Mac)でのプレビューです。
デフォルト値での表示は省略。そのほかの4つの値での表示をスクショしました。

「縦書き(vertical-rlvertical-lr)」では、「全角」のテキストは回転していませんが「半角英数字」は単語ごと回転して横向きになっていますね。
これを1文字ずつ「縦向き」にするには、別のtext-orientationプロパティを使います。
数字などを2〜4文字ひとまとめに「縦向き」にする(「縦中横」と言います)には text-combine-uprightプロパティを使います。
これらは次回から解説します。

上のサンプルのソースコードはこちら。

<div class="mihon">
<b>writing-mode: 未指定(=horizontal-tb)</b>
W3Cのライティングモード レベル3では、3つの値が仕様に入っています。<br>
草案のレベル4では「sideways-rl」「sideways-lr」の2つの値が追加されています。</div>
<div class="mihon v-rl">
<b>writing-mode: vertical-rl</b>(テキスト省略)</div>
<div class="mihon v-lr">
<b>writing-mode: vertical-lr</b>(テキスト省略)</div>
<div class="mihon s-rl">
<b>writing-mode: sideways-rl</b>(テキスト省略)</div>
<div class="mihon s-lr">
<b>writing-mode: sideways-lr</b>(テキスト省略)</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em}
.mihon b {
	display:block;
	color:#579961}
.v-rl, .v-lr, .s-rl, .s-lr {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:20rem; /*高さを指定しないと、折り返しが無いスゴイ縦長なボックスになるので*/
    }
.v-rl {
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl}
.v-lr {
	-ms-writing-mode: tb-lr; /* for IE */
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr}
.s-rl {
	-ms-writing-mode: bt-rl; /* for IE */
	-webkit-writing-mode: sideways-rl;
	writing-mode: sideways-rl}
.s-lr {
	-ms-writing-mode: bt-lr; /* for IE */
	-webkit-writing-mode: sideways-lr;
	writing-mode: sideways-lr}
</style>

writing-modeプロパティの指定は(32〜47行)、それぞれブラウザに合わせて3個ずつ書いています
最初は IE用で、ベンダープレフィックス「-ms-」を付けて、値は古いもの(IE独自仕様)で書きます。
2番目はベンダープレフィックス「-webkit-」を付けたもの。ちょっと古めのブラウザ用ですが、そのうち不要になりそうですね。
最後は標準仕様の書き方。

次回予告

今回のwriting-modeプロパティの「縦向き」モードでは、「半角英数字」は単語ごと回転して横向きになっていますね。
次回は、この「半角英数字」を「1文字ずつ全角にして縦向き」にする text-orientationプロパティを使ってみましょう。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

関連記事

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2018/12 | 01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.