[CSS][縦書] CSS研究部Webサイトを立ち上げました

お久しぶりです、hachi8833です。

9月に弊社内にてCSS研究部会が結成され、このたび以下の公式ページを公開いたしました。

CSS研究部 — BPS株式会社

csslab_top

第一回部会 — part 1

article_1st

弊社では日本語縦書きビューアエンジン[超縦書]電子書籍での縦書き表示に力を入れており、CTOのbabaさんを始めとするメンバーが、W3CのCSS仕様と各ブラウザでのCSS実装の違いなどの先進的な課題に日々取り組んでいます。

部会での成果は今度上のページにて継続的に発表いたしますので、どうぞご期待ください。

ブラウザごとに縦書き表示がいかに異なるか

CSS部ページのお披露目代わりに縦書き表示のサンプルをご紹介します。CSS研究部トップページの冒頭に掲載されている縦書きサンプルを使用して、ブラウザによる縦書き表示の違いを確認できます。皆様の環境ではどのように表示されるでしょうか? ご自由にさまざまなブラウザで表示してみてください。

なお、IPAex明朝フォントがインストールされていないとこのとおりに表示されないことがありますのでご注意ください。IPAexフォントは情報処理推進機構IPAexフォントのページから無償でダウンロードできます。

Chrome 39.0.2171.65 (64-bit) (Mac版)

chrome_mac

Chromeの場合には以下のような既知の問題があります。

  • くの字点が分離している
  • 1行目のルビ「BPS」が右にある
  • 傍線が左側にある
  • 傍線が途中で切れてつながっていない
    • Firefox 33.1 (Mac版)

      firefox_mac

      Firefoxは全滅ですね。開発チームは縦書きに関してかなり苦戦しているとのことです。

      追伸: Firefox Nightlyなら縦書きを表示できるとの情報をいただきました。ありがとうございます!
      momdo_様が公開したスクリーンショットへのリンクを追記いたしました。

      Safari 7.1

      safari_mac

      Chromeと同様の不具合があります。

      Opera 25.0

      opera_mac

      Chrome、Safariと同様の不具合があります。

      Internet Explorer 11

      IE11_win3

      サンプルを単独で表示しているのでショットが大きくなっています。

      超縦書

      最後に、弊社の超縦書でレンダリングした結果をご紹介します。

      chotategaki

      超縦書の優位点は以下のとおりです。

      • ruby-positionが実装されている
      • ルビと圏点が同時表示できる
      • justifyが正しく動作し、その状態でもくの字点などの分離禁止が動作している
      • hanging-punctuationが動作している
      • text-underline-positionが動作している
      • underlineが正しくつながっている

      ruby baseが折り返されているのは実は仕様違反ですが、Chromeのblinkエンジンはrubyが長すぎる場合に違反を承知で折り返しています。

      サンプル最後の段落の文面にもあるように、現時点の超縦書は熟語ルビについてはまだ対応していません。見てのとおり、これについては他のブラウザも未対応です。

      iPhoneやAndroidで表示するとまた違う結果になることでしょう。今後のCSS部をどうぞお楽しみに。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833 コボラー、ITコンサル、ローカライズ業界を経てなぜかWeb開発者志願。 これまでにRuby on Rails チュートリアルの大半、Railsガイドのほぼすべてを翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ