Firefox 4: OpenTypeフォントのサポート
Firefox 3.5への@font-faceサポートの導入は、webサイト上におけるフォントの表現手法をより豊かなものとすることを可能にしました。これに加えて、近年のメジャーなブラウザのWOFFフォントの対応やフォントベンダーの多様化に伴い、現在の開発者は二年程前と比べると比べものにならない量のフォントを取り扱うことが可能です。
OpenTypeのフォーマットは、長い間フォントデザイナーがデザインしたフォントに対して、合字、ゆらぎ、小キャップ、タブ図など、多様なバリエーションを施すことを可能にしてきました。一方、OpenTypeの規定はこれらのデザインバリエーションを実現するためにこれらのデザイン一つ一つに対して一意なタグを用意していますが、Adobe InDesign等専用のソフトウェア上のみで使用可能でした。これらのデザインが文字列に対して適用され、レンダリング可能な状態になる際にはデザインのセレクション及び配置位置の情報が適用されます。Firefoxは現在フォントのデフォルトの値を用いてレンダリングを行いますが、フォントのデザインをCSSを用いて変更することが可能になれば、より幅広い表現手法が可能となります。
これを実現するために、Firefox4ではCSSによるOpenTypeフォントの操作が可能です。-moz-font-feature-settingのCSSプロパティを用いることにより、フォントのカーニング、合字、反転、小キャップ、stylisticセットに代表される様々な装飾が可能になりました。
CSS3によるフォントの規定では、フォントの種類に関する様々なサブプロパティを含みます。これらは開発と共に、webページ製作者によるフォントの操作を可能にすることを目的としていますが、現状のFirefox4においてはより低レベルの -moz-font-feature-settingsのCSSプロパティのみがサポートされています。これを用いることにより、ページ製作者は直接OpenTypeのフォントのページ内における有効/無効を切り替えることが可能です。
.altstyles {
/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
/* dlig = discretionary ligatures, ss01 = stylistic set 1 */
-moz-font-feature-settings: "dlig=1,ss01=1";
}
参考として、このリンクより利用可能な全てのOpenType装飾が参照可能です。FontFontではOpenTypeフォントの装飾をビジュアルと共に分かりやすく提示しています。
合字と代用文字
フォントデザイナーは往々にして簡単な合字やカーニングデータをフォントに埋め込みますが、更なるデザインの向上のためにより複雑な合字表現や代用文字がフォントセットに用意されている場合もあります。以下の図には，Underwareによる多数の合字表現を含むブラシ調のデザインであるBello Pro script fontによるデザインが使用されています。
上記の図では、”and”と”by”に対して合字表現が使用されており、見出しには小キャップが使用されています。唯一のフォントのスタイリングは”Smooching”における文字の連結を行うために使用されています。画像のリンク先にて、これらのフォントは全て選択及びコピー可能であることが確認できます。
数字表記
以下の図は、Typekitより入手可能なAdobeのMinion Proを用い、数字を用いたモノスペースの表組みを表現した例を示しています。プロポーショナルフォントを用いた数字表記を行う場合、同じ桁数でも数字によってサイズが異なります。これを防ぐために、本来ならばモノスペースのフォントを用いることが必要ですが、OpenTypeフォントの場合文字間隔のフォーマッティングは自動で行われます。
デフォルトの設定として、フォントは等間隔、あるいはプロポーショナルであるかの指定を行うことが可能ですが、これらの設定を動的に変更することが可能なため、インラインテキストにはプロポーショナルフォントを、表組みには等間隔フォントをといった使い分けが可能です。
分数表記の自動化
料理のレシピにおいて材料の使用量を分数で表したい場合等、OpenTypeの自動分数表記を用いることにより自動的な分数表記が可能です。
上記のそれぞれの分数表記は、通常のテキストフォーマットで記述されており (例: 2 1/2)、特別なユニコードポイントは使用されていません。自動分数表記をサポートするフォントに関しては、OpenTypeのレイアウトエンジンが自動的にスラッシュ(/)で分割された分数表記を生成します。一方、これらの表現は比較的単純な分数のみを対象としており、複雑な数学表現を分数で表現する際にはMathML等の専用ライブラリを用いることが推奨されます。
言語依存の表記
多くの言語には、他の言語と同様なようで異なる文字表現が含まれます。例えば、セルビア語、マケドニア語、ブルガリア語における表現は、キリル文字をベースとしたそれぞれ異なる表現手法が用いられています。OpenTypeのフォントは、言語依存の表現を用いる場合、ベースとなる言語フォント（例ではキリル文字）に対して言語別の装飾オプションを指定することにより、対象とする言語のレンダリングを行うことが可能です。
オリジナルな装飾の作成
OpenTypeはプリミティブな装飾タイプを用いて、上位レイヤの様々な装飾を実現します。フォントデザイナーはこれらのプリミティブなタイプを用い、独自の装飾を生成することが可能です。-moz-font-feature-settingsを設定することにより、これらの装飾はCSS経由で変更することが可能です。
下記の例では、LettErrorの著者であるErik van Bloklandによるプリミティブな装飾タイプを用いたフォントのアニメーションエフェクトを示しています。
OpenTypeの形状変換エンジン、HARFBUZZ
これまでフォントに対する装飾の選択や位置の決定は、Uniscribe (Windows)やCoreText(OSX)などのプラットフォーム依存のライブラリによって行われてきました。Firefox4ではオープンソースのHarfBuzz OpenType shaping engineを用い、全てのプラットフォームにおいてこれらの操作を可能にしました。これにより、これまで複雑さのためサポートを受けることが難しかったインド語の記述や西南アジアの言語をサポートすることを今後の展望として目指します。
TYPEKIT使用に関する注意点
Typekitのウェブフォントサービスより入手可能なAdobeの全てのフォントにおいて上記で説明したOpenTypeの装飾が可能ですが、これらの機能を使用するためにはキットエディタの”言語サポート”カテゴリ以下の”全てのキャラクタ”オプションを有効にすることが必要です。
その他の例
(一年前のブログポストより更新分):