🦔

Web 組版の Tips 5つ－長体から俳句の組版まで－

2021/04/14に公開

CSS

はじめに

先日はこのような記事を書きました。

引き続き Web 組版をやっていきます。今回は細かい感じなので Tips 形式です。詳細なコードは CodePen の中身を見てね。

長体／平体をかける

長体と平体は transform: scaleX(); で実現できそうですが、これでは文字の幅だけでなく、ボックス幅も変わってしまいます。これを回避するため、長体の場合はその分ボックス幅を広くします。SCSS などで書くのが楽です。

style.scss

p {   
  $scale: 0.85;    // $scale > 1 で平体
  width: 100% / $scale;
  transform-origin: left top;
  transform: scaleX($scale);
}

文字の内側にかかる下線

文字に下線と言えば

border-bottom: 5px solid orange;

と書くのが普通ですが、文字の内側にかかる下線は border-bottom では表現できません（頑張ればできるかもしれない）。下記のように liner-gradient を使います。

background: linear-gradient(transparent 70%, orange 70%);

border-bottom と上記の liner-gradient を併用すると文字の下端にまたがる下線が作れます。が、環境によって隙間ができるので実戦投入はしないほうがよさそう。

border-bottom: 4px solid orange;
background: linear-gradient(transparent 60%, orange 60%);

微妙な改行を回避して一行に収める

span#one-line {
  white-space: nowrap;
}

をかけて改行をやめさせたのち、行と親要素それぞれの幅の比をとって transform: scaleX() で長体をかけます。ちょっと JS を書く。

縦書きのツメ組み（プロポーショナルメトリクス）

font-feature-settings: 'palt';

は横組み専用のツメ組み設定なので要注意。縦書きの場合は、

font-feature-settings: 'vpal';

となります。

俳句の組版

俳句の組版では、句ごとに文字数が異なっていても慣例的に天地を揃えます。このサンプルではベースとなる文字数と文字間（letter-spacing）を設定して、ベースより文字数が少なければ文字間を広げて調整、文字数が多ければ平体（transform: scaleY();）をかけて調整しています。vanilla 面倒だったので jQuery で書いた。