ある文字が表示できるか判定したい
- 評価
- クリップ 2
- VIEW 1,877
►
などの文字が表示できず文字化けする事があります。
現在、横方向の矢印は
▼
などの文字を傾けることで対応しています。
<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や画像により三角形を表現することで問題を解決できますが、そのような方法ではなく、「文字が表示できるか判定する方法」に対する解答をお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
どうしても文字でやらなければならない理由があるのならば別ですが。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-1
ブラウザの種別をチェックするなら、JavaScriptでUserAgentを見るのが一般的です。
こちらが参考になると思いますが、情報が古いかもしれません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/02/07 14:50
決まった記号なども、画像が最適でしょう。
ただ、質問である「文字が表示できるか判定する方法」の解答とはなりません。
目的の文字が、画像で表現できない可能性も存在するかも知れません。
2015/02/08 16:12
どのように文字化けするのかなどもう少し詳細な情報があれば回答者が増えるのではないかと思います。またなるべく多くの情報を提示すべきでしょう。
(これは多くの質問者に言えることですが後出しで仕様を出す方が比較的多いですよね。►以外への対応も考えていることなどはあらかじめ明記しておくべきことでしょう)
以下読む必要はありませんが少し思ったことについて。
どうしても文字でやらなければならないのならば別であると私は書いてあるのですが文字でなければならない理由はどのような理由でしょうか?
目的の文字が画像で表現できない例というのが私には思い浮かびませんがどのような例でしょう?画面に出力する際、文字で表現可能(テキストの読み上げを行うブラウザなどでの利用となると話は別ですがそのことも含めて適切にalt属性を使用するでしょう)ならば画像でも基本的には同様に表現可能であると考えます。逆に画像でしか表せないというケースは十分あり得るでしょう。
私はそもそもの手法(方針)として誤っていると考えたためこのような回答をいたしました。特定のブラウザで表示が崩れるのを承知で使用するのならばそのブラウザを切り捨てるつもりで使用している、使用するものだと思います。それを回避できる恐らくベターな方法である画像の使用(CSS3での補完やcanvasでの判定などが特定のブラウザでさらにバグを生みそうに思えるのですがどうでしょうか)を選択しないのは一種のこだわりではないでしょうか。学習目的で作業している上で出てきた疑問の1つだと思うのですが……。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">や<meta charset="UTF-8"> などの文字コードの指定もしていますよね?この質問は聞く必要もないと思いますが念のため。またこれで回避できる問題ではないように思えます。(本体の文字コードが規格に沿っていないなどの原因があり得るため)
2015/02/08 20:22
その文字に対応しておらず、「表示できない」状態です。
その場合、代用表示としてU+FFFD(または、U+2BD1)の文字が表示されることになっています。
これは確か、Unicodeの仕様で決まっていたことと記憶しています。
> ►以外への対応も考えていることなどはあらかじめ明記しておくべきことでしょう
質問内容は「ある文字が表示できるか判定したい」です。
明記も何も、初めから文字を判定する方法について質問しています。
> どうしても文字でやらなければならないのならば別であると私は書いてあるのですが文字でなければならない理由はどのような理由でしょうか?
> 目的の文字が画像で表現できない例というのが私には思い浮かびませんがどのような例でしょう?
文章中の文字の場合、CSSにより文字色やフォント、文字の太さはいくらでも変わります。
それを画像で表現する事はできません。
2015/02/09 01:24
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デザイナーも一定数います。その理由として挙げているのがある程度動作が重くなることや特定のブラウザでの致命的な動作不良です。見た目のために操作性や機能性を損なうのは本末転倒だという主張ですね。今回の場合、その文字化けするものがどうしても必要であるかという点が重要でしょう。どうしても必要なのであれば目的を最低限達成できる堅実な手法を選択するというのが(この言い方は好みませんが)一般的ではないでしょうか。
ここまでを読み返すと非常に残念な悪文。三行程度でまとめられず思ったまま打ってしまった。申し訳ない。
2015/02/10 01:38
そのコードは文字のUnicodeの値が返されるだけです。
私の質問は、「表示できるか」の判定なので、このコードでは動作しません。
表示されるかの判定には、該当の文字がUnicodeとして正しい文字であるかの判定の他に、端末やブラウザのフォントが該当の文字に対応しているか判定する必要があります。
U+FFFDはあくまで表示できない文字の「置き換え表示」のために定義されているので、ブラウザが表示できない文字をU+FFFDに置換してくれるわけではありません。
もしそうであれば、判定は非常に楽なのですが…
----
以下、個人的意見についての反論です。
返答は不要との事ですが、質問閲覧者と私の自己満足のため反論させていただきます。
> 文字化けしたかどうかは判定できそうですが仮に判定できたとしても文字化けする文字ごとに判定が必要になるのではないでしょうか?環境を見ずに文字化けしたかどうかを確認して対応するのは膨大な種類がありどちらにせよ現実的でないように思えますが……。
現実的ではないために、私の知識の範囲では解決できませんでした。
そこで、何か他に方法がないか質問している次第です。
> 画像のサイズに対してはemでサイズ指定することで可能と考えます。
文字のサイズは、em以外にも`line-height`プロパティによる行の高さや`font-variant`プロパティによるスモールキャップなど様々です。
画像サイズの決定は非常に難しいものとなるでしょう。
また以下で述べますが、画像を避けるための方法を求め質問していますので、本末転倒です。
> 画像のサイズに対してはemでサイズ指定することで可能と考えます。またそもそも文字化けする文字を避ける、どうしても使用しなければならないならばその文章全体を画像にするなど考えられます(文字化けすることが分かっている機種依存文字などを使用するのはそもそもユーザーのことを考えていないように思えますが)。
> またCSSなどを使用を確定したうえでそれに合わせて画像を制作している前提と考えますがなぜ文字の太さなどが変わる可能性があるのか私にはわかりかねます。モックアップなどを作成して制作しているのではないのでしょうか?
この意見は、質問本文にない情報を推測し、それを前提としている点で誤りです。
文章そのものは、製作者が作成するとは限りません。例えば、掲示板やチャットなどが挙げられます。機種依存文字を利用するユーザもいるでしょう。
またCSSも、ユーザーテンプレートの導入やインラインCSSを許容する場合が存在します。
また、質問本文にない情報を出して話を進めますが、
この質問は、容量が大きく通信不可もかかる画像を極力避けるための方法として考えたものです。
文字が表示できるなら、画像を避けるためです。
> もしユーザースタイルの差による表示の崩れなども考慮に入れているということであればCSSを無効化しているユーザーやJavaScriptを使用しないユーザーに対処する方法をどうするのでしょうか。現在の対処方法ではそれらユーザーでの表示は確実に崩れるわけです(特にCSS3を使用して作成した図形など)。この点画像であれば最低限の対応(望んでいる形状の表示。レイアウトが崩れる可能性はあり得るが文章全体が画像であればそれもない。画像が非表示である可能性を想定しalt属性を設定)ができるものと考えます。
しかし、文字が表示できるならばその画像読み込みは無駄になります。
そこで、文字が表示できるか判定したいと考えました。
表示できる場合は、画像を読み込まない、などの工夫が出来るかもしれません。
勿論、文字が表示できないならば画像となりますが。
> どうも質問への回答にこだわるあまりにサイト制作での基本的な前提の順序、優先順位を誤っているように思えます。前述の通り、学習目的での知識集めや検証の一環であればそれはいいことだと思いますが、実運用するつもりであればあまりにもトリッキーな方向での対処を考えすぎではないですかね。
前述したように、ユーザが文章を入力する場合などでその「順序」は崩れてしまいます。
トリッキーな方法であるとは理解していますので、この質問に対して回答がついた場合、その方法を採用するべきか再考することになると考えています。
> CSS3の機能をIEのレガシーブラウザで動かすライブラリなどがありますが使用すべきでないと考えるWebデザイナーも一定数います。その理由として挙げているのがある程度動作が重くなることや特定のブラウザでの致命的な動作不良です。見た目のために操作性や機能性を損なうのは本末転倒だという主張ですね。
それについては私も同じ意見ですが、見た目が優先されなくてはならない場合も存在します。
またそれらの主張は、サイトのデザインに対するものです。
本質問は、「サイトのデザイン」ではなく「文章中の文字」を対象としている点で違いがあり、見た目の優先度がサイトのデザイン以上に重要である点を考慮しなくてはなりません。
> 今回の場合、その文字化けするものがどうしても必要であるかという点が重要でしょう。
それについては案件により変わるため、ここでは扱いません。
ここで扱っているのは、必要性の有無以前の、方法が存在するかどうかについてです。
> どうしても必要なのであれば目的を最低限達成できる堅実な手法を選択するというのが(この言い方は好みませんが)一般的ではないでしょうか。
回答の方法によります。
2015/02/10 02:05
一応通信の部分に関してだけ。画像をbase64エンコードして埋め込むことでHTTPリクエストを減らすことができるでしょう。……ですがこの方法もブラウザ対応の面(IEなど)で問題もありますし、今回は選択肢から外れるでしょうね。
ブラウザ間の差異がもう少し縮まればいろいろな面でもっと柔軟に制作できそうなのですがね……。
Windows10が出る頃には足並みがある程度揃うことを祈るばかりです。
(モバイル端末は今よりもっと混沌としていそうですが)