
Web担当の浮貝です。制作中に調査、考察したことなど、こちらに覚え書きしていこうと思います。今回のネタはCSSのfont-feature-settingsの設定です。
弊社でのWeb制作案件はビジネス向けメインということもあり、長らくWin7+IEがメインターゲットでしたが、さすがにもういいだろう…ということで、本文を游ゴシック体(iOSならヒラギノ)とし、CSSのfont-feature-settings で文字詰めを設定することも増えてきました。
これまでweb上の記事を参考にさせていただきながら、とりあえず ‘pkna’ でいいんじゃないの?と思ってましたが、文字組みにこだわりのあるクライアント様も多いので、もう少し深く考察してみました。
(参考記事)
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました
まずは各ブラウザ/プロパティで検証
検証用のCSSは下記のとおりです。
p{ font-family: 'YuGothic','Yu Gothic'; font-weight: 500; text-align:justify; text-justify:inter-ideograph; &.pwid{ font-feature-settings: 'pwid'; } &.palt{ font-feature-settings: 'palt'; } &.pkna{ font-feature-settings: 'pkna'; } }
font-feature-settings のプロパティ仕様については、下記がきちんと機能を説明していて参考になります。
各ブラウザで比較してみました。
Windows 10 / IE11
Windows 10 / Firefox
Windows 10 / Chrome
macOS 10.12 / Safari
MacのChrome、FirefoxはWindowsと同じでしたので省略します。
またiOSのSafariはフォントはヒラギノですが、font-feature-settingsの挙動はMac版Safariと同じでしたので、ひとまずMacのSafariで検証することとします。(もっと詳細に調査すれば違いあるかもしれませんが…)
それぞれの問題点は…
ブラウザの比較
- IE:font-feature-settings を設定すると justify が効かなくなる
- Firefox & Chrome:特に問題なさそうです
- Safari:pkna が pwid と同じ挙動になってしまっています(バグ?)
プロパティの比較
pwid
- 全角英数字が半角に変換される
- 先頭の全角スペースの幅が非常に狭くなる
- 句読点は全角幅のまま
- ()・等の約物は文字詰めされる
palt
- 全角英数字はそのままの字形で文字詰めされる
- 句読点を含む約物すべて文字詰めされる
pkna
- ひらがな、カタカナのみ文字詰めされる
- 全角英数字、約物は文字詰めされない
どれも一長一短といったところですが、特にSafariの問題は困ってしまいます。
Javascriptを使用していいとこどりを
クライアント様の要望や、読みやすさを考え、次のような方針で検討しました。
- 全角英数字はそのままの字形とする(Safariが半角になってしまうのはあきらめる)
- 句読点は全角幅、その他の約物は文字詰めする
- 行頭の1字アキを設定可能にする。ただし行頭の「は2分アキに
- IEの justify はあきらめる
これだと、pkna をベースに、句読点以外の約物は palt とするのがよさそうです。行頭の1字アキは、Safari対策もありtext-indent で行うことにします。
いちいち約物を<span>等で囲うのは面倒なので、htmlはいじらずにJavascript(jQuery)で修正することにします。下記のようにCSS、JSを設定しました。
CSS
p{ text-align:justify; text-justify:inter-ideograph; font-feature-settings: 'pkna'; text-indent: 1em; } p span{ font-feature-settings: 'palt'; } p.halfindent{ text-indent: 0.5em; }
JS(jQuery使用)
$('p').each(function(){ var txt = $(this).html(); if(/^「/g.test(txt)){ $(this).addClass('halfindent'); } $(this).html(txt.replace(/(「|」|・|(|))/g,'<span>$1</span>')); })
正規表現を使用して「」・()の文字に<span>をかけています。行頭に「がある場合は、pにクラスを追加して2分アキとしています。
設定後はこちら
Windows 10 / Chrome
macOS 10.12 / Safari
方針通りの表示にできました。
ご要望の文字組みに合わせて、こんな感じでコントロールしていきたいと思います。