[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の場合には以下のような既知の問題があります。

<

ul>

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

    ul>

    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部をどうぞお楽しみに。

    デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

    この記事の著者

    hachi8833

    Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

    hachi8833の書いた記事

    夏のTechRachoフェア2019

    週刊Railsウォッチ

    インフラ

    ActiveSupport探訪シリーズ