2017年09月10日

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が半角になってしまうのはあきらめる）
  • 句読点は全角幅、その他の約物は文字詰めする
  • 行頭の１字アキを設定可能にする。ただし行頭の「は２分アキに
  • IEの justify はあきらめる

これだと、pkna をベースに、句読点以外の約物は palt とするのがよさそうです。行頭の１字アキは、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にクラスを追加して２分アキとしています。

設定後はこちら

Windows 10 / Chrome

macOS 10.12 / Safari

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

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