Stanza Top＞
白露 ＞ 韮蕾（にらのつぼみ）

韮つぼみ

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

韮つぼみ

オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、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; /*見出しが横組になっても重ならない位置 */
}
縦書きSafari

Safari_6での表示

縦書きFirefox

Firefox_24での表示

縦書きInternetExplore_10

InternetExplore_10での表示

縦書きOpera_16

Opera_16での表示

09 Sep 2013