ウェブネタ

2013年

以前に「MTの「改行を変換」をHTML5に対応させる」という記事を書いたんですが、これは「改行を変換」フォーマットで書かれたウェブページやブログ記事から余計なp要素・br要素を削除するというアプローチを取っていました。

この方法では、pre要素などの「改行はするけどp要素・br要素を追加して欲しくない」場合にはスマートに対処出来ませんでした。

例えば、Google Maps などのスクリプトをscript要素で本文内に記述した場合、大量にp要素・br要素が追加されてしまい、正常に動作しません。

そこで、視点を変えて、「改行を変換」フォーマットを使用せず、p要素・br要素を自動挿入する方法を紹介します。

何気にずっと頭を悩ませてた問題。display: inline;display: inline-block; で要素をインライン化したときに、改行が半角スペースになり、隙間となる問題。あれがスッキリ解消できました。

HTMLでこんな感じ↓にしてる人は必見です。

<ul><li>list item</li><li>list item</li></ul>
  
<ul><li>
  list item
</li><li>
  list item
</li></ul>
  
<ul><!--
  --><li>list item</li><!--
  --><li>list item</li><!--
--></ul>