StudyOfTextLayout - ぺったんR Wiki - ぺったんR

テキスト レイアウトのお勉強

はじめに

テキストの格納されたボックスが css を適用され画面に配置される。 このボックス内のコンテンツ部分はインライン要素。a タグがあったり、strong タグ、em, kbd samp, code, var, どうも、このインライン要素の扱いは OS レベルで行われている？ 画像は同じ html 文書を opera10 Iron15 Safari3.2 のそれぞれで表示したもの．OS は同じ WindowsXP．リセットCSS( normalize.css )を使っている．

Web ページのデザインの基本は、コンテンツに対して

Blog テンプレートのデザインが例えば、公告やポスターといった紙媒体と大きく異なる点は、前者がコンテンツの確定していない状態で作られるのに対して、後者は完成前にはコンテンツが確定している点。 Blog ではコンテンツの長さが極端に短い場合も、極端に長い場合も、大体それなりに表示する。 ポスターのような厳密なデザインにはなりえないけど、そういうもの、ということになっている。 デバイスが異なっても、Blog のデザインは維持される。（デバイスのサイズによってレイアウト等が変化するレスポンシブ・デザイン等の技術が使われたりする） 多くの場合、コンテンツは下に下にスクロールして見ていくようになる。 横スクロールが発生するのは、特に意図した場合か、コントロールがうまく行ってない場合。とくに最近はそう受け取られてしまう。 デザイナーは、スタイルが破綻しないように。意識的に無意識に、コントロールしている。

一方でぺったんは

一方のぺったんは、下に逃がす、という選択肢が無いため話が厄介になる。 下に逃げたコンテンツは吹き出しをはみ出して、無様に画像に覆いかぶさってしまう。またはコマをはみ出してしまう。

テキストレイアウトの再現

レイアウトが変わる条件

• デバイスにインストールされているフォント
• ブラウザのテキストレイアウト機能( text-align:justify などは違いが顕著)
• OS のテキストレイアウト機能
• ユーザーのズーム設定等