機種依存を克服

丸囲み文字

丸囲み文字、例えば「㊓」「㊗」などの文字はユニコードとして定義されていますが機種依存文字として扱いが不安定な文字が存在します。上の例は祝の囲み文字を機種依存から抜け出す例を示しました。 機種依存・環境依存文字とはOS(Operating System)やブラウザに依存して表示が異なる文字をいいます。

デザインが変わるだけならば大きな問題とはなりませんが、まったく表示されない文字が存在します。

機種依存文字の一部の丸囲み文字はdiv, spanタグのborder属性で丸囲み文字に似たような表現が可能になります。上例は「㊗」の機種依存克服の一例です。

時間をかければ特定のブラウザの丸囲み文字に酷似した表示が可能ですがすべてのブラウザ向けにデザインすることは困難です。丸囲みや四角囲み以外、♬のような文字を代替することも難しいです。

機種依存文字はなるべく利用すべきでないという人には、「機種依存文字チェッカー」サイトがあり調査してくれます。

以下の図はサイトにより調査した結果です。

機種非依存丸囲み文字表示例

<div style="width: 180px; height: 70px; border: 1px blue solid;">
<div style="float: left; margin-top: 5px; width: 80px; height: 50px; border: 0px purple solid;">
<div style="margin: 0 auto; vertical-align: middle; width: 38px; height: 38px; font-size: 34px; line-height: 1.1em; font-weight: 500; color: green; border: 3px pink solid; border-radius: 23px;">祝</div>
</div>
<div style="float: left; text-align: center; width: 80px; height: 60px; font-size: 50px; line-height: 1.2em; color: tomato; border: 0px gold solid;">&#x3297;</div>
</div>

余談

丸囲み文字の稿で左にアナログ式から少し進歩したデジタルまがいの電話機（☎）、右に古いタイプの受話器（📞）を機種依存文字で表示しました。

妙な表示になっている場合は環境の違いによるものとあきらめてください。

上図はローカル環境で表示したときの機種依存文字です。電話機はアナログ式の黒電話です。環境依存そのものです。

機種依存文字コード例