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

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

デモのキャプチャ

Bibliotype
デモページ

[ad#ad-2]

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

デモのキャプチャ

「MENU」のキャプチャ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

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

デモのキャプチャ

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

Bibliotypeのダウンロード

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

[ad#ad-2]

Bibliotypeの特徴

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

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

sponsors

top of page

©2018 coliss