『社会運動の戸惑い』正誤表で使った、気づいて欲しいHTML+CSSハック

　まずはこちらをご覧ください。
　http://www.webfemi.net/?page_id=1154#corrections
　本家ブログでも紹介している、山口智美・斉藤正美・荻上チキ著『社会運動の戸惑い』の正誤表なんだけれども、この p.xvii-xviii の部分に注目。

　ごく自然に見えるけれども、このように表示させるのは、実は結構難しい。というのも、普通にこのような表の中にURL（サイトのアドレス）を入れようとすると、すぐ以下のようになってしまうから。

　半角英数字では、単語と単語のあいだに空白があるのが普通であり、一行におさまらないような文を表示するときはその空白で改行されるようになっている。しかしこの例のように長いアドレスの場合は、改行を入れるための空白がどこにもないので、ブラウザは改行なしで無理やり表示しようとする結果、デザインが崩壊してしまう。
　でも、わたしが作った『社会運動の戸惑い』正誤表では、長いURLを適切な場所で改行することによって、デザインが崩壊しないようになっている。スタイルシートのCSS3において、改行ルールを指定するtext-wrapプロパティというのが規定されているので、将来的にはこうした表示は簡単にできるようになるはずなのだけれど、現時点ではメジャーなブラウザは一切このプロパティに対応していない。
　ではどのようにこのデザインを実現したか。ページのソースは、以下のようになっている。

<td>第五回検討会配付【資料２】「論点１ヌエックの創設の経緯と成果について（検討メモ）」 <span class="wraphack"> h t t p : / / w w w . m e x t . g o . j p / b _ m e n u / s h i n g i / c h o u s a / s h o u g a i / 0 2 6 / s h i r y o / a t t a c h / 1 3 2 3 2 8 6 . h t m </span></td>
<td>第五回検討会配付【資料２】「論点2日本の男女共同参画の現状と課題について（検討メモ）」 <span class="wraphack"> h t t p : / / w w w . m e x t . g o . j p / b _ m e n u / s h i n g i / c h o u s a / s h o u g a i / 0 2 6 / s h i r y o / a t t a c h / 1 3 2 3 2 9 1 . h t m </span></td>

　一見してわかるとおり、URLの部分は一文字ごとに空白を挟んでおり、その全体にwraphackというスタイルがかかっている。wraphackのスタイルは、次のように定義されている。

.wraphack {
word-spacing: -0.4em;
}

　CSSが分かる人には既に分かったと思うけれど、word-spacingは単語と単語のあいだの間隔を指定するプロパティ。これをマイナスの数値にすることによって、単語のあいだの間隔を詰めている。URLの部分は一文字ごとに空白になっているということは、一文字ごとに単語として処理されるわけだけれど、文字ごとの間隔を詰めてぴったりくっつけることで、空白が目に見えない（長いURLが適切に改行されている）ように工夫した。
　とはいえ、URLの部分をコピー＆ペーストしてみれば、一文字ごとに目に見えない空白が挟まれていることが分かるはず。はやくtext-wrapプロパティが実装されればいいのに。

# なお、この記事を書いたあとで、本サイトの正誤表のURLをリンクにしました。いまソースを見ると上記のHTMLとは違いますが、URLの表示方法は同じです。