縦書きCSS使用時に、フォントのサイズを弄ると行のセンターがズレる…。回避策。

[ 2010年12月6日：追記 ]
この記事で書いているような方法より断然ステキな方法を発見したので、そちらを参照してみてください。
　　→ [スタイルシート] センタリング。｜2010年11月29日の記事
　　→ 縦書き用スタイルシート、更新。｜2010年12月6日の記事

…というか、このページの縦書きのサンプルには、既に新しいCSSが適用されてしまっているので、読んでも何のこっちゃ判らんと思います。


縦書きWebページレイアウト用のスタイルシートを公開しているわけですが、フォントサイズを変更すると、行のレイアウトがなんだか気持ち悪いことになりますね。
フォントの大きさを弄ります。
ふつう　大きく　更に大きく
フォントの大きさを弄りました。
行のセンターラインと文字のセンターが合っていてほしいのだなぁ。

フォントサイズを変えるときは、fontタグ( <font size="xx">〜</font> )を使うか、あるいはspanタグ( <span style="font-size:xxpt">〜</span> )を使うのですが、こいつらにスタイルを適用して、センターがきっちり合うようにしてみましょう。
フォントの大きさを弄ります。
ふつう　大きく　更に大きく
フォントの大きさを弄りました。
…いかがでしょう。ちょっとマシになりました。

fontタグに、display:block; 属性を指定して、さらに margin-left に負の値を指定することによって、センター合わせを行っています。当該行のhtmlソースは以下の通り。
<div class="tate-line">ふつう　<font style="display: block; margin-left: -0.07em;" size="4">大きく</font>　<font style="display: block; margin-left: -0.13em;" size="5">更に大きく</font></div>


上の例では、fontタグでフォントサイズを変えているのですが、spanを使っているときも同じような感じでどうぞ。

相変わらず強引ですが。

カテゴリ:

タグ: