←index
CSSによるタイポグラフィ実験3
(以降はsafariのみ対応)
font-sizeやpositionを変化させる代わりに、css3のスタイルであるtransformを使ってみる。
transformはブロック要素にしか効かないので、文字単位でdivで括るようにした。
まず装飾のないもとのテキスト。
文字ごとにscaleを変化させるとこうなる。スケーリングの基準はデフォルトでボックスの中心なのを、左下に合わせてある。
3行目は列のボックスごとフォントを小さくしている
文字間のスペースを詰めて通常の文字組に調整する。この場合はスケールでできた隙間分だけtranslateで左に移動させている。
さらにtranslateを適用して、文字の位置を動かして完成。
translateを使ったほうが、相対位置の計算がしやすい。さらにtranslateは複数指定することができるため、累積の位置合わせも楽である。