サイト構築において、常日頃から心がけていることがある。

それは、“vilidな(x)html、validなcssで書く”ということである。

このサイトのページ下部(フッター)の欄に“XHTMLValidation”と“CSS Validation”のリンクを配置しているのはそのためである。これらのリンクをクリックすると、このページの“html文書(または読み込まれるcssスタイルシート)”としての正当性(validation=妥当性検証、正当性評価)が確認できる(エラーが出た場合は、とりあえず笑ってコメントをください)。

W3C Markup Validation Service
http://validator.w3.org/check?uri=referer

W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/check/referer

しかし、このW3Cが提供するMarkup Validation Serviceはあくまでも“DTD(文書型定義)的に検証するだけ”にすぎない(間違っていたらごめんなさい)。

これに対し、DTD(文書型定義)的な検証にとどまらず、W3Cの策定しているHTMLの仕様書中やDTDのコメント中の、DTDでは表現できない多種多様な制約事項まで詳細にチェックしてくれるサービスがある。htmlを扱う人間ならば誰もが知っていると言っても過言ではないサービス、それが“Another HTML-lint gateway”である。

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

いやホント、コレすごいですよ。

html初心者のころ、これでhtmlを勉強したと言っていいぐらいお世話になりました。チェックしては怒られ、修正してチェックしてはまた怒られ…と、アクセシビリティへの配慮なども含めて“htmlの作法”をかなり厳格に教わりました。今でも愛用しています。ブログのサイドバーのリンク集に、ホラ。

で、ここから本題に入るわけなんですが(前置き長っ)、本日nucleus様のお力添えにより完成したこのブログの文章を、何気にAnother HTML-lint gateway様にチェックしてもらったんです。

、、、エラーのオンパレード。。。

なんじゃこりゃと思い、チェック内容を確認したところ、
<pre> 内にはタブ文字を書かないようにしましょう。
がこれでもかとズラズラズラと、、、

解説を読むと、以下のように書かれていました。

<PRE>~</PRE> 内にタブ文字を書くことは避けるように、HTML4.01(J)で強く要請されています。タブ文字は空白文字に置き換えられて表示されるのが普通ですが、モノによって期待通りの結果を得られないことがあるというのが理由です。つまり、<PRE> の整形済みという主旨に反するということです。

こんなことW3CのValidationじゃ絶っっっ対に教えてくれへんしな~。

と、いうワケで早速修正することにしました。

ナニを?

こないだカスタマイズしたボタンです。

といっても、メタ文字を実体参照に置換する関数に1行書き加えただけですが。

function changeEntity(strtxt) {
  strtxt = strtxt.replace(/&/g,'&amp;');
  strtxt = strtxt.replace(/"/g,"&quot;");
  strtxt = strtxt.replace(/'/g,"&#039;");
  strtxt = strtxt.replace(/</g,"&lt;");
  strtxt = strtxt.replace(/>/g,"&gt;");
  strtxt = strtxt.replace(/\t/g,"&nbsp;&nbsp;");
  return strtxt;
}

で、このときに&nbsp;&nbsp;がなんとかならんかな~と思って、調べてみました。すると、あるんだね、色んな空白文字の実体参照が。

以下、“色んな空白文字”です。
&nbsp; ⇒ 通常の“半角”と同じ量のスペース ⇒ | |
&ensp; ⇒ &nbsp;より少し広いスペース ⇒ | |
&emsp; ⇒ &nbsp;よりさらに広いスペース ⇒ | |
&thinsp; ⇒ &nbsp;より少し狭いスペース ⇒ | |

知りませんでした、こんなにあるなんて。&nbsp;しか使ったことがなかったです。ちなみに&nbsp;は“non-breaking space”だそうで、自動的な改行を防ぐ特殊なスペースです。(from WIKIPEDIA) ってことすら知らなかったorz

この中で、インデントを表現するには一番広い“&emsp;”だろうと思い、最初はこれに置換してみたんです。

いざ確認してみると、、、お~、広いスペースができちょるわい♪ IEは大丈夫、と。ほな、一応念の為ほかのブラウザでも確認してみるかいのう。

、、、?

、、、火狐め!!!

なんと、firefoxでは通常のスペース&nbsp;と同じ大きさでしか表示されないでやんのっ。

これはfirefoxの仕様なので、しょうがない。(洒落ではない。きっと。)

firefoxは諦めよう。

と思ったのだが。

&emsp;を含むソースをウェブ上からコピーして、テキストファイル(ボクが使ったのはTeraPadで開いたファイル)にペーストしてみると、&emsp;部分がすべて“?”に変換されている! いわゆる“文字化け”だ。もう、いい加減にして!!

さすがに、コードをコピペする度に余計な“?”をインデントに変えていくなんてありえへん。ボツ。

と、こんな紆余曲折を経て、結局&nbsp;の2回使いに落ち着いたのでした。

ちゃんちゃん。

じゃあ寝るちゃんちゃん。