韮つぼみ
天婦羅か炒め物にと少し分けていただいたニラのつぼみ。
やはり花言葉があって「多幸」

オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、direction
書式でなく、単にposition 書式と 右フロートでそれぞれ位置指定することにして、縦組非対応のブラウザーで横組になっても不自然でない位置に調整。
<section class="sekki"> <h3>韮つぼみ</h3> <p>天婦羅か炒め物にと少し分けていただいたニラのつぼみ。 <br />やはり花言葉があって「多幸」</p> <img src="/paramy/files/stanza/nira/nira201309.jpg" width="240" height="240" alt="韮つぼみ" /> </section> /* CSS */ section.sekki { position:relative; } section.sekki img { float:left; } section.sekki h3, section.sekki p { unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } section.sekki h3 { position:absolute; top:20px; right:16px; } section.sekki p { width:140px; /*横組になった時の幅*/ height:280px; float:right; margin:36px 36px 0 0; /*見出しが横組になっても重ならない位置 */ }
09 Sep 2013