CSS3でテキストを長体・平体にする方法と注意点

テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。
テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対しても使えます。
表現の幅が広がりますね。

ただし、transformの性質上、説明文などの長い文章や、文章中の一部に使おうとするとき、表示がうまくいかないことがあります。ハマりやすいポイントがあるので、すべてのテキストに適用するのではなく、使う場所を選んで設定することをオススメします。

基本的な使い方

<p class="text">普通のテキスト</p>

<p class="text text-narrow">長体テキスト</p>

<p class="text text-wide">平体テキスト</p>

<style>
.text {
    text-align: center;
}

.text-narrow {
    transform: scale(0.8, 1);
}

.text-wide {
    transform: scale(1.5, 1);
}
</style>

/* ※ベンダープレフィックスは対応ブラウザに合わせて適宜調整が必要です。 */

他の要素との間隔に注意

transformで拡大・縮小するとき、他の要素の位置には影響しません。
そのため、値を大きくすると他の要素に重なってしまいます。
以下の例は、等間隔のテキストで2行目だけ長体になるようスタイルを当てています。
transform: scale(1, 3.5);

テキストが折り返すときに注意

長いテキストで折り返しがある場合は、テキストの折り返す場所が本来の位置とずれてしまいます。

• 長体テキストの場合(横幅を狭く)
  transform: scale(0.8, 1);
  本来は横幅100%なのですが、transformで80%に縮小されているので、両サイドに縮んだ分の隙間ができています。

• 平体テキストの場合（横幅を広く）
  transform: scale(1.5, 1);
  本来は横幅100%なのですが、transformで横に150%に拡大されているので、両サイドにはみ出ています。

拡大縮小の基点に注意

デフォルトの基点は、要素の中心となっており、その基点から上下左右にtransformします。
そのため、前述の長体テキストの例では両サイドが開いており、中央に寄っているように見えます。
通常のテキストと同じように左寄せにしたいときは、基点の位置を調整するtransform-originを使います。

左寄せテキストならtransform-origin: top left;を指定します。
すると左上を基準にしてtransformします。

<p class="text-narrow-left">長体テキストの文章です。
左上を基点にしています。長いテキストです。
長体テキストの文章です。左上を基点にしています。</p>

<style>
.text-narrow-left {
    transform: scale(0.8, 1);
    transform-origin: top left;
}
</style>

/* ※ベンダープレフィックスは対応ブラウザに合わせて適宜調整が必要です。 */

左寄せにすることができます。

幅に注意

上記の例でテキストは左寄せになっていますが、右側が開いたまま折り返した状態になっています。
scale(0.8, 1)で横幅が80%相当になっているので、計算して100%になるように幅を調整します。

100 ÷ 0.8 = 125

<p class="text-narrow-100percent">長体テキストの文章です。
左上を基点にしています。長いテキストです。
長体テキストの文章です。左上を基点にしています。</p>

<style>
.text-narrow-100percent {
    transform: scale(0.8, 1);
    transform-origin: top left;
    width: 125%;
}
</style>

きれいにおさまりました。
　
　

まとめ

transformを細かく設定していくと、CSSだけでテキストの長体・平体を表現することができます。
しかし、レスポンシブサイトや複雑なレイアウトのデザインになってくると、個別のスタイルが増えたり、更新があったときに見落としやすくなるところも懸念となります。使いどころとしては、ページ固定の見出しなど限定できるところで使うようにしておくと調整もしやすいと思います。

補足

他にもハマりポイントがあり、文章中の一部分だけに長体・平体を使う場合や、inline要素に適用させたいときはdisplay: inline-block;が必要です。また、通常のテキストと長体の部分で文字と文字の間に隙間ができたり、平体の場合は隣の文字と重なってしまったりするので、上記のような幅の対応だけでなく、余白やマージンの調整も必要になってきます。

参考

• WEBフォントの長体・平体に対応する
• CSS3のtransformで、文字を長体や平体で表示する方法