縦書き用スタイルシート、更新。

ということで、前の記事の続きです。なんだかステキなCSSを使ったならば、要素を綺麗にセンタリングできることが判ったので、縦書きレイアウト用スタイルシートにスタイルを追加してみました。

縦書きスタイルシートでは、一行を、ひと文字分の幅の<div>〜</div>で囲んで縦書きに見せかける…という方法をとっています。で、この方法、文字のサイズを変更すると、文字が左揃えになるのです。
例えば、こういうこと。
ちょっと見苦しい。 文字サイズを変更したときでも、文字のセンターラインを、行のセンターラインと常に一致させたほうが綺麗でしょ。
例えば、こういうこと。

前回紹介したCSSを、文字サイズを弄るタグに適用してみたわけです。こんな感じ。

/* フォントサイズ変更時のフォント位置アジャスト用 */
.tate-line .font08{ font-size:8pt; }
.tate-line .font10{ font-size:10pt; }
.tate-line .font12{ font-size:12pt; }
.tate-line .font14{ font-size:14pt; }
.tate-line .font18{ font-size:18pt; }
.tate-line .font24{ font-size:24pt; }
.tate-line h1{ font-size:24pt; font-weight:bold; }
.tate-line h2{ font-size:18pt; font-weight:bold; }
.tate-line h3{ font-size:14pt; font-weight:bold; }
.tate-line h4{ font-size:12pt; font-weight:bold; }

.tate-line .font08 , .tate-line .font10 , .tate-line .font12 , .tate-line .font14 , .tate-line .font18 , .tate-line .font24 , .tate-line h1 , .tate-line h2 , .tate-line h3 , .tate-line h4 , .tate-line font  {
    display:block;
    position:relative;
    left:50%;
    width:1em;
    line-height:1.05em;
    margin-left:-0.5em;
}

文字サイズの変更にfontタグを使うのは好きではないので、代わりに<span style="font-size:〜">を使いたいのですが、spanタグそのものに上記のスタイルを適用してしまうと、縦書きのその他の部分に不都合が出てきてしまうので、やむなくクラスを定義しています。
class名「font08」がフォントサイズを8ptにするときに使うやつ、「font10」が10ptに…という具合。

うっかりfontタグを使ってしまってもアジャストされるように、fontタグにも同じ属性を定義しています。あと見出しタグもフォントのサイズを変えるので、こいつらも行のセンターを外れないように設定。

より綺麗なレイアウトで


　フォントの大きさを変更しても、
常に中心が合うようになりました。

　わはは。やったね！

カテゴリ:

タグ: