岐阜ホームページ制作 アイ・ラボ

WEBの世界では左から右という文字組が当然のように使われています。

しかし、世界では様々な方向への文字組替あります。

例えば日本を含む東アジア地区。

日本、中国や韓国では本来文章の組み方は縦組みが主流。

アラビア語やヘブライ語などの中東圏は同じ横組でも右から左へという英語などとは真逆の文字組です。

そこで、CSS3では様々な文字組の方向に対応できるようになりました。今回はそれを紹介します。

※ここからの説明はWindows環境でChromeベースで書いています。Mac環境ですと違った結果になるかもしれません。

日本語で縦組みを表現する方法はEPUB3日本語文書作成チュートリアルというサイトにて紹介されています。

EPUB3とは、電子書籍のフォーマットのこと。iPad、iPhoneに『ibooks』という電子ブックリーダーアプリがありますが、このアプリに対応したフォーマットがEPUBになります。EPUBに対応したリーダーはAndroidでも多く、『Aldiko』『FBReader』など様々なリーダーがリリースされています。(EPUB3対応は執筆段階(2011.10.03)で正式リリースされていません)

なぜ、電子書籍がWEBに関係あるのか?

実はEPUBの基本構造は、XHTMLとCSSで構成されているのです。

その上CSS3の策定には電子書籍の普及も目的の一つとなっているのです。

では実際にCSSの設定をしていきますが、今回は青空文庫から素材をお借りします。

題材は芥川龍之介の『』。

選択の理由は①著作権消滅作品である ②当用漢字が使われている(当用漢字以外だと文字画像を利用しなければならないので) ③文章が短い ④XHTML、CSSが用意されていて部分編集するだけで済む ⑤好きな作家の一人だから ですw

青空文庫からダウンロードしたXHTMLファイルCSSファイルをUTE-8で保存しなおし、jQueryなどのリンク、フッタ部分等を削除しました。

サンプルサイト1

ここからは先に紹介したEPUB3日本語文書作成チュートリアルにしたがって作業を進めます。左側のメニューから『縦組み出版物を作成する』の欄の『基本となる組方向を指定する』を、クリックしてみましょう。

ここに、CSSの記入方法が書かれています。

html { writing-mode: vertical-rl; }

文字組の方向はCSSでは”writing-mode”で指定します。”vertival”は縦組、対して横組は”horizontal”を指定します。

ハイフンの右側rlですが、これは文字の流れを指定します。rは右、lは左。

英語等、通常の横組では

html { writing-mode: horizontal-lr; }

アラビア語など中東圏では

html { writing-mode: horizontal-rl; }

となります。

では、CSSを編集します。ただし、”writing-mode”は正式推奨された指示ではなく、ChromeなどのWebkit系ブラウザ専用のものです。なので”-webkit-“の一文を付ける必要があります。(Chrome14では-webkit-を付ける必要はないようですが念のため)

html {
	writing-mode:	vertical-rl;
	-webkit-writing-mode:	vertical-rl;
}

上の一文をCSSの頭の方に追加します。

サンプルサイト2

たしかに縦組みにはなりましたが・・・全体が寝ちゃってる感じです。

これでは縦組とは言えません。

先のEPUBチュートリアルでは縦組みの説明はここまで。説明では縦組みと横組の混在に話が移ってしまってます。

実は第1回EPUB3コンテストに応募したのですがまっさきに躓いたのがこの箇所でした。

EPUB3コンテストではwebkitの最新バージョンで確認することが前提条件なのですが、当の『』EPUB3チュートリアルの指示通りだと文字が寝たままなのです。(不親切にもほどがあると怒りをおぼえたのは内緒ww)

そこで、サンプルのCSSを調べて見ました。

やっと見つけたのがこの指定。

font-family: “HiraMinProN-W3”, “@MS 明朝”, serif, sans-serif;

font-familyの指示ですが、何か気づきませんか?

“MS 明朝”の頭に@がついています。

html {
	font-family:	"HiraMinProN-W3", "@MS 明朝", serif, sans-serif;
	writing-mode:	vertical-rl;
	-webkit-writing-mode:	vertical-rl;
}

htmlの箇所を上記のように書き換えます。

サンプルサイト3

このように正確な縦組みになりました。

MS 明朝の指定のみ@が付いているのを見ると、Windowsのみでの指定かもしれません。

このブログを記入するに当たりこの@付きの指定方法についてググってみましたが、ざっと見たところ詳細な説明は見当たりませんでした。これは見つかり次第紹介したいと思います。

あとは少し形を整えて出来上がりです。

このようにCSS3では縦組みのサイト制作も可能になりつつあります。

今後もっと表現法が広がっていくことでしょう。