ウェブ文章の整形

縦書きの印刷用文章だったら整形のお約束ってだいたい決まってるから、そこらの本を参考にして禁則とか段落の字下げのやり方とかすぐわかるんだけど、ウェブのこういう横書きの文章ってどうしたらいいのか、いまいち悩む。段落の字下げの話ひとつとっても、あれこれ説がある。

HTMLでパラグラフの<p>タグは、ブラウザだと欧文風に1行空けるレンダリングをされる。日本語は普通、段落は改行して一文字下げなので、いきなり作法が違うことになる。この時点で、1行空いてるんだから字下げいらない派と、日本語なんだから字下げ必要派に分かれる。で、日本語式に表示させるための作法もいろいろで、<br>(改行)とスペースでやってる人(これはHTML的にちょっと問題あり)とか、<p>タグ+全角スペースで文字下げとか、いやそこはスタイルシートのtext-indentを使うのが本来でありとか、どうも統一した見解がない。

欧文混じりの文章で、欧文と和文の間を半角スペースで空けるかどうかって問題もある。個人的には空けない派なんだけど(こっちの方が頭使わなくていい。空ける場合、数字とか句読点の前をどうするかとか、これまた細かい話がややこしい)、最近のMac OSのテキストエンジンは、スペースがないとたまに変な位置で改行してしまうのだった(これ、どういう仕様なんだろう?)。

まあ、細かいことなんだけど、字面がきれいだと、なんか読む気が沸いてきません? Alertbox: 2005年 ウェブ・デザインの間違いトップ10ではダントツでフォントの問題(小さすぎ、固定サイズ、薄い)が1位だし、やっぱり重要なのだ。ちなみにおすすめ本文文字サイズは、ユーザー任せ。設定するなら最低でも10pt(Windowsの話だと思われる。13px)で、固定サイズにしないこと、だそうで。最適行間は、パナソニックの研究によると0.4から0.9の間。

ぜったいやらない方がいいと思うのは、見た目の幅に合わせて文章の途中で改行を入れること。想定してるサイズよりフォントを大きくすると、数文字だけ次の行に送られてしまってテラ読みにくい。しかも、そういうページに限って字が小さいとか。あと、IE6はとっとと捨てましょう。

2 Replies to “ウェブ文章の整形”

  1. メールで改行多用しちゃうぜw
    まあ、25~30文字で改行だから読みにくくなることは
    ないかな。改行ゼロのメール(文章)もそれはそれで困る^^;
    悩むのは携帯のメール。他の携帯の表示サイズワカランw
    読みやすさはけっこう気にするね。でも未だIE6だ><
    やっぱファイアフォックス???
    まだウェブ上での日本語横書き表記の統一ルールはないんだな。
    レイアウトも経験・センスが必要だよね。

  2. メールは結構改行するんだよね。ぼくは最近メーラー任せだけどw 携帯メールは、送信側の画面幅に合わせられて悲惨だった経験アリ。
    IE6はCSS対応がかなり時代遅れで、作る方からすると厄介なブラウザなんだよな。しかも数が多いから無視できないし。あと、6に限った話じゃないけど、デフォルトの文字サイズが16pxってのも謎。でかいだろと。まあ小さく設定すればいいんだけど、16px基準で小さくするサイズ設定してるサイト(Google含む)が多くて、豆文字になっちゃう。むかつく。
    文字の表示でいうと、MacのSafariはやっぱりきれい。ツールバーに拡大縮小ボタンが追加できるし。FireFoxは拡大縮小で文字だけじゃなくて全体を変更できてすごいんだけど、ボタンが追加できないのが残念。MacはテキストエンジンがCocoaとCarbonだと仕様が違うらしくて、FireFoxは微妙にSafariと表示の作法が違う。
    Windowsはアレだ、MS Pゴシックがださい。なぜに和文までプロポーショナルなのかと。アンチエイリアスも効かないから、サイズによってはジャギーが厳しいし。メイリオはぼくは嫌いじゃないけど。金あるんだからもっと日本語フォント充実すればいいのにな。

Leave a Reply

Your email address will not be published.