Ligature Symbolsが崩れてしまうときの対処法

Ligature Symbolsとは

Ligature Symbolsとは、webフォントとして使えるアイコンフォントです。 http://kudakurage.com/ligature_symbols/

Ligature Symbolsは、リガチャ（合字）という複数の文字列を組み合わせ、１つの文字としてブラウザで表示されるシステムを使っています。 Wikipadia - 合字

下記のように.lsfというクラスをつければ、中の文字列がアイコンに変換されます。

<span class="lsf">gear</span>

↑こんなかんじ

が、なぜか崩れてしまう……

ここからが本題です。 普通に

<span class="lsf">gear</span>

と書いているだけなのに、アイコンになってくれないのです。

↑こうなってほしいのに

↑こうなってしまう……（「right」という文字列がアルファベットのまま残っています）

原因がよくわからず、とりあえずspan要素の幅が「gear」の文字が入るぶんあれば崩れないことがわかったので、文字列を囲む要素に大きめのwidthをつけて対応していたのですが、widthを広げたぶん不自然な隙間が空いてしまうのでレイアウト的にすごくやりづらい。。。 短い文字列ならいいのですが、「alignadjust」とかけっこうきつい。

そして「なんでダメなのかなー」と思いつつインスペクタをいじっていたら、ふっと気づきました。

.lsf をつける要素に word-wrap: break-word が指定されていると崩れる

word-wrapというプロパティは「box内の文字列がboxからはみ出したときの扱いをどうするか」を指定するプロパティなのですが、word-wrap: break-wordは「boxからはみ出した文字列は単語単位で改行する」という指定です。

デフォルトのword-wrap: normalではURLなどの文字列がboxからはみ出してしまうので、このときはbodyにword-wrap: break-wordを指定していました。 どうもそのせいで、要素からはみ出た文字は改行されてしまってアイコンにならないといったことが起きているようでした。 改行されたらそらダメだわな。。。

対処法

Ligature Symbolsのフォント設定をしている.lsf、.lsf-icon:beforeに

word-wrap: normal;

を指定したら、widthを調整しなくても崩れずにアイコンになってくれるようになりました。 そもそもword-wrap: break-wordをbodyではなく個々の要素に指定すればいいのですが、個々となると指定する箇所が多かったのでアイコンのクラス側にword-wrap: normalを指定する形で対応しました。疲れた…