機種依存文字、m2（平方メートル）の表現に関して。

質問

音声ブラウザ上における、m2（平方メートル）の表現で悩んでいます。

現在は以下のように表現しています。
100<span title="平方メートル">m&sup2;</span>

この表現で、Opera,Firefoxなどは問題ないのですが、
音声ブラウザではユーザー側がキー操作しなければ再生されないそうです。

今のところ<ruby>や<sup>など、何案かやってみて上記が自分にとってはベストなのですが、
もっと良い表現の仕方をご存知の方はいらっしゃいますでしょうか？

どなたかご存知でしたらご教示ねがいます。

回答No.1

dezimac · ベストアンサー

画像にしてしまってはどうでしょう。
100<img src="m2.gif" alt="平方メートル" width="16" height="16">

文字サイズを変更された場合に、上手く対応しきれないという欠点もありますが。

一応、以下のようなスタイルシート使えば、文字サイズに合わせる事も出来なくはないです。
適正サイズ以外じゃ、汚くなるけど…。
100<img src="m2.gif" alt="平方メートル" class="text">

img.text{
height: 1em;
width: 1em;
vertical-align: text-bottom;
}

参考URL：

http://jp.fujitsu.com/webaccessibility/v2/61.html

お礼

回答ありがとうございます。

表現の方法もスマートですし、何より視覚・音声ブラウザの両方で
確認がとりやすいことから、今回はこの方法を取らせて頂きます。
適正サイズ以外で文字が汚くなってしまいますが、
元サイズを工夫して誤認しないように気をつけたいと思います。

参考URLも非常に役立ちました。
（今までチェックツールにサイトをかけるだけで、
指針に目を通していませんでしたf(^-^;）

回答No.4

神崎 渉瑠（@taloo）

rt{display:none}すると、MacIEで<rt>以降の文字のほとんどが消えてしまうという謎な状況になりました。
rt{display:none}はやめた方が良さそうです。

そもそも論を言えば、HTML4/XHTML1.0や音声ブラウザでルビ（ふりがなや中国語のピンイン）に対応してないのが問題かと。

<sup>にて。

@media aural{
rb{
volume:silent;
speak:none;
}
}
@media screen{
rt:before{
content:'(';
}
rt:after{
content:')';
}
}

100 <ruby><rb>m²</rb> <rt>平方メートル</rt></ruby>
スタイルシート未対応：「ひゃくえむにへいほうめーとる」
スタイルシート対応（または<ruby>対応）：「ひゃくへいほうめーとる」

身も蓋もない書き方で、最も確実な書き方で、たぶん最もよく使われる書き方、、、かな。
<p>100平方メートル</p>

どこかに無理が出てきますので、メリットとデメリットを天秤に掛けざるを得ないと思います。
ご参考まで。

お礼

回答ありがとうございます。

Mac版IEの詳細な検討結果まで記述いただいて、非常に役立ちました。
身も蓋もない書き方…はわたしも確実性があるので依頼者に確認を取りましたが、
視覚者からすれば逆にややこしいとの指摘を受けてしまいました。

平方メートルに関しては確かに取捨選択をしなければならないようです。
今回はANo,1さんからも回答いただいた通り、画像での対応にしたいと思います。

回答No.3

神崎 渉瑠（@taloo）

画像のalt属性が一番良いんじゃないでしょうか。

本来はrubyを使うべき所でしょうけど、問題は、対応しているブラウザがどれほどあるのか、、、

逆に、対応していないことを利用して、

未対応グラフィカルブラウザ用CSS
rt{display:none;}
または
rt:before{content:'(';}
rt:after{content:')';}

100<ruby><rb>[m2]</rb><rt>平方メートル</rt></ruby>

[m2]の所に機種依存文字を使って、音声ブラウザで表示されていなければ、「ひゃくへいほうめーとる」と読み上げられます。
機種依存文字が表示されていると「ひゃくへいほうめーとるへいほうめーとる」となります。

スタイルシートを使わずに
100<ruby><rb>[m2]</rb><rp>(</rp><rt>平方メートル</rt><rp>)</rp></ruby>
という書き方も出来ますが、音声ブラウザで「かっこ」が読まれるので、W3Cに書かれているサンプルのように、:before、:afterを使うのが良いかと。

Web標準やXHTML準拠（HTMLチェッカーでの文法エラー）を考えられるなら、
あまりおすすめしませんが、XHTML1.1を使えば <ruby>も定義されていますので、文法違反になりにくいです。
http://www.w3.org/TR/2001/REC-ruby-20010531/#ruby
（おすすめは、文法チェッカーのエラーメッセージを無視して、HTML4.01かXHTML1.0を使う）

機種依存文字を数値参照しても機種依存文字であることには変わりません。
Windowsしか使えないwindows-31jではなおさら依存しますしね。

> 100<span title="平方メートル">m&sup2;</span>
実体参照に対応していれば、&sup2;を「にじょう」と読んでくれるかもしれませんが、
対応していなければ「ひゃくえむ（&sup2;は読まない）」
または「ひゃくえむあんぱさんどえすゆーぴーにせみころん」と読まれます。
100を「いちぜろぜろ」と読むブラウザもあると思いますが、これはどうしようもないです(^^;
title属性は読まないブラウザの方が多いんじゃないでしょうか。

> 音声ブラウザではユーザー側がキー操作しなければ再生されないそうです。
１行ずつ読み上げた方が、聞き漏れ、読み直しなどに対応しやすいからです。
これについてはあまり気にしなくて良いと思います。

ご参考まで。

お礼

回答ありがとうございます。
No,4にお礼を付けさせていただきました。

回答No.2

Yune-Kichi

素直にU+33A1 SQUARE M SQUAREDを使ってはいけないのですか？
http://www.fileformat.info/info/unicode/char/33a1/index.htm

質問における記述がU+33A1の分解変換に一致するため意味合いは変わらないのですが，JIS X 0201/0208に含まれない文字ではあるもののWindows-31jに含まれる文字であるため，読み上げを期待出来るかもしれません。

お礼

回答ありがとうございます。

こちらの文字コードについては全く知りませんでした。
読み上げが期待できそうなのですが、Mac版IEなどでいくつか問題が上がっているようなので、
今回での使用はやめておきます。
後日何通りかチェックなどして、検証してみたいと思います。

ありがとうございました。