MovableTypeが自動的に入れる改行<br />の仕様を解読して,思い通りに改行を入れる方法を検討する.

MovableTypeが自動的に入れる改行

カモランドでは,不定期日記にMovable Typeを使っているのだが,最近少し凝ったことをやりたくなった.

具体的には,ソースコードを含めるときに<pre>タグを使って,カモランドと同じデザインが適用されるようにしたい.

しかし試しに<pre>タグを使ってみると,勝手にMovableTypeに改行を入れられて異様に間延びしたHTMLになる場合があり,どうも俺の思い通りになってくれない.

そこで,MovableTypeが改行を入れるロジックを調べることにした.(Movable Type 2.661)

ロジックは,lib/MT/Util.pmにあるhtml_text_transform()関数に記述されていた.これを調べてみると,以下のような結果が得られた.

改行の仕様

前提

空行で区切られた単位を,1つの段落として考える.例えば,
おはよう →段落1になる
こんにちは →段落1になる
 
こんばんは →段落2になる
というイメージ.

動作1

段落の内容が,
<(?:table|ol|ul|pre|select|form|blockquote|div|q)
で始まらない場合は,その段落内にある改行を<br />に変換し,段落全体を<p></p>で囲って出力する

動作2

そうではなく,段落が上記のタグで始まる場合は,<br />変換も<p></p>囲みも行わずにその段落をそのまま出力する

考察

つまり,<pre>タグを使って改行を入れられたくない場合は,
  • <pre>の開始前に空行を1行挿入する (<pre>の行以降を,<pre>で始まる新しい段落として認識させるため)
  • <pre>から</pre>の範囲内には,空行を入れない (<pre>〜</pre>の範囲全体を1つの段落として認識させるため)

というルールを守れば,<pre>〜</pre>の範囲全体が動作2で扱われて,<br />の自動挿入を抑制できる.

ケーススタディ

(A) <pre>を単独で使う場合

記述法
  1. <pre>の前に空行を1行挿入する
  2. </pre>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
 
<pre>
1行目
2行目
</pre>
です

HTML出力

<p>こんにちは</p>
 
<pre>
1行目
2行目
</pre>
です
→各行にbrが付かないのでOK

(B) <pre>〜</pre>内に空行を含む場合

記述法
  1. <pre></pre>の前後は(A)と同じ
  2. ただし空行を入れると,<pre>内であってもそこで段落が切れてしまうため,空行を入れてはいけない.例えば空行にしたい行には,半角スペース1個を入力する

入力例

こんにちは
 
<pre>
1行目
   ←半角スペース1個
2行目
</pre>
です

HTML出力

<p>こんにちは</p>
 
<pre>
1行目
 
2行目
</pre>
です

→各行にbrが付かないのでOK

(C) <pre>を<div>の内側で使う場合

記述法
  1. <div>の前に空行を1行挿入する
  2. </div>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
 
<div>
<pre>
1行目
2行目
</pre>
</div>
です

HTML出力

<p>こんにちは</p>
 
<div>
<pre>
1行目
2行目
</pre>
</div>
です
→各行にbrが付かないのでOK

(D) <blockquote>を<br />変換付きで使いたい場合

記述法
  1. <blockquote>の前に空行を挿入しない
  2. </blockquote>の後に空行を挿入するかどうかは任意(見栄えで判断)

入力例

こんにちは
<blockquote>
1行目
2行目
</blockquote>
です

HTML出力

<p>こんにちは<br />
<blockquote><br />
1行目<br />
2行目<br />
</blockquote><br />
です<br />
</p>
→各行にbrが付くのはOKだが,<blockquote>の直後と</blockquote>の直後に,無用な<br />が入るのがいまいち orz
kamolandをフォローしましょう


© 2017 KMIソフトウェア