iPadなどのタブレットデバイスで読みやすいコンテンツを作成するためのフレームワーク -Bibliotype

iPadなどのタブレットデバイスでコンテンツを見る際に、さまざまなシーンを想定して読みやすいコンテンツを提供するためのフレームワークを紹介します。

Bibliotype
デモページ

[ad#ad-2]

デモページの左上の「MENU」をクリックすると、現在表示しているコンテンツをさまざまなシーンにあわせて読みやすくします。

「MENU」のキャプチャ

「SIZE」を「KNEE」に変更すると、タブレットを膝に置いた位置に想定した文字のサイズに変更されます。

「SIZE」を「KNEE」にしたキャプチャ

「SIZE」を「BREAKFAST」に変更すると、朝食のテーブルということでしょうか？　もう少し大きいサイズに変更されます。

「SIZE」を「BREAKFAST」にしたキャプチャ

変更項目は、他にもテキストの均等揃え、フォントファミリー、コントラスト、ハイフネーションが変更できます。
下記は、コントラストを「HIGH」にしたものです。

「CONTRAST」を「HIGH」にしたキャプチャ

Bibliotypeのダウンロード

Bibliotypeは、下記よりダウンロードできます。

• Bibliotype on Github

[ad#ad-2]

Bibliotypeの特徴

• CSS3 Media Queriesを使用して、デバイスを検出。
• フォントは、セリフとサンセリフを選択可能。
• ハイフネーションの処理は「hyphenator」を使用。
• font-size, line-height, marginなどそれぞれを最適化。
• テキストの均等揃えも可能。
• コントラストには「Low」と「High」を用意。
• 脚注のスタイル。

詳しくは、下記ページを参考ください。

• A Simpler Page