cssで縦書き表示するwriting-mode: vertical-rl【CSS】

Webで縦書きにしたい

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

需要はそんなにないとは思うのですが、たまにWeb上でもテキストを縦書きにしたい時があります。

Webは基本横書きがデフォルトなので、大抵の設定は横書きです。

なので、ちょっと注意が必要になります。

まあ、基本的なCSSを設定したら、ちょっとずつ調整するのが良いのかなと思います。

日本語で縦書きにするだけならば「writing-mode: vertical-rl」とすればOKです。

注意点として、IEが非対応なことです。まあ、そろそろIEはいいよね…、と趣味レベルのWebページならばいいかなとは思いますが。

writing-mode: vertical-rl

以下が、writing-mode: vertical-rlを指定した形です。

<div class="tate1">
<p>縦1の例</p>
</div>

.tate1{
        writing-mode: vertical-rl;
	color:#ffffff;
	background-color: #664444;
        width:100%;
        height:300px;
}

基本は縦書き表示を設定して、paddingやmarginを独自に調整すればOKです。

フォントサイズや行の高さもきちんと設定すると、縦書きでも読みやすくなります。

後述しますが、text-align: justify;にすると、均等割付になって、上下が綺麗に揃います。

.tate2{
        writing-mode: vertical-rl;
	color:#ffffff;
	background-color: #664444;
        width:100%;
        height:300px;
        text-orientation: upright;
}

text-orientationを追加しています。

これで数字や英語も縦書きになります。

text-orientationはIEは対応していないので注意が必要です。

諸々設定した例

以下は、漢文を載せたくて作った縦書きです。

新刊吾妻鏡の最初を例として載せています。

<div class="gen">
<p>　　四月小</p>
<p>九日　辛卯　入道源三位頼政卿、可討滅平相國禪門<span class="warigaki">清盛</span>由、日者有用意事。然而以私計略、太依難遂宿意、今日入夜、相具子息伊豆守仲綱等、潜參于一院第二宮之三條高倉御所、催前右兵衛佐頼朝以下源氏等誅彼氏族、可令執天下給之由、申行之。仍仰散位宗信、被下令旨、而陸奥十郎義盛<span class="warigaki">廷尉爲義末子</span>、折節在京之間、帶此令旨、向東國、先相觸前兵衛佐之後、可傳其外源氏等之趣、所被仰含也義盛補八條院藏人<span class="warigaki">名字改行家</span></p>
</div>

.gen{
    writing-mode: vertical-rl;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    white-space: pre-wrap;
    text-align: justify;
    margin: 1em auto;
    padding: 1em;
    height:400px;
    width: 100%;
    background-color: #4a3435;
    overflow-y: hidden;
    overflow-x: scroll;
    line-height: 2;
    color:#fff;
    font-size:22px;
    border-radius: 8px;
}
.gen p{
    margin:0;	
}
.warigaki{
    font-size:14px;
    vertical-align: text-top;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

縦書きの設定に加えて、様々な設定をして見た目を整えています。

white-space: pre-wrapはスペースをそのまま残したいからです。

text-alignはjustifyにして、均等割付になるようにしています。

overflow-y: hiddenは高さ指定をしているので特に必要ないのですが、overflow-xは文字数が増えた時にスクロールさせたいのでscrollになっています。

画面幅を狭くしたときやスマホなどで横にスクロールして、全てのコンテンツが読めるようにしてあります。

後はデザイン的なところでpaddingや行の高さなどを設定しています。

また、もう一つ、スクロールバーも-webkit-scrollbarでデザインを変えています。

webkit系のブラウザのみの対応なので、IEとかFirefoxは多分ちゃんと表示されませんが、chromeでは表示されています。

まとめ

吾妻鏡は以下のものを参考にしています。

国立国会図書館デジタルコレクション

dl.ndl.go.jp

漢文と書き下し文などを、Webページに載せたかったのですが、単純に横書きでも良かったのですが、視認性を上げたくて、考えたのがこの形でした。

書き下し文にルビを振る場合は行間を変えたりなど、数字をいじりればそこそこ対応できるように出来たので良かったです。

ブログで載せるというよりは、データベースとして作成して、検索で表示されて、かつ、他の資料と比較できる、というものが作りたいのですが、なかなか難しそうだなと思っています。

以前はあまり縦書きにしてもしかたない感じがありましたが、現在はではディスプレイのサイズも大きくなりましたし、フルスクリーンWebサイトも増えてきて、横幅を広くとるデザインが受け入れられてきました。

なので、その横幅を活かして、縦書きを上手く使うサイトを作っても大丈夫そうな気がします。

歴史系の文書は基本縦書きですし、紙のどの位置に書いてあるとか、闕字とかにも意味かあるので、それらを再現するために、縦書きを使いたいなと思う時があります。

ただ、問題として縦長画面のスマートフォンというのがどうしても出てきてしまうので、その対策をきちんと考えないといけないのが少しめんどくさいですね。