連続約物のアキ

   

句読点、カッコ、中点などの約物は通常記号の前や後ろに二分アキ(中点の場合は前後に四分アキ)を入れて記号として全角になるような処理がとられますが、約物が連続する場合は、体裁をよくするためにそのアキを調整します。詳しくは日本語組版の要件の「3.1.4 始め括弧類,終わり括弧類,読点類,句点類及び​中点類が​連続する​場合の​配置方法」を参照してください。

始め括弧類,終わり括弧類,読点類,句点類及び中点類が連続する場合の配置例

始め括弧類,終わり括弧類,読点類,句点類及び中点類が連続する場合の配置例(「日本語組版処理の要件(日本語版)」より)

しかし、現状のWebブラウザではこのアキが自動的に調整されることはありません。

letter-spacing で調整

そこでアキを調整するためにletter-spacingプロパティを使用します。letter-spacingは文字間のスペースを指定するプロパティで、-0.5emを指定することで指定した箇所が二分ツメされます。

ちなみにletter-spacingは指定された範囲内の文字の後ろの部分が調整されます。つまり連続する約物においては前側の約物に対してのみ指定します。後ろの約物に対しても指定してしまうと、その約物の後ろが詰まってしまいますのでご注意ください。

See the Pen letter-spacing by overprint (@overprint) on CodePen.

約猫(YakuCalt)を使用

連続約物のアキを自動的に調整してくれる「約猫(YakuCalt)」フォントを使用するという方法もあります。これを使用すればletter-spacingでツメを指定する必要はありません。

約物Webフォント「約猫」公開+Safari対策済

横書きの場合はフォントを指定するだけで詰めて表示してくれるのですが、縦書きの場合はCSSに、

font-feature-settings: 'calt' 1;

という指定が必要です。

約猫サンプル

約猫サンプル(実際のHTMLページはこちら

参考

 - css, 約物