nlog(n)

<pre>...</pre> に囲まれたスペースや改行はそのまま出力される。これはソースコードなどを表示する時に便利に使える。しかし、自動改行されなくなってしまうため、ブラウザの表示幅を狭くすると右側にはみ出てしまう。何とか自動改行するようにできないか考える。

通常のブロック要素内容文字列では、改行、空白、タブという空白文字が連続した場合、半角スペース1つに置換される。また、行頭の空白文字は無視される。<pre>...</pre> で囲む pre 要素は、整形済みテキスト(preformatted text)として解釈され、空白文字は置換されずにそのまま出力される。これはソースコードを表示するのに適している。インデントがそのまま反映されるからである。しかし、これを使うことによる欠点もある。ブラウザが自動的に改行してくれなくなってしまうのである。そのため、1行が長いと右側にはみ出てしまう。はみ出すのを防ぐのに横スクロールバーを出すという実装もあるが、気が進まない。

この pre 要素を何とか自動改行できないかを考える。しかし、自動改行しないのは HTML の仕様であるから、無理な話ではある。そこで、「もともと何がしたかったのか」に立ち戻って考えてみると、次のような要件であることに気がついた。

• 連続したスペースを、その個数のまま表示させたい

そこで、pre 要素に固執することはやめて、単純なブロック要素で考えることにする。普通のブロック要素であれば自動改行されるからである。

スペースを表示するには、空白文字「 」の他に「&nbsp;」という文字参照が使える。しかし、「&nbsp;」を連続させると、1つの長い文字列として認識されてしまうため自動改行されないのである。

散々考えた揚句、最終的にたどり着いたアイデアは、『「 」と「&nbsp;」を交互に使う』であった。まず、「<pre>」と「</pre>」を「<div>」と「</div>」に置き換え、その内側では次のような表現とする。空白文字である「タブ」は使用しない方がよいとされているので(Another HTML-lint : Explanation: Tab in Pre)、ついでにスペースに変換してしまうことにする。

1. タブは適当な数のスペースに置換する
2. スペースが2つ連続する場合は、1つのスペース「 」と1つの文字実体参照「&nbsp;」に置換する
3. 連続しないスペースはそのままにして、置換は行わない
4. 行頭のスペースは、文字実体参照「&nbsp;」に置換する

これは HTML での一般的な書式として有効。あまり見かけないが、予想以上に上手くいく。MovableType なら、プラグインを組み込んでサイト全体を再構築すればよい。

2005年10月30日追記:
プラグインで実装し (nlog(n): PRE 要素変換プラグイン 0.9)，解説を書きました (nlog(n): PRE 要素変換プラグイン 0.9 解説)。

• Tweet