2010.11.29 Monday - 12:49

ff, fi, flなどの合字（リガチャ）を自動処理するjQueryプラグイン

キーワード

グラフィックの欧文組版では ff、fi、 fl、ffi、ffl は、原則合字（リガチャ）を使うことになっています。合字（リガチャ）とは、2文字以上の文字を1つとしているもので、例えばfiの場合 [option]+[shift]+[5]で入力すると fi が入力できます。fとiが別々ではなく、1文字になっているのが分かります。

最近は制作ソフト側で自動処理ができますが、Webデザイン上では技術的…というよりは、気にしないのが通例ですし、面倒で無視してしまいがち。でもこのjQueryプラグインを使えば、自動で合字処理うことができ、とても便利です。

まずはjQuery最新版と、jquery.ligatures.jsをダウンロードし、headタグ内に読み込みましょう。

次に、同じくhead内にjQueryではお馴染みのfunctionを追加しておきます。今回はclass名がligaturesであるものに、合字処理を行うようにしています。



The Ligatures plugin replaces the character sequences ff, fi, fl, ffi
and ffl in the text of the selected elements by their Unicode entitites.

下記はデフォルトの状態です。

The Ligatures plugin replaces the character sequences ff, fi, fl, ffi and ffl in the text of the selected elements by their Unicode entitites.

実際に適用したサンプルはこちら。ff, fi, fl, ffi, fflの部分をマウスでドラッグしてみてください。1文字となって合字になっているのが分かるかと思います。

The Ligatures plugin replaces the character sequences ff, fi, fl, ffi and ffl in the text of the selected elements by their Unicode entitites.

CSS側でフォントをGeorgiaで指定してみました。少し分かりづらいですがGeorgiaの場合、ff, ffi, fflの合字が存在しないようで、デフォルトの文字（ここでは第2候補目のserifで広範囲指定）になってしまうようです。

.hoge {
	font-family:Georgia, serif;
}

The Ligatures plugin replaces the character sequences ff, fi, fl, ffi and ffl in the text of the selected elements by their Unicode entitites.

こちらはTimes (Windowsの場合はTimes New Romanで指定) です。こちらも上記とほぼ同じ仕様。

.hoge {
	font-family:Times, "Times New Roman", serif;
}

The Ligatures plugin replaces the character sequences ff, fi, fl, ffi and ffl in the text of the selected elements by their Unicode entitites.

続いて、人気がないことで有名なComic Sansです。こちらも上記とほぼ同じ仕様で、ff, ffi, fflの部分が顕著に分かります。

.hoge {
	font-family:"Comic Sans MS", cursive;
}

The Ligatures plugin replaces the character sequences ff, fi, fl, ffi and ffl in the text of the selected elements by their Unicode entitites.

検証中に気がついたのですが、Safari (Mac)ではフォントを指定した際、ff, ffi, fflが強制的にデフォルト表示になってしまう模様です。Safari (Win) とIE6に至ってはff, ffi, fflが文字化けして表示すらされないです。

…というわけで、現状環境に強く依存されてしまうようですが、このようなjQueryプラグインもあるということでメモ。ちょいちょいいじれば解決しそうではありますが。

jquery.ligatures.js
http://plugins.jquery.com/project/Ligatures

PAGE TOP