縦書きで横書き。

PC版へ 2010年12月10日
なんだかよく判らないタイトルですが。

要は、縦書きスタイルで日本語を縦書き表示するときに、半角英数字の表示方法をどうしようか、という話です。

3つの表示方法を比較 / 検討してみましょう。
レノン氏はWar Is Overと呟いた
レノン氏はWar Is Overと呟いた
レノン氏はWar Is Overと呟いた
う〜ん、個人的にはのレイアウトが美しいと思うのですが、いかがでしょう。

CSSは、こんな感じ。


widthmargin-bottom を適切に設定してやらないと、横倒しにしたエリア内の表示が切れたり、下に続く文字と重なったりしてしまいます。この値の算出方法がけっこう難儀なのですなぁ。

縦書き用スタイルシートでは、表示用フォントを日本語等幅フォント(Macならヒラギノ角ゴシック、WindowsならMSゴシック)に指定しています。これは、「縦の一行を、幅がひと文字分の div で囲む」という仕様のため。等幅フォントでないと、表示がガタガタになってしまいます。

で、例えばヒラギノ角ゴシック、日本語フォントは等幅ですが、半角英数字はプロポーショナルなんですな。だから「'em' という単位は全角文字ひとつ分の幅なのだから、半角の文字数を数えて1/2にすればいいじゃん」と考えても上手くいきません。
ならば、この横書きエリアのフォントを等幅に指定してやる(font-family: monospace;)と良いと考えたのですが、何故かIEだと上手く表示されない。困ったちゃんです。

とりあえずいまのところ、カット&トライで最適な width と margin-bottom を見つけるしか無い。

JavaScriptを使えば、こいつらを自動計算できないこともないので、いずれtateEditに「縦書きで横書きレイアウト」機能を追加するかもしれません。

関連記事

コメント

現在、コメント機能は停止しています。