freefielder.jp

…というわけで、テキスト回り込みをサポートしてみました。

　　→ ダウンロード h2v.js ver 3.1.0（http://tategaki.info/）

こんな感じでレイアウトします。

画像に対するテキスト回り込みです。
画像にfloat:left;を指定しています。縦書きの時には、文章は画像の下側に表示されます。
いかがでしょうか。
これで、レイアウトデザインの幅が大きく広がりますね！

そしてこちらは、画像にfloat:right;を指定しました。
文章は画像の上に表示されます。

縦書きレイアウト上の制約なのですが、
例えば…
このように、floatさせた画像が段組のお尻に引っかかる場合には、その画像をぶった切って、残りを次の段に送ります。

　画像を切らないで、段からはみ出すときには画像ごと次の段に送るという処理も考えたのだけれど、とりあえず、これはこれでご了承ください。
　floatさせない画像は「はみ出すときには次の段に送る」という処理をしているので、処理に統一感がないのが気にかかります。

★ver 3.1.0 での注意事項・制限事項

• テキスト回り込みは、画像（IMG要素）に対してのみ有効です。IMG要素に float:left; または float:right; プロパティを指定してください。
  
  <style>
  .floatL{ float:left; }
  </style>
  
  <!-- 以下のコードは、縦書き時にもテキストが回り込みます。 -->
  <img src="xxx.jpg" class="floatL" />このテキストが回りこむ。
  
  <!-- 以下のコードは、縦書き時には回り込みません。 -->
  <div class="floatL"><img src="xxx.jpg" /></div>このテキストが回りこむ。
  
  
• floatを指定したIMG要素は、回り込ませたいテキストの先頭に置くことが必要です。
  例えば、以下のHTMLコード
  あいうえお。<img src="xxx.jpg" style="float:left;" />かきくけこ。
  と、
  <img src="xxx.jpg" style="float:left;" />あいうえお。かきくけこ。
  とは、横書きの時には同じように描画（文字列が画像の右側に表示）されますが、縦書き時に適切に回り込み表示させるためには、二番目の例のように記述してください。最初の書き方だと、IMGの前にある文字列が適切に処理されず、レイアウトがおかしなことになってしまいます。

そんなわけで、まだ改良の余地は残っていますが、取り敢えず。

以前のバージョンを使用している人は、新バージョンのh2v-min.jsとh2v.cssを古いものと入れ替えるだけで大丈夫です。これまでに作成したドキュメントに変更を加える必要はありません。

ただし、過去に作成したドキュメント内に float を指定したIMG要素が存在する場合には、HTMLの改変が必要になるかもしれません。

　・h2v.js : Webページを縦書きレイアウトに変換するJavaScript