2014-11-18

HTML+CSSで縦書き

そういえば結局縦書きってどうなったんだっけ? と思ったのでテスト。

隴西(ろうさい)の李徴(りちょう)は博学才穎(さいえい)、天宝の末年、若くして名を虎榜(こぼう)に連ね、ついで江南尉(こうなんい)に補せられたが、性、狷介(けんかい)、自(みずか)ら恃(たの)むところ頗(すこぶ)る厚く、賤吏(せんり)に甘んずるを潔(いさぎよ)しとしなかった。いくばくもなく官を退いた後は、故山(こざん)、※(「埒のつくり+虎」、第3水準1-91-48)略(かくりゃく)に帰臥(きが)し、人と交(まじわり)を絶って、ひたすら詩作に耽(ふけ)った。下吏となって長く膝(ひざ)を俗悪な大官の前に屈するよりは、詩家としての名を死後百年に遺(のこ)そうとしたのである。しかし、文名は容易に揚らず、生活は日を逐(お)うて苦しくなる。李徴は漸(ようや)く焦躁(しょうそう)に駆られて来た。この頃(ころ)からその容貌(ようぼう)も峭刻(しょうこく)となり、肉落ち骨秀(ひい)で、眼光のみ徒(いたず)らに炯々(けいけい)として、曾(かつ)て進士に登第(とうだい)した頃の豊頬(ほうきょう)の美少年の俤(おもかげ)は、何処(どこ)に求めようもない。数年の後、貧窮に堪(た)えず、妻子の衣食のために遂(つい)に節を屈して、再び東へ赴き、一地方官吏の職を奉ずることになった。一方、これは、己(おのれ)の詩業に半ば絶望したためでもある。曾ての同輩は既に遥(はる)か高位に進み、彼が昔、鈍物として歯牙(しが)にもかけなかったその連中の下命を拝さねばならぬことが、往年の儁才(しゅんさい)李徴の自尊心を如何(いか)に傷(きずつ)けたかは、想像に難(かた)くない。彼は怏々(おうおう)として楽しまず、狂悖(きょうはい)の性は愈々(いよいよ)抑え難(がた)くなった。一年の後、公用で旅に出、汝水(じょすい)のほとりに宿った時、遂に発狂した。或(ある)夜半、急に顔色を変えて寝床から起上ると、何か訳の分らぬことを叫びつつそのまま下にとび下りて、闇(やみ)の中へ駈出(かけだ)した。彼は二度と戻(もど)って来なかった。附近の山野を捜索しても、何の手掛りもない。その後李徴がどうなったかを知る者は、誰(だれ)もなかった。
<div style="width:100%; height:30em; overflow:scroll; padding: 1em; font-family: '@MS 明朝'; writing-mode: tb-rl; writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; ">
本文
</div>

(本文は中島敦 山月記より)

WebKit系とIEはいけるみたいですね。

あと、フォントは縦書き用じゃないと色々と不都合が出る気が。

JavaScriptライブラリも色々あるみたいですね。