縦書きで横書き。

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

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

3つの表示方法を比較 / 検討してみましょう。

１．レノン氏はWar Is Overと呟いた

２．レノン氏はWar Is Overと呟いた

３．レノン氏はWar Is Overと呟いた

う〜ん、個人的には３のレイアウトが美しいと思うのですが、いかがでしょう。

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に「縦書きで横書きレイアウト」機能を追加するかもしれません。

freefielder.jp

関連記事

コメント