font-feature-settings の文字詰めを考察する

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 のプロパティ仕様については、下記がきちんと機能を説明していて参考になります。

CSS での OpenType 機能の構文

 

各ブラウザで比較してみました。

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

方針通りの表示にできました。

ご要望の文字組みに合わせて、こんな感じでコントロールしていきたいと思います。