2011.3.21 Monday - 12:16

Hyphenator.js — ハイフネーションを自動で行う便利なJavascript

キーワード

hyphenator.jsは、英単語等をハイフンで分割する“ハイフネーション”を自動で行ってくれる便利なJavascriptです。IllustratorやInDesignには自動でハイフネーションを行う機能がありますが、それと似たようなことが実現可能です。

Webデザインの特性上あまり使われないのですが、グラフィックデザイン上では行末を揃える箱組レイアウトをする際、このハイフネーション処理を行います。

意外と面倒なハイフネーション処理

英和辞典を開いてみると分かりますが、ハイフンはどこに入れてもよいというわけではなく、原則単語ごとに位置が決まっています。また人名などの固有名詞はハイフネーションすべきではないとされています（参考：欧文組版）。

本hyphenator.jsは自動処理されるので、いわゆる例外的な処理は難しいかもしれませんが、それでも便利であることは間違いありません。

ソフトハイフン（­）とは？

Javascriptが自動でハイフンを付加することは仕組みとして分かるかと思いますが、実際のソース上ではどうなっているのでしょうか？結論から言うとソフトハイフンが動的に付加されています。

実は調べて初めて知ったのですが、ソフトハイフン（­ もしくは­）という特殊文字が存在するそうです。

このソフトハイフンはその単語が行内に収まらない場合、行末にハイフンをつけて折り返し、収まる場合は表示されないというものだそうで。さらにコピペ等したときに余分なハイフンまでもがコピーされないよう、テキスト選択ができないようになっているそうです。
参考： と­を使い分けよう – パソコンＱ＆Ａ

…という上記の前知識をもって、サンプルデモページを作ってみました（本家のデモとほぼ同じ）。ブラウザのウィンドウを伸縮させるとハイフンが付いたり消えたりするのが分かります。簡単な設置方法を解説します。
» サンプルデモページを見る

1. hyphenator.jsのサイトから一式データをダウンロードします。

2. HTMLファイルを用意します。必ず<html>にlang属性で言語を指定してください（今回はlang=”en”）。日本語（lang=”ja”）はエラーを返します。また文字コードはUTF-8を推奨するそうです。

3. <head>タグ内にhyphenator.jsを読み込みます。

4. 同じく<head>タグ内にHyphenatorを実行させるスクリプトを挿入します。

5. ハイフネーションしたいボックスにhyphenateのクラスを付けます。逆にハイフネーションさせたくない場合はdonthyphenateのクラスを付けます。


English pencil quote define information...

6. 今回は結果が分かりやすいようにCSSを下記の通り設定しています。

body {
	width:40%;
	margin-left:35%;
	margin-right:35%;
}
.TextBoxJustify {
	text-align:justify;
}

英語だけではなくヨーロッパの様々な言語にも対応しています。また同梱のmergeAndPack-Toolを使えばさらに細かな設定も可能です。

仕様上日本語ページでは使うことができませんが、完全な英語サイトを制作する際導入してみてはいかがでしょうか？

Hyphenator.js
http://code.google.com/p/hyphenator/

サンプルデモページ
http://lab.petitboys.com/hyphenator/

PAGE TOP