CSSで行頭の約物を半角にする
- 公開日
- タギング
- CSS
あけましておめでとうございます。
約物を半角にするオプションは CSS のfont-feature-settings
プロパティーに"palt"
値を指定すればできる。約物とは文字や数字以外のグリフと考えていい。
エディトリアルデザインをかじると、約物の一部は全角文字の場合にアキが生じてテキストが間伸びしたように感じることがある。そこで約物半角というオプションを適用すると括弧や句読点のアキが詰まるので、テキストが締まった印象になる。
本文エリア全体に約物半角をかけたい人たちは一定数いるのだろうが、僕はそれはやりすぎだと思う。かと言って和文フォントはベタ組みで読みやすくなっている
という話も諸手を挙げて賛成もできない。グリフによってアキはまちまちだし、個性が出にくい約物はやはり半角にしたほうが見栄えがいいなと思う場面もあるからだ。行頭の括弧などは強くそう思う。というわけでこの記事を書いている。
行頭にマッチするセレクタ
CSS にはfirst-letter
擬似要素というものがある。要素の最初の文字にマッチするセレクタで、英語圏などで一文字目を大きく装飾する「ドロップキャプス」という表現に使われることを想定して考えられたセレクタだ。
.lede::first-letter {
float: left;
color: tomato;
font-size: 3em;
}
このように記述することで.lede
要素の一文字目だけを装飾することができる。この::first-letter
を本文エリア内のp
要素につければ、段落ごとの一文字目に約物半角のオプションを当てられるようになる。
::first-letter
とfont-feature-settings: "palt"
を組み合わせれば、行頭の一文字目の約物を半角にできるはずだ。
.article-body p::first-letter {
font-feature-settings: "palt";
}
論理的にはこれでいいはずだが、結論から言うとリアルワールドはそう甘くなかった。
次のデモをいろんなブラウザで見てほしい。
紫 border のボックスの背景には全角 1 文字幅の方眼を敷いている。::first-letter
を赤文字にしつつ約物半角オプションを指定した。ボックスのフォントファミリーは左から游ゴシック、游明朝、ヒラギノ角ゴシック ProN を指定した。
ブラウザ検証
確認した主要ブラウザのキャプチャを羅列した。
Google Chrome 55 / Mac OS X 10.11(El Capitan)
Google Chrome 55 / Windows 10
Firefox 50 / Mac OS X 10.11(El Capitan)
Firefox 50 / Windows 10
Safari 10 / Mac OS X 10.11(El Capitan)
IE11 / Windows 10
Edge 14/ Windows 10
まず気づくのは、::first-letter
で行頭の一文字目だけにスタイルを当てているつもりが、約物が一文字目の時はその次の文字も、約物以外が一文字目で約物が二文字目の時はその約物も、約物が一文字目から連続している時はその全てが::first-letter
に含まれることだろう。つまりテキストによっては::first-letter
の対象が二文字やそれ以上の文字数になるということ。これは仕様通りなのでこのこと自体に驚く必要はない。
1 つ 1 つ見ていくと、現状ではまともに使うことができなさそうというのがわかる。
Chrome 55 では::first-letter
へのfont-feature-settings: "palt"
が効かない。Windows 10 の一番右のボックスでは効いているように見えるがこれは僕の環境でヒラギノがないので MS P ゴシックが当てられているだけだ。MS P ゴシックはそもそも約物が字詰めされているグリフを持っている。
Firefox 50 では奇妙なことに、$
記号が入ると::first-letter
自体が効かなくなる。$
がなければ期待通り動いているだけに惜しい。もしかしたら他の約物でも起こるかもしれない。
Safari 10 では::first-letter
の一文字目の約物は半角にならないが、::first-letter
に含まれる二文字目以降の約物には半角が効いている。そして::first-letter
直後が詰まりすぎている。font-family
の宣言をコメントアウトすると詰まりすぎがなくなる。フォントに依るのかもしれない。詰まっていない時のフォントは何が適応されているのかよくわからない。計算値では-webkit-standard
というファミリーだった。現象が謎すぎて Firefox を超えている。段落の一文字目の約物半角が効かないのは::first-letter
が対象でなくても同じだった。
IE11 ではどういうわけか分からないが游明朝で::first-letter
へのfont-feature-settings: "palt"
が効いていない。
Edge では期待通りに全てできているように見えるが、游フォントとヒラギノで半角になる約物が異なる。
ブラウザ | ::first-letter とfont-feature-settings: "palt" の対応状況 |
---|---|
Google Chrome 55 | first-letter に約物半角が効かない |
Firefox 50 | 約物半角は効くが、$が入るとおかしい |
Safari 10 (El Capitan) | 一文字目の約物が半角にならない。游ゴ、游明、ヒラギノで first-letter 直後が詰まりすぎる |
IE11 | 游明の first-letter に約物半角が効かない |
Edge | 游フォントとヒラギノで半角になる約物が異なる |
対応状況としてはカオスだ。$
記号に気をつければ Firefox では問題なさそう。Edge も行頭約物半角をかけたい要素はフォントファミリーが統一されているだろうからそこまで問題ではないだろう。Chrome と IE11 は約物半角が first-letter で効かないだけなのでまだいい。しかし Safari では読めなくなってしまうのできつい。
あっさり出来ると思ったけど、すくなくとも Safari で詰まりすぎるのが修正されなければ普通には使えない。
約物半角されたフォントを@font-face で作る
なんとかして対応したいと思って次に試したのが、@font-face
ルールを使って約物半角したフォントファミリーを作る方法だ。
@font-face {
font-family: "YuGothicYH";
font-feature-settings: "palt";
src: local("游ゴシック"),
local("YuGothic-Medium"),
local("Yu Gothic Medium"),
local("YuGothic-Regular"),
local("YuGothic"),
local(YuGothic);
}
@font-face {
font-family: "YuMinchoYH";
font-feature-settings: "palt";
src: local("游明朝"),
local("YuMincho-Medium"),
local("Yu Mincho Medium"),
local("YuMincho-Regular"),
local("YuMincho"),
local(YuMincho);
}
@font-face {
font-family: "HiraginoYH";
font-feature-settings: "palt";
src: local("ヒラギノ角ゴシック ProN"),
local("Hiragino Kaku Gothic ProN");
}
.test1 p::first-letter {font-family: "YuGothicYH";}
.test2 p::first-letter {font-family: "YuMinchoYH";}
.test3 p::first-letter {font-family: "HiraginoYH";}
このように@font-face
でfont-feature-settings: "palt"
を指定したフォントファミリーを設定し、それを対象の段落の::first-letter
に指定する。
しかしというかやはりというか、リアルワールドは甘くなかった。
主要ブラウザのキャプチャは次の通り。
Google Chrome 55 / Mac OS X 10.11(El Capitan)
Google Chrome 55 / Windows 10
Firefox 50 / Mac OS X 10.11(El Capitan)
Firefox 50 / Windows 10
Safari 10 / Mac OS X 10.11(El Capitan)
IE11 / Windows 10
Edge 14/ Windows 10
Chrome 55 で::first-letter
にfont-feature-settings: "palt"
が効かないのは@font-face
を使っても変わらない。
Firefox 50 では@font-face
を使っても$
記号でおかしくなるのは変わらない。
Safari 10 は@font-face
を使うと::first-letter
のfont-feature-settings: "palt"
が効かなくなってしまった。
IE11 も効かなくなった。
Edge 14 も効かなくなった。
ブラウザ | @font-face を使った行頭約物半角の対応状況 |
---|---|
Google Chrome 55 | 効かない |
Firefox 50 | 約物半角は効くが、$が入るとおかしい |
Safari 10 (El Capitan) | 効かない |
IE11 | 効かない |
Edge | 効かない |
@font-face
を使うと使わないときより状況が悪化してしまった。つらい結果としか言いようがない。
いろいろ確かめるのに疲れてこれ以上の検証はしていないが、約物のグリフが半角な専用フォントを作ってウェブフォントで読み込み、::first-letter
に指定する方法がまだ残っている。
壁写真活動家の誰かがそんなフォントを 2 年くらい前から作っている気がする。そろそろリリースされて欲しい。
落ち着いたらバグ報告しようと思うが、これが::first-letter
とfont-feature-settings
のどちらに起因している問題なのかよくわからない。そもそものフォントファイルに起因している可能性もゼロではなさそう。主要な欧文フォントに差し替えてテストしたら何も問題ないとかだと悲しい。
今年もよろしくお願いいたします。