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

関連記事

• 【縦書き】h2vR.jsの大幅な改修をしようと思います。
• 【続：縦書き h2vR.js】WordPress 5.x での表示不具合を解消する。
• 【縦書き h2vR.js】WordPress 5.x での表示不具合を解消する。
• 【縦書き h2vR.js】修正版です。
• 【縦書き h2vR.js】久々に少しだけ修正を加えました。
• 【縦書き h2vR.js】最新版のChromeなど一部のブラウザでの表示不具合と、その暫定対処法。
• 【縦書き】Tips：縦書きのときと横書きのときで適用するスタイルを変更する。
• 【縦書き】h2vR.js、バージョン4.2.3。不具合修正です。
• 【縦書き】h2vR.js、バージョン4.2.2です。不具合修正しました。
• 【縦書き】h2vR.js、バージョン4.2.1を公開しています。