blue

MTで書く記事に「ins」タグを使うときは

  • Posted by: SOMA Hitoshi
  • June 20, 2009 3:49 AM
  • mt | web

 Movable Type で書く記事に「ins」タグを使うときは「 (フォーマット: ) なし」で書かないとね、という話。「ins」タグというのは、囲んだ箇所が「あとから追加されたもの」であることを示すためのもの。「Insert」ってことですね。「datetime」属性で追加した時刻を添えたりして、

  1.  <ins datetime="2009-06-19T21:33:00+09:00"><p>追加された内容</p></ins>

といったふうに用います。
 ブロック要素を囲んでもインライン要素を囲んでもどちらでもよくて、ブロック要素を囲んだ場合には自身もブロック要素として、インライン要素を囲んだ場合には自身もインライン要素として扱われるという特殊なタグです。同様の扱いのものに「del」があり、こちらは「あとから削除されたもの」を示します。

 さて、うちではこの「ins」タグにたいして、

  1.  ins {
  2.      display: block;
  3.      margin: 1em 0;
  4.      padding: 10px 16px 0;
  5.      border: 1px solid #a4a4a4;
  6.      border-top: 3px double #a4a4a4;
  7.      text-decoration: none;
  8.      }
  9.  ins[datetime]:before {
  10.      content: " ( "attr(datetime)" \8ffd \8a18  ) ";
  11.      display: block;
  12.      margin: 0 -6px 8px;
  13.      padding: 1px 4px;
  14.      background: #EBEBEB;
  15.      font-size: 93%;
  16.      color: #333;
  17.      }

というCSSをあてて、

追加された内容

と表示されるようにしているのですが、そのつもりが、Safari4 や Google Chrome で見たときに一部の記事でこのように表示されていることに気づきました。

崩れた表示結果

 Firefoxではこうならず、同じものが意図どおり表示されます。CSS解釈のちがいによるのかと思ってあれこれ試したのですが、WebKit系ブラウザでの表示結果はさっぱり変わらず、うーんと唸っているうちにやっと、根本的なことに気づきました。
 てっきり、

  1.  <ins datetime="2009-06-19T21:33:00+09:00"><p>追加された内容</p></ins>

というHTMLについて悩んでいるのであり、HTML側に文法的な不備はないとばかり思っていたのですが、じつはそうでなく、崩れていたのは

  1.  <p><ins datetime="2009-06-19T21:33:00+09:00"><p>追加された内容</p></ins></p>

というHTMLなのでした。なるほど、これじゃあ Safari のようなレンダリング結果もなんとなく腑に落ちます。Movable Type の「 (フォーマット: ) 改行を変換」の自動処理ルールは、どうやら「ins」をインライン要素と見なすようで、前後を囲む「p」タグが追加されてしまうというわけです。というわけで、冒頭の結論に至るのでした。

「削除された部分 (= del要素) に言及できるのか」

 さて、ここからはまたべつの話ですが、上記の件で「うーん」となり、頭を抱えてネットを見て回ったなかに「ほう」と思わされる指摘がありましたのでついでに。「RedLine Magazine : ここがHTML5なのだ!な点。」というブログ記事ですが、記事そのものではなく、そこに寄せられたコメントにある、記事の本筋からは離れたところの指摘です。
 そのコメント欄で、「ins」と「del」をめぐる記事中のブログ主のマークアップ法に「違和感を覚え」た「シマダ」さんは、つぎのように指摘します。

私の考える問題は、 del要素やins要素をどう括るのかではなくて、 単に「削除された部分 (= del要素) に言及できるのか」ということなんです。
例えば、
XはAである。<del>そしてYはBである。</del> <ins>これは間違っていた。</ins>
というマーク付けをされた文書片があるとします。
この場合、「これは間違っていた。」の「これ」が指すのは何でしょう。
「そしてYはBである。」でしょうか。それとも「XはAである。」でしょうか。

...[中略]...

HTML 4の仕様書に
> User agents should render inserted and deleted text in ways that make the change obvious.
> For instance, inserted text may appear in a special font, deleted text may not be shown at all
> or be shown as struck-through or with special markings, etc.
と書いてありますから、del要素が表示されない場合も考えなければならないと思います。

 いやあ、ごめんなさいね、この手の話がきらいではないHTMLコーダーなものでしてね。単純に、なるほどと膝を打ちましたよ。

関連記事

トラックバック(0)

トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/617

 

広告