ある文字が表示できるか判定したい

Question

3DSブラウザなどの一部の環境で、►などの文字が表示できず文字化けする事があります。
現在、横方向の矢印は▼などの文字を傾けることで対応しています。

<span class="dm">▼</span>

.dm {
    display: inline-block;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    zoom: 1;
}

しかしこの方法は助長である上、レンダリングのバグなどに引っかかるリスクを高めてしまいます。
►が表示できる環境では、►のまま表示したいです。

そこで、CSSやJavaScriptなどである文字が表示可能か検証する方法は存在するのかお聞きしたいです。
私の知識の範囲では、canvas要素に文字を描画し、その結果がU+FFFDまたはU+2BD1と同じかどうか比較し検証する方法ぐらいしか思いつかないのですが…

※通常、このような場合はWebフォントを使うのが一般的ですが、Webフォントが使えない環境にも対応するためこのような方法を取りたいと考えています。
※この例では、CSSや画像により三角形を表現することで問題を解決できますが、そのような方法ではなく、「文字が表示できるか判定する方法」に対する解答をお願いします。

Answer 1

考え方を変えて、画像を使用するほうが堅実ではないかと考えます。
どうしても文字でやらなければならない理由があるのならば別ですが。

Comments

[sounisi5011]

この例で言えば、単純な三角形なのでborderプロパティで出来ますので、今はその方法でやっています。
決まった記号なども、画像が最適でしょう。

ただ、質問である「文字が表示できるか判定する方法」の解答とはなりません。
目的の文字が、画像で表現できない可能性も存在するかも知れません。

[Cf_cwd]

jsでの判定になりますが文字化けした際に字数が変わるのであればlengthを使用して文字化けの判定をすることができるのではないでしょうか？

どのように文字化けするのかなどもう少し詳細な情報があれば回答者が増えるのではないかと思います。またなるべく多くの情報を提示すべきでしょう。
(これは多くの質問者に言えることですが後出しで仕様を出す方が比較的多いですよね。►以外への対応も考えていることなどはあらかじめ明記しておくべきことでしょう)

以下読む必要はありませんが少し思ったことについて。

どうしても文字でやらなければならないのならば別であると私は書いてあるのですが文字でなければならない理由はどのような理由でしょうか？

目的の文字が画像で表現できない例というのが私には思い浮かびませんがどのような例でしょう？画面に出力する際、文字で表現可能(テキストの読み上げを行うブラウザなどでの利用となると話は別ですがそのことも含めて適切にalt属性を使用するでしょう)ならば画像でも基本的には同様に表現可能であると考えます。逆に画像でしか表せないというケースは十分あり得るでしょう。

私はそもそもの手法(方針)として誤っていると考えたためこのような回答をいたしました。特定のブラウザで表示が崩れるのを承知で使用するのならばそのブラウザを切り捨てるつもりで使用している、使用するものだと思います。それを回避できる恐らくベターな方法である画像の使用(CSS3での補完やcanvasでの判定などが特定のブラウザでさらにバグを生みそうに思えるのですがどうでしょうか)を選択しないのは一種のこだわりではないでしょうか。学習目的で作業している上で出てきた疑問の1つだと思うのですが……。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">や<meta charset="UTF-8"> などの文字コードの指定もしていますよね？この質問は聞く必要もないと思いますが念のため。またこれで回避できる問題ではないように思えます。(本体の文字コードが規格に沿っていないなどの原因があり得るため)

[sounisi5011]

> どのように文字化けするのかなどもう少し詳細な情報があれば回答者が増えるのではないかと思います。
その文字に対応しておらず、「表示できない」状態です。
その場合、代用表示としてU+FFFD(または、U+2BD1)の文字が表示されることになっています。
これは確か、Unicodeの仕様で決まっていたことと記憶しています。

> ►以外への対応も考えていることなどはあらかじめ明記しておくべきことでしょう
質問内容は「ある文字が表示できるか判定したい」です。
明記も何も、初めから文字を判定する方法について質問しています。

> どうしても文字でやらなければならないのならば別であると私は書いてあるのですが文字でなければならない理由はどのような理由でしょうか？
> 目的の文字が画像で表現できない例というのが私には思い浮かびませんがどのような例でしょう？
文章中の文字の場合、CSSにより文字色やフォント、文字の太さはいくらでも変わります。
それを画像で表現する事はできません。

[Cf_cwd]

(function (){
var _Text1="►";
console.log("true:"+_Text1.charCodeAt(0));//9658
var _Text2=" ";//U+FFFDを入れておく(質問者にお任せいたします)
console.log("false:"+_Text2.charCodeAt(0));//32
//----9658との比較コードでの判定----
}());

コードに起こしていませんが文字コードでの比較などは行えるようですしJavaScript
で表示可能か検証自体は行えるものと考えます。(質問への回答)

以下は個人的意見等ですので読み飛ばしてくださって結構です。

文字化けしたかどうかは判定できそうですが仮に判定できたとしても文字化けする文字ごとに判定が必要になるのではないでしょうか？環境を見ずに文字化けしたかどうかを確認して対応するのは膨大な種類がありどちらにせよ現実的でないように思えますが……。仮に文章中の文字が文字化けしていることを判定できたとしてどのように対処するつもりなのでしょうか？今後の参考になりそうなので私も興味がありますが。
私はこれで回答を終えることとして質問者の方と共により良い回答が出ることに期待することにいたします。

以下画像の使用を推奨することに関して、デザイン(2D,3D)やサイト制作の学習をメインとしている者から見たときの主観です(JavaScriptを学習しているデザイナー志望でプログラマーではないので今までの回答なども知識不足があり申し訳ないのですが)。見当はずれなことを言っているかもしれません。また以下文章への返答は必要ありませんしそもそも読む必要もありません。後々この質問を見た人がどう思うかはわかりませんがとりあえず書置き。通りすがりが言ってた考え方として頭の端にでも置いてください。(ですのでもっと重要なことを覚える際には適当にガベージコレクションしてください)

画像のサイズに対してはemでサイズ指定することで可能と考えます。またそもそも文字化けする文字を避ける、どうしても使用しなければならないならばその文章全体を画像にするなど考えられます(文字化けすることが分かっている機種依存文字などを使用するのはそもそもユーザーのことを考えていないように思えますが)。
またCSSなどを使用を確定したうえでそれに合わせて画像を制作している前提と考えますがなぜ文字の太さなどが変わる可能性があるのか私にはわかりかねます。モックアップなどを作成して制作しているのではないのでしょうか？当然太さやフォントはCSSで定義しておくべきであり、各ブラウザで違うブラウザデフォルトのCSSで表示するようにはしないでしょう(何らかの初期化CSSを組み込むでしょうから)。もしユーザースタイルの差による表示の崩れなども考慮に入れているということであればCSSを無効化しているユーザーやJavaScriptを使用しないユーザーに対処する方法をどうするのでしょうか。現在の対処方法ではそれらユーザーでの表示は確実に崩れるわけです(特にCSS3を使用して作成した図形など)。この点画像であれば最低限の対応(望んでいる形状の表示。レイアウトが崩れる可能性はあり得るが文章全体が画像であればそれもない。画像が非表示である可能性を想定しalt属性を設定)ができるものと考えます。勿論画像を表示できない、しないブラウザも存在するため全てにおいて完璧とは言えないと思えますが。
どうも質問への回答にこだわるあまりにサイト制作での基本的な前提の順序、優先順位を誤っているように思えます。前述の通り、学習目的での知識集めや検証の一環であればそれはいいことだと思いますが、実運用するつもりであればあまりにもトリッキーな方向での対処を考えすぎではないですかね。余談として(これ自体が余談という事実は忘れておいて)CSS3の機能をIEのレガシーブラウザで動かすライブラリなどがありますが使用すべきでないと考えるWebデザイナーも一定数います。その理由として挙げているのがある程度動作が重くなることや特定のブラウザでの致命的な動作不良です。見た目のために操作性や機能性を損なうのは本末転倒だという主張ですね。今回の場合、その文字化けするものがどうしても必要であるかという点が重要でしょう。どうしても必要なのであれば目的を最低限達成できる堅実な手法を選択するというのが(この言い方は好みませんが)一般的ではないでしょうか。
ここまでを読み返すと非常に残念な悪文。三行程度でまとめられず思ったまま打ってしまった。申し訳ない。

[sounisi5011]

「文字化け」という表現を用いてしまったのが間違いでした。

そのコードは文字のUnicodeの値が返されるだけです。
私の質問は、「表示できるか」の判定なので、このコードでは動作しません。
表示されるかの判定には、該当の文字がUnicodeとして正しい文字であるかの判定の他に、端末やブラウザのフォントが該当の文字に対応しているか判定する必要があります。

U+FFFDはあくまで表示できない文字の「置き換え表示」のために定義されているので、ブラウザが表示できない文字をU+FFFDに置換してくれるわけではありません。
もしそうであれば、判定は非常に楽なのですが…

----

以下、個人的意見についての反論です。
返答は不要との事ですが、質問閲覧者と私の自己満足のため反論させていただきます。

> 文字化けしたかどうかは判定できそうですが仮に判定できたとしても文字化けする文字ごとに判定が必要になるのではないでしょうか？環境を見ずに文字化けしたかどうかを確認して対応するのは膨大な種類がありどちらにせよ現実的でないように思えますが……。

現実的ではないために、私の知識の範囲では解決できませんでした。
そこで、何か他に方法がないか質問している次第です。

> 画像のサイズに対してはemでサイズ指定することで可能と考えます。

文字のサイズは、em以外にも`line-height`プロパティによる行の高さや`font-variant`プロパティによるスモールキャップなど様々です。
画像サイズの決定は非常に難しいものとなるでしょう。

また以下で述べますが、画像を避けるための方法を求め質問していますので、本末転倒です。

> 画像のサイズに対してはemでサイズ指定することで可能と考えます。またそもそも文字化けする文字を避ける、どうしても使用しなければならないならばその文章全体を画像にするなど考えられます(文字化けすることが分かっている機種依存文字などを使用するのはそもそもユーザーのことを考えていないように思えますが)。
> またCSSなどを使用を確定したうえでそれに合わせて画像を制作している前提と考えますがなぜ文字の太さなどが変わる可能性があるのか私にはわかりかねます。モックアップなどを作成して制作しているのではないのでしょうか？

この意見は、質問本文にない情報を推測し、それを前提としている点で誤りです。
文章そのものは、製作者が作成するとは限りません。例えば、掲示板やチャットなどが挙げられます。機種依存文字を利用するユーザもいるでしょう。
またCSSも、ユーザーテンプレートの導入やインラインCSSを許容する場合が存在します。

また、質問本文にない情報を出して話を進めますが、
この質問は、容量が大きく通信不可もかかる画像を極力避けるための方法として考えたものです。
文字が表示できるなら、画像を避けるためです。

> もしユーザースタイルの差による表示の崩れなども考慮に入れているということであればCSSを無効化しているユーザーやJavaScriptを使用しないユーザーに対処する方法をどうするのでしょうか。現在の対処方法ではそれらユーザーでの表示は確実に崩れるわけです(特にCSS3を使用して作成した図形など)。この点画像であれば最低限の対応(望んでいる形状の表示。レイアウトが崩れる可能性はあり得るが文章全体が画像であればそれもない。画像が非表示である可能性を想定しalt属性を設定)ができるものと考えます。

しかし、文字が表示できるならばその画像読み込みは無駄になります。
そこで、文字が表示できるか判定したいと考えました。
表示できる場合は、画像を読み込まない、などの工夫が出来るかもしれません。
勿論、文字が表示できないならば画像となりますが。

> どうも質問への回答にこだわるあまりにサイト制作での基本的な前提の順序、優先順位を誤っているように思えます。前述の通り、学習目的での知識集めや検証の一環であればそれはいいことだと思いますが、実運用するつもりであればあまりにもトリッキーな方向での対処を考えすぎではないですかね。

前述したように、ユーザが文章を入力する場合などでその「順序」は崩れてしまいます。
トリッキーな方法であるとは理解していますので、この質問に対して回答がついた場合、その方法を採用するべきか再考することになると考えています。

> CSS3の機能をIEのレガシーブラウザで動かすライブラリなどがありますが使用すべきでないと考えるWebデザイナーも一定数います。その理由として挙げているのがある程度動作が重くなることや特定のブラウザでの致命的な動作不良です。見た目のために操作性や機能性を損なうのは本末転倒だという主張ですね。

それについては私も同じ意見ですが、見た目が優先されなくてはならない場合も存在します。
またそれらの主張は、サイトのデザインに対するものです。
本質問は、「サイトのデザイン」ではなく「文章中の文字」を対象としている点で違いがあり、見た目の優先度がサイトのデザイン以上に重要である点を考慮しなくてはなりません。

> 今回の場合、その文字化けするものがどうしても必要であるかという点が重要でしょう。

それについては案件により変わるため、ここでは扱いません。
ここで扱っているのは、必要性の有無以前の、方法が存在するかどうかについてです。

> どうしても必要なのであれば目的を最低限達成できる堅実な手法を選択するというのが(この言い方は好みませんが)一般的ではないでしょうか。

回答の方法によります。

[Cf_cwd]

返答に関しては特に反論いたしません。対応対象に様々な可能性が考えられ、不確定な要素が多すぎること。当方の知識不足などによりあまり良い問答になると思えないため。ですが興味深い話題ですのでより専門的知識を持つ方に回答してもらえるとうれしい限りですね。

一応通信の部分に関してだけ。画像をbase64エンコードして埋め込むことでHTTPリクエストを減らすことができるでしょう。……ですがこの方法もブラウザ対応の面(IEなど)で問題もありますし、今回は選択肢から外れるでしょうね。

ブラウザ間の差異がもう少し縮まればいろいろな面でもっと柔軟に制作できそうなのですがね……。
Windows10が出る頃には足並みがある程度揃うことを祈るばかりです。
(モバイル端末は今よりもっと混沌としていそうですが)

Answer 2

その環境で表示可能かどうかを試すより、どの環境かをチェックして表示を切り替えることになるかと。
ブラウザの種別をチェックするなら、JavaScriptでUserAgentを見るのが一般的です。
こちらが参考になると思いますが、情報が古いかもしれません。

Comments

[sounisi5011]

昨今、様々な種類の端末が開発され、ブラウザの種別も増え続けています。それら全てを把握し、ブラウザの種類で機能を判定する方法は現実的では無いと考えます。
そこで、ブラウザの種類より、目的の機能が利用できるかどうかで判定するべきというのが現在の主流だったと記憶しています。
Modernizrは、まさにその思想で構築されたライブラリでしょう。

今回の質問で対応する文字は、`►`だけとは限りません。
そのため、ブラウザの種類で判定することは出来ません。