縦書き字形に置換してみるかな。

さてさて、既存のHTMLを簡単に縦書きレイアウトに変換する JavaScript h2v.js です。アップデートを重ね、まずまずまともに動くようになっているわけですが。

横書き → 縦書きにするときに、さしあたって問題となるのが、

  • 横書き時と縦書き時で字形が異なる文字たち(括弧や長音記号、三点リーダなど)
  • 横書き時と縦書き時でポジションが異なる文字たち(句読点など)

…を、どう扱うか。

現在(h2v.js ver 2.4.0)は、

  • 括弧や長音記号、三点リーダなどは CSS で右に90度回転させて表示。
  • 句読点は CSS でポジションを移動させて表示。

という処理を行なっているのだけれど、これがフォントの種類やフォントサイズによっては、非常に見苦しい表示になってしまいます。これは先日頂いたコメントでも指摘があって、自分も気になっているところ。

で、実は最近のOS標準フォントたちには、だいたい縦書き字形が含まれています。
そこで、

  • 無理にスタイルシートでやるよりも、文字を置換してしまうのはどうだろう。

…と考えてみたのです。

文字置換で行うと、見た目は圧倒的に良い。のだけれど、横書き → 縦書きのときに、例えば '「' → '﹁' のように文字自体を置換しているので、

﹁こんにちは﹂


をコピーしてどこかにペーストすると、

﹁こんにちは﹂


…と、ちょっと嫌な感じになってしまう。スタイルシートでレイアウトを決めている現行方式だと、ちゃんと 「こんにちは」 とコピーされるのだけれど。

そして万が一、閲覧者の環境にインストールされているフォントに、当該の縦書き字形が見つからなければ、→ ︞…と、このように、いわゆる「豆腐」が表示されてしまいます。

うん、文字置換方式にするデメリットも大きいけれど、見た目の美しさを手に入れたいと強く思うのです。というわけで、その方向で作業を進めてみることにする。

カテゴリ: