ブログトップ 記事一覧 ログイン 無料ブログ開設

DO☆KA☆TA ~information technology~ このページをアンテナに追加 RSSフィード Twitter

2009-11-18

問題が発生。それはノーブレークスペース( )と半角スペース文字の差

| 問題が発生。それはノーブレークスペース( )と半角スペース文字の差を含むブックマーク 問題が発生。それはノーブレークスペース( )と半角スペース文字の差のブックマークコメント

長年Webアプリに携わっている人なら知ってる人の方が多いかもしれませんが、結構ありがちかもということで記しておきます。

数年前に作られたあるWebシステムの保守をしているのですが、こんな問題が発生しました。

ある画面に表示している項目をコピーして、ある検索画面の入力項目にペーストしたところ検索ヒットしない。

なんとかしてと依頼が来たので調べてみると、その問題の項目は半角文字が2つ以上連続しているデータでした。

こんなデータでした。

test  Data1

testとData1の間には半角スペースが二つ入っています。

ブラウザレンダリングは連続した半角スペースを一つに集約してしまう

RDBのテーブルに設定されている値が"test  Data1"で、そのままブラウザから見ると"test Data1"と詰まって表示されていました。半角スペース文字が2つ以上連続している値をブラウザ*1で見ると、半角スペース1個に集約するみたいです。

このことは、W3Cで以下のように定義されていました。

W3C勧告私的日本語訳 9.1空白類

ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。

ということで半角スペース数分を文字実体参照の に置き換えると、正しく半角スペース数分がブラウザ上で表示できました。

確認用HTML

<html>
<head> 
<title>test</title>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th>case</th>
      <th>空白sp</th>
      <th>&amp;nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>半角sp数1</td>
      <td>aa bb</td>
      <td>aa&nbsp;bb</td>
    </tr>
    <tr>
      <td>半角sp数2</td>
      <td>aa  bb</td>
      <td>aa&nbsp;&nbsp;bb</td>
    </tr>
    <tr>
      <td>半角sp数3</td>
      <td>aa   bb</td>
      <td>aa&nbsp;&nbsp;&nbsp;bb</td>
    </tr>
  </tbody>
</table>
</body>
</html>

&nbsp;に置き換えたとしても場合によっては課題は残ります

上記により半角スペース数分のレンダリングができても、&nbsp;は自動改行しないので改行が必要になる場合は自力でやらないといけないのが難点です。

自動改行しない様子はこちらが参考になります。&nbsp;と普通の半角スペースの違い - うなの日記

最後に

システム利用者が、表示している項目をコピペして検索するという行動を念頭に入れて開発しないといけませんね。

自分が引き起こした問題ではありませんでしたが、自分が開発初期から考慮できるかというと微妙です><

トラックバック - http://d.hatena.ne.jp/ujiujise/20091118/p1