freefielder.jp

なんだかよく判らないタイトルですが。

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

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

CSSは、こんな感じ。
span.test3{ display:block; white-space:nowrap; /* スペースで折り返さない */ word-wrap:normal; /* 単語の途中で折り返さない */ width:6em; margin-bottom:5em; /* Firefox用 */ -moz-transform-origin: 0 0; -moz-transform:translate( 1.05em) rotate( 90deg ); /* Safari, Chrome用 */ -webkit-transform-origin: 0 0; -webkit-transform:translate( 1.05em) rotate( 90deg ); /* Opera用 */ -o-transform-origin: 0 0; -o-transform:translate( 1.05em) rotate( 90deg ); /* IE用 */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

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

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

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

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

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

コメント

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