ワイヤード・パンチ

サイトタイトル変えたい…。もうメカメカしいの関係なくなった…。

cssのtableで縦書きするとおかしくなるときの対処法。

2016年3月29日

近年のブラウザは、縦書きテキストにも徐々に対応してきました。

cssにスタイル一つ入れるだけで、簡単に縦書きを実現できるはずです。

…のはずなのですが、tableタグの中にあるテキストを縦書きにするつもりが、まったく効いておらず、横に並んだままです。

広告

問題のコード。

CSS

.name {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

HTML

<table>
	<tr>
		<th>
			日付
		</th>
		<th class="name">
			Aさん
		</th>
		<th class="name">
			Bさん
		</th>
		<th class="name">
			Cさん
		</th>
	</tr>
	<!--中略-->
</table>

「writing-mode: vertical-rl」を使えば、縦書きにできます。「name」というclassをあてたthタグに対して縦書きを実行しているのですが、最初の写真のとおりchromeだと縦書きが効いていません。

(記事作成当時、IE用に「writing-mode: tb-rl」もあったのですが、もはやIE対応は不要な時代になったため、省いています。)

Firefoxでも試しましたが、こちらだと縦書きになってるけどセルの幅が縮まるという、これまた違う現象になってしまいました。

なお、どのブラウザでもアルファベットは縦書きにするとひらがなと違う方向に寝転がってしまうため、これが気になってしまう場合は「text-orientation: upright」でひらがなと向きを合わせられます。

対処法。

CSS

.name {
	writing-mode: vertical-rl;
	white-space: nowrap;
	text-orientation: upright;
}

HTML

<table>
	<tr>
		<th>
			日付
		</th>
		<th>
			<p class="name">Aさん</p>
		</th>
		<th>
			<p class="name">Bさん</p>
		</th>
		<th>
			<p class="name">Cさん</p>
		</th>
	</tr>
</table>

結果。

thタグの中にpタグを一つ挟むことにしました。そのpタグに対してclassをあてて、中身を追加することで対処できます。

これでChromeでもFirefoxでも、正常に縦書きがセルの中に収まりました。

なお、「white-space: nowrap」がないと一文字ずつで改行されてしまうので、合わせて入れています。

Edgeにおける問題点。

現行のブラウザの中で、Edgeだけ上の写真のような悲惨な状態になってしまいました。

もちろん、コードは対処後のものです。

ページが開かれたときのウインドウの高さいっぱいに、縦書きセルが広がっています。

今回はもうEdgeの不具合には対処しません。

EdgeブラウザがついにChromiumを採用へ Mozillaは「独占は危険」と警告 – ITmedia PC USER

上記の記事のとおり、EdgeはのちのちChromiumベースで作り直される予定らしく、実質Chromeと変わらなくなるからです。

ただ、Chromeの競合相手であるFirefoxはそのままとのこと。競合相手がいなくなってはいけないからだとかなんとか。

また、IEも対処しません。もはや今の時代には不要な古いブラウザだからです。

なお、safariについてですが、apple製品は所有していないので未検証です。

追記。(2019/1/27)

現在のブラウザのバージョンでは、記事作成当時と状況が異なっていたため、全体的に記事を書き直しました。