読みやすいか読みにくいかでいうと読みにくいかな。日本語の書籍だと、技術系のものを除けば基本的に縦書きの方が読みやすいのだけど、WEB だと縦書きはだいぶ読みにくい。右から左の流れも慣れない。もう目の流れが横書きに慣れてしまっていると言うことなのだろうか。タイトル部分もも縦書きにすると印象変わるかもしれないので、あとで試してみようと思う。
雰囲気は良いなと思う。WEB の文章はやはりゴシックの方が読みやすいところがあるけれど、縦書きになると明朝体の方がずっと読みやすくなる。明朝体は縦書きの流れに適しているということだろうか。今ふと気になって Google で調べてみたら源ノ明朝には縦書き用の”かたち”があるらしい。
また、一般的に縦書きの文字の方が、横書きと比較して大きく見えるため、「源ノ明朝」では横書き・縦書きで異なる字形を保有し、自動的に最適なものに切り替えている。
なるほど 🤔（Safari だと絵文字が横になる）。個人的には明朝体はゴシック体に比べて小さいと読みにくいとことはあるから、逆に大きく見えるくらいの方が読みやすい気もするけど、統一感で考えたらやっぱり同じフォントサイズの指定をしているときは見た目は同じに見える方がいいですね。日本語フォントは WEB フォントとしては大きすぎるし、サブフォント作るの面倒くさいしで結局使ったことはないですけど、そのうちこの記事と同じように実験的に使ってみようかなあと今思った。
コードブロックを縦書きにするとどうなるかも一応試してみたけど、だいぶどうしようもない感じになるので止めておいた。コードブロックなどの部分は横書きにして、下にまとめて書こうと思う。
長い文章を書き続けると、親の要素で width の指定があるにも関わらず、どこまでも横に伸びていってしまう。これはどうしてそうなるのかはよくわからない。仕様を見ればわかるのだろうけど詳細はまた別の機会に調べようと思う。たぶんテキストの流れの縦横の関係がスイッチしていて、縦幅を指定していてもテキストがそれより長い場合はあふれて表示されることと同じなのだろうと思う。とはいえ、writing-mode を指定している要素に width を指定しつつ、column-countを 1 に指定しておくと（1 で指定すると Safari で反応しないので 2 に指定した）、期待通りの横幅で縦に折り返すことができるようになった。これもマルチカラムレイアウトの仕様が関係していると思うけど、詳しくは調べていない。だからこれが正しい挙動なのかどうかはわからない。あと現状の line-height とか width の関係で、テキストの横幅が微妙に横幅より狭く見えるので、少しだけ調整している。折り返しの位置が横幅によって微妙に変なのは、仕方ないのかな。
あと最後の段落は文章の左側に余白が残るのだけど、WEB で見るとだいぶ不自然な感じはある。縦書きは一つの段落でおさまる文章で書くのがベストかもしれない。文章量的には縦書きに比べてだいぶ入るなあという感じはある。数えてないけど。