ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。

そこで使ってみたいのがSakubunCSSです。振り仮名まで含めて日本語で縦書きが実現できるCSSです。

SakubunCSSの使い方

SakubunCSSの文章です。rubyタグを使って振り仮名を指定できます。

<div class="sakubun">
  <p>
    つれづれなるままに、<ruby>日<rt>ひ</rt></ruby>くらし<ruby>硯<rt>すずり</rt></ruby>にむかひて、<ruby>心<rt>こころ</rt></ruby>にうつりゆくよしなし<ruby>事<rt>ごと</rt></ruby>を、そこはかとなく<ruby>書<rt>か</rt></ruby>きつくれば、あやしうこそものぐるほしけれ。
  </p>
</div>

実際の表示です。作文用紙風に表示されます。

文字は縦に選択されます。

SakubunCSSを使うことで、特別な操作を行うことなく縦書きの表示が実現できます。しかも作文用紙風とあって、小説などにぴったりな表示です。扱うコンテンツを選ぶかも知れませんが、青空文書などはぴったりかも知れません。

SakubunCSSはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

cawpea/SakubunCSS: This css will create style of Japanese writing.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2