【45-2】縦書きでの文字の向きを決める text-orientation

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

text-orientationプロパティは、縦書きモードで横向きに回転している半角英数字を1文字ずつ「縦向き」にして縦に並べることができます。

orientation(オリエンテーション。略してオリエン)は「方向付けのためのミーティングや行事」の意味でよく使いますが、ここでは単純に「向き(方向)」の意味。
text-orientation は「テキストの向き」って意味だそうです。

text-orientationプロパティは、IE11, Edge は未対応です。
Safari はベンダープレフィックス(-webkit-)が必要。(参考:Can I Use 2018年12月記)

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

【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
text-orientation - CSS | MDN

text-orientationプロパティの値

text-orientationプロパティの値は以下のものがあります。

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

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

mixed
デフォルト値です。
縦書きモードでの「半角英数字」は横書きのひとかたまりで「時計回りに90度回転」した状態です。
upright
半角英数字は1文字ずつ縦になります。「upright(アップライト)」は「直立」という意味。
この値は、文字が ltr(左から右)で書かれているものとみなす(direction: ltr)ので、そうでない場合(アラビア語とか)は、文字の並び方が変になるので要注意だそうです。(日本語と半角英数字の混在の縦書きでは、特に問題はありませんが)
sideways
全角も半角英数字も全部ひっくるめて、すべてのテキストを横書きで 90度時計回りに回転したレイアウトにします。
「writing-mode: sideways-rl」のときのような表示になります。
「sideways(サイドウェイズ)」は「横向き」という意味。

text-orientationプロパティの指定サンプル

text-orientationプロパティの値を使ってみます。英文字や数字はすべて半角英数字にしています。 (IE11, Edge は未対応です。2018年4月記)

writing-mode: vertical-rl のみ
(text-orientation: mixed 状態)
縦書きモードでの全角のテキストや、Alphabet、半角数字(0123456789)の向きを指定します。
全角の英数字(ABC123)はデフォルトでは縦向きです。
writing-mode: vertical-rl
text-orientation: upright
縦書きモードでの全角のテキストや、Alphabet、半角数字(0123456789)の向きを指定します。
全角の英数字(ABC123)はデフォルトでは縦向きです。
writing-mode: vertical-rl
text-orientation: sideways
縦書きモードでの全角のテキストや、Alphabet、半角数字(0123456789)の向きを指定します。
全角の英数字(ABC123)はデフォルトでは縦向きです。

下は、Firefox(Mac)でのプレビューです。

1文字の数字(レベル3の「3」とか)は、このプロパティで自動で縦向きになるので便利ですね。
英単語(Alphabet とか)は、1文字ずつ縦書きだと変なかんじです。これは <span>要素などで囲んで、text-orientation: mixed にしたほうがイイかも。

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

<div class="mihon">
<b>writing-mode: vertical-rl のみ<br>
(text-orientation: mixed 状態)</b>
縦書きモードでの全角のテキストや、Alphabet、半角数字(0123456789)の向きを指定します。<br>
全角の英数字(ABC123)はデフォルトでは縦向きです。
</div>

<div class="mihon t-ori-up">
<b>writing-mode: vertical-rl<br>
text-orientation: upright</b>(テキスト省略)</div>

<div class="mihon t-ori-side">
<b>writing-mode: vertical-rl<br>
text-orientation: sideways</b>(テキスト省略)</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height:20rem;
	width:100%;
	-ms-writing-mode: tb-rl; /*縦書き指定 for IE */
	-webkit-writing-mode: vertical-rl; /*縦書き指定 for webkit */
	writing-mode: vertical-rl /*縦書き指定 標準型 */
	}
.mihon b {
	display:block;
	color:#579961;
	text-orientation:mixed}
.t-ori-up {
	-webkit-text-orientation: upright; /*for Safari */
	text-orientation: upright
    }
.t-ori-side {
	-webkit-text-orientation: sideways; /*for Safari */
	text-orientation: sideways
    }
</style>

次回予告

さて次回は、text-combine-uprightプロパティを使おう。
これは「縦中横(たてちゅうよこ)」を指定するプロパティです。
「縦中横」とは「縦書きの中の横組み」という意味の印刷・編集用語。半角英数字の2〜4文字を、まとめて1文字分のスペースに横組みにして縦に並べることができます。

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

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

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

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

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2019/06 | 07
- - - - - - 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 - - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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