none
上付き文字で常に数字4の右側だけ余計な空白が開いて見える RRS feed

  • 質問

  • HTMLのtextareaとinputのテキスト入力フォームへ、全角の上付き文字を入力して表示させたいのですが
    IEで特定の上付き文字(数字の4)の右側に余計な空白が空いてしまい困っています。

    現象を確認した環境: IE8、IE10
    firefox,Operaなど他のブラウザでは発生せず。メモ帳などで見てもおかしくはありません。

    (例) X¹²³⁴⁵⁶⁷⁸⁹

    少し位の乱れなら許容しますが、これはとても連続した数値に見えません。

    2012年12月22日 15:37

すべての返信

  • 以下のコードで試して見ました。

    フォントの問題(IE のみ SUPERSCRIPT FOUR (U+2074) は特別?)なのですが、Meiryo など普通のテキストでは等間隔になるフォントを探しても、input や textarea に配置すると、IE7-9 の場合 4 のみ別のフォントになってしまいます。(IE10 は持っていないので未検証)

    1, 2, 3 とそれ以外では属するカテゴリーが違うので(1, 2, 3 は「ラテン 1 補助」、他は「上付き/下付きの文字」・・・IME パッド - 文字一覧で見ると分かります)、フォントが違うのはやむを得ないと思いますが、何故か 4 は ie では特別扱いされているようで他とは違います。

    そうなる理由を調べてみましたが探しきれませんでした。という訳で自分には解決策は分かりません。どなたか調べていただけるとうれしいです。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Unicode Superscripts</title>
        <style type="text/css">
          .style1 { font-family: 'Segoe UI Semibold'; width: 200px; }
          .style2 { font-family: Meiryo; width: 200px; }
          .style3 { font-family: 'MS ゴシック'; width: 200px; }
      </style>
    </head>
    <body>
        <h2>Unicode Superscripts</h2>
        <p style="font-family: Arial">Arial: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: 'Segoe UI Semibold'">Segoe UI Semibold: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: 'Lucida Grande'">Lucida Grande: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: Verdana">Verdana: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: sans-serif">sans-serif: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: Georgia">Georgia: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: Meiryo">Meiryo: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: 'MS ゴシック'">MS ゴシック: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: 'MS Pゴシック'">MS Pゴシック: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
        <p style="font-family: 'MS UI Gothic'">MS UI Gothic: X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</p>
    
        <input type="text" class="style1" value="Segoe UI Semibold X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;" />
        <br />
        <input type="text" class="style2" value="Meiryo X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;" />
        <br />
        <input type="text" class="style3" value="MS ゴシック X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;" />
        <br />
        <textarea class="style2" cols="50" rows="5">Meiryo X&#x2070;&#x00b9;&#x00b2;&#x00b3;&#x2074;&#x2075;&#x2076;&#x2077;&#x2078;&#x2079;</textarea><br />
        
        <p>&lt;sup&gt; を使用: X<sup>1234567890</sup></p>
    </body>
    </html>
    

    2012年12月23日 5:16
  • IE10 でも再現しますね。

    IE9 にせよ IE10 にせよ、フォームでなければ Meiryo のように正常に表示できるフォントもあり (ちなみに IE10 だと Arial、Segoe UI SemiboldVerdana、sans-serif、Georgia もフォーム外なら正常) 、明らかに変な挙動ですね。

    たぶんバグでしょう。クリティカルな問題であればサポート (http://www.microsoft.com/ja-jp/services/support.aspx) に調査を依頼してください。


    hebikuzure


    2012年12月23日 14:13
    モデレータ