pxgrid/codegrid-markdown

imgBox をセクショニング・コンテンツにしたい

Closed this issue · 3 comments

@geckotang @tacamy にもちょっとご意見をいただきたいのですが、

https://github.com/pxgrid/codegrid-markdown/blob/0a30f3c246902ff9234a9f020c78defe8c951d14/lib/renderer/cgmd/imgbox.js

現状、divで出力しているのですが、h1が入る都合で見出しのレベルが前後のコンテキストよりも上がってしまって、HTML的には、imgBoxをセクショニング・コンテンツにしてh1の影響範囲をそこに留めたいと思っています。

現状: 前後の文章の見出しレベルに問わず基本的にh1を使っている(編集のmd書くときに自由に買えられはするけどだいたい#見出しにしてる)

<div class="imgBox">
  <h1>見出し</h1>
  <img src="xxx.png">
</div>

なので、そもそも見出しはh1に固定してセクションに閉じ込めてしまいたい。画像の見出しとして。

案: 無難にセクション。でもセクションでいいのか?

<section class="imgBox">
  <h1>見出し</h1>
  <img src="xxx.png">
</section>

案: figure。でも<figcaption>にパースするのはつらそうなので、全部をfigureに突っ込んでしまうことになるけど、どうしよう。(FYI: figureはセクショニング・ルートなので、見出しの影響を外に出さない)

<figure class="imgBox">
  <h1>見出し</h1>
  <p>注釈テキストは本来figcaption要素が妥当だけど、とりあえず`p`としてここに出してしまう</p>
  <img src="xxx.png">
</figure>

理想形はやっぱりfigureとfigcaptionかなぁ

<figure class="imgBox">
  <h1>見出し</h1>
  <img src="xxx.png">
  <figcaption>注釈テキスト注釈テキスト注釈テキスト注釈テキスト...</figcaption>
</figure>

ですねー。とりあえずコンテナーをfigureで検討して見出しレベルだけでもなんとかしたいと思います。ありがとうございます

merged