縦書き CSS をレスポンシブ対応させる方法

2019年7月23日

Luxeritas 3.6.6 で「縦書きブロック」を実装した際に、縦書き CSS をどうやってレスポンシブに対応させるかで色々と試行錯誤したので、その方法についてメモ書きしておく。

縦書き CSS の基本からレスポンシブまで

縦書き CSS の基本形

縦書き CSS のベースは 縦書き Web 普及委員会 さんの技術解説にあるものとおおよそ同じ。

※ font-feature-settings を設定したり、letter-spacing の値が違うなど異なる部分あり

基本形は以下のとおり。

<div class="wrap">
	<div class="content">
		<p>何かしらの文章</p>
	</div>
</div>

.wrap {
	text-align: center;
}
.content {
	display: inline-block;
	text-align: left;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.content p {
	font-feature-settings: 'pkna';
	line-height: 2;
	letter-spacing: .05em;
}

text-align: center で中央に寄せてるが、right にすれば右寄せになる。

ただ、これだと長い文章の際に、ボックスから飛び出て画面外に飛び出してしまう。

スクロールできるようにする

wrap に overflow: auto を追加してスクロールできるようにする。

.wrap {
	overflow: auto;
	text-align: right;
}

これでスクロールできるようにはなるのだが、、、

残念なことに、スクロールの開始位置が左からになるという悲しい状態になるｗ

右からスクロールできるようにする

右からのスクロールにするため、 文字表記の方向を指定する direction プロパティの特性を利用することにする。

wrap に direction: rtl を追加して、スクロールバーのある Box を右から左への表記に指定する。そして、content に direction: ltr を追加することによって実際の表記方向を元に戻す。

.wrap {
	direction: rtl;
	overflow: auto;
	text-align: right;
}
.content {
	direction: ltr;
	display: inline-block;
	text-align: left;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

これで、右からスクロールできるようになって出来上がり。

全体像

全 HTML と CSS は下記のとおり。

<div class="wrap">
	<div class="content">
		<p>何かしらの文章</p>
	</div>
</div>

.wrap {
	direction: rtl;
	overflow: auto;
	text-align: right;
	font-size: 0;
	background: #fff6e5;
	border: 1px solid #ff7f50;
	border-radius: 3px;
	padding: 0 15px;
}
.content {
	direction: ltr;
	display: inline-block;
	text-align: left;
	font-size: 16px;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.content p {
	font-feature-settings: 'pkna';
	line-height: 2;
	letter-spacing: .05em;
}

以上。