禁則処理とか整形とか
2005.3.09


 注:今回のひとりごとは、皆様の環境が一行に40文字以上表示可能であることを前提にして書いています。そうでない環境の方は想像してお読み下さい(^^;)。


*****


 私の場合、日記にしてもFFにしても、通常はフォントの指定はしないことにしている。お好きなフォントでご覧いただければよろしいかと。だが、今回の「ひとりごと」では指定させていただいた。禁則処理や整形の問題とフォントは切り離せないからである。
 この部分ではプロポーショナルフォントを指定している(プロポーショナルフォントとは何かについては後述)。MS Pゴシックがインストールされていればそれを、入っていなければOsakaを、それも入っていなければブラウザデフォルトのフォントで表示されているはずである。はずである、などと今ひとつ歯切れが悪いのは、フォントの指定方法にいまいち自信がないからである(爆)。合ってると思うんだけど。
 このあたりに関しては際限なく愚痴を書きたいのであるが、それはとりあえず後回しにして(つまり後で書くということだ)本題に入るとしよう。

 整形をするというのは、今回の主題としては一行あたりの文字数を規定するということである。つまり適当な文字数で改行するということである。これは当然ながら禁則処理をするということになる。禁則処理とは何かというと、行頭に『。』とか『、』を打たないとかそういうやつである。
 整形していない文章の場合、つまりセンテンスの長さがブラウザの横幅よりも長い場合、禁則処理はブラウザが行う。IEの場合、line-break:strictと指定すると『。』や『、』の他に『ゃゅょ』や『っ』も処理してくれる。これはIE独自の命令だが、別にIEが優れているわけではなく、NN、Mozilla Firefox、Operaではいちいち指定しなくてもやってくれるのである(今確認した)。Windows以外のOSやSafariはどうか知らんが。

 整形したいと思うというのは、禁則処理をきっちりやりたいということだと思っている。横幅が長すぎて読みにくいから整形するべきなんだという意見もあるが、そういう場合はブラウザの横幅を読みやすく調節して頂きたい。そのくらいならめんどくさくないと思うのだが。だからこの立場に立っていえば、サイズを規定したテーブルに押し込むのはあまり意味がない。これはブラウザの横幅を調節したのと同じだから。

 禁則には二種類ある。ぶら下がり禁則と追い出し禁則で、ブラウザが行う処理は追い出しである。
 以下の例文は等幅フォントを使用する。まずぶら下がり禁則。

彼の笑顔を見ているだけで、ほんの少しだけれど私の心は弾む。目線が合うと、心臓
が跳ねる。弐号機パイロットと話をしているのを見ると、胸が苦しくなる。それがきっ
と、人を好きになるということなんだと思う。碇くんが好きなのかもしれない。私が
人を好きになるなんて、許されるはずもないのに。

 次に追い出し禁則。

彼の笑顔を見ているだけで、ほんの少しだけれど私の心は弾む。目線が合うと、心臓
が跳ねる。弐号機パイロットと話をしているのを見ると、胸が苦しくなる。それが
きっと、人を好きになるということなんだと思う。碇くんが好きなのかもしれない。
私が人を好きになるなんて、許されるはずもないのに。

 ついでに禁則なし。

彼の笑顔を見ているだけで、ほんの少しだけれど私の心は弾む。目線が合うと、心臓
が跳ねる。弐号機パイロットと話をしているのを見ると、胸が苦しくなる。それがき
っと、人を好きになるということなんだと思う。碇くんが好きなのかもしれない。私
が人を好きになるなんて、許されるはずもないのに。

 見ていただければわかるが、禁則処理をしているのは二行目の「きっと」の部分である。「っ」を行末にぶら下げるか、「き」ごと次行送りにするか、二つの方法があるということである。
 個人的にはぶら下がり禁則が好みである。「っ」の禁則だと微妙だが、少なくとも「。」や「、」はぶら下げた方が美しいと思う。各自ブラウザの幅を変えて確認して頂きたい。
 どの文字を禁則処理するかだが、実はこれは編集者に任されているようである。「。」「、」「(」あたりは異論はないと思うが、「ー」や、それこそ「っ」や「ょ」あたりは微妙である。見た目の好みで選ぶしかない。手元の本を見てみたのだが、行頭に普通に「ー」があったりするケースもそう珍しくはない。

 続けてフォントの問題に移る。上記例文を、フォントをプロポーショナルフォントにして見てみる。とりあえずぶら下がり禁則。

彼の笑顔を見ているだけで、ほんの少しだけれど私の心は弾む。目線が合うと、心臓
が跳ねる。弐号機パイロットと話をしているのを見ると、胸が苦しくなる。それがきっ
と、人を好きになるということなんだと思う。碇くんが好きなのかもしれない。私が
人を好きになるなんて、許されるはずもないのに。

 行末が揃っていない。これは、プロポーショナルフォントは文字(記号)によって使う横幅が違うからである(占有する横幅の異なるフォントがプロポーショナルフォントであるという言い方が正確かもしれない。ちなみに等幅フォントなら全角は全角同士、半角は半角同士で同じ幅。文字通り「等幅」)。行末が揃わないのでは整形した意味がない、とまでは言わないが、やっぱり美しくないと思う(もしかするとMacの人は揃っているかもしれないが、これに関しては後述する)。もちろんプロポーショナルフォントの使用を前提として整形することも可能だが、フォントによってその文字が占有する横幅は異なるかもしれないし、いずれにしてもフォントを指定する必要が出てくる。等幅フォントを指定するだけなら単にmonospaceとか書いておけばいいのかもしれないが、このプロポーショナルフォントがかっこ良くて読みやすいからこれで読みたい、という人の期待には応えられないことになる。読者がブラウザで強制的にフォントを指定することは可能だが、そうなると行末は揃っていないことになる。

 整理すると、整形する最大のメリットは自由に禁則処理ができるということにある。加えて、高解像度の読者がいちいちブラウザの横幅を狭くしなくても読みやすい、ということになる。
 デメリットは、原則としてフォントの指定をするべきであろうということと、読者の解像度が指定した文字数を表示しきれないほど低い場合、不自然に改行されて異様にみっともないということ。現在は全角40文字程度ならほぼ問題ないというか、無視してもいいのかもしれない。ただし、解像度が800×600で(ここのサイトでは4%程度)文字サイズを「大」以上にすると、一行に全角40文字は表示できない。目の悪い人は確実にいる。だが、高解像度の場合は一行35文字とかだとかえって読みにくいように思う。
 参考までに、上記追い出し禁則の例を35文字幅で改行した例を出しておく。一行に35文字しか表示できない場合、このように見える。

彼の笑顔を見ているだけで、ほんの少しだけれど私の心は弾む。目線が合う
と、心臓
が跳ねる。弐号機パイロットと話をしているのを見ると、胸が苦しくなる。そ
れが
きっと、人を好きになるということなんだと思う。碇くんが好きなのかもしれ
ない。
私が人を好きになるなんて、許されるはずもないのに。

 結論として、多種多様な環境の読者を全て満足させるような、読みやすく綺麗に表示する方法などない、ということになるのではないだろうか。要するに書き手が好きなように選べばいいというだけの話である。
 ということで、私は現状では整形をしないことにしている。だが、ぶら下がり禁則の魔力には抗しがたい物があり、いつの日か整形する日が来るかもしれない。ブラウザがぶら下がり禁則を上手にサポートしてくれれば、私的には万事OKなんだけどね。
 しかし私が整形しないのは、単にめんどくさいという理由も相当に大きい(爆)。これだけ書いてきて結論がこれかよ、という声も聞こえてきそうだが、一旦整形すると修正するのは非常に面倒である。例えば「くん」を「君」に変えたとすると、一文字減るわけであるから、一行40文字で整形してあるとすれば39文字になってしまう。そうすると次の行から一文字引っ張ってこなければならず、必然的に一文字引っ張ってこられた行も39文字になるので、更に次の行から引っ張ってくることになり、これを段落が変るまでやらなければならない。これはめんどくさい。となると、整形後の修正は私の性格的に「ま、いっかぁ」てなことになりがちになる可能性が非常に高く、これは避けたいと思うのである。

 ちなみに、htmlでなくテキストで投稿される場合でも、整形するしないや行間をこのくらい空ける等の指定は遠慮無くしていただいて構わない。これは編集者の仕事だと思っている(今回の「ひとりごと」では、行間は150%に設定してある。参考までに)。行間の指定はスタイルシートに書くだけだし、整形はキー一発で済むように設定してあるから労力などほぼ皆無と言っていい。上記のリスクを考えた上で、作者の方が「これが読みやすい」と思うように指定していただければそれでOKである。ただし、その指定が極端に読みにくいとしか思えない場合は要相談ということになる。

 ちょっと蛇足。
 やや詩的というか、散文的な効果を生む手法として、センテンスごとに空行を入れる方法がある。これにも上に書いたのと全く同じ問題があり、作者の環境では一行で表示されていたものが、読者の環境では表示しきれない場合がある。

彼女の手には、綺麗な包装紙とピンク色のリボンでラッピングされた小箱があった。

聞き取れないくらい小さな声で『これ……』とだけ言って、その小箱を僕に差し出した。

耳まで桜色に染めて。

 と表現したいのに、読者の解像度が低い場合、

彼女の手には、綺麗な包装紙とピンク色のリボンでラッピングされた小箱が
あった。

聞き取れないくらい小さな声で『これ……』とだけ言って、その小箱を僕に
差し出した。

耳まで桜色に染めて。

 となってしまう場合があるのである。これはある意味ではやむを得ない。センテンスを40文字程度で収める工夫は必要かもしれないが、最終的にどうするかは作者次第ということでいいと思う。
 ちなみに空行を改行ではなくスタイルシートで取った場合は、

彼女の手には、綺麗な包装紙とピンク色のリボンでラッピングされた小箱が

あった。

聞き取れないくらい小さな声で『これ……』とだけ言って、その小箱を僕に

差し出した。

耳まで桜色に染めて。

 になる(この例では、実際はスタイルシートではなく改行コードを使っている)。これもどちらを選ぶかは作者次第だが、見え方の違いには自覚的である必要がある。


 本題は以上で終了。では愚痴のスタート(笑)。

 今回のひとりごとで、等幅フォントの指定は「MSゴシック、Osaka等幅、monospace」の順で指定した。これは、まずMSゴシックがインストールされてるか探し、なければOsaka等幅をさがし、それもなければ何か適当な等幅フォントで表示しろということである(これ、合ってるよな?)。
 まぁこれはいい。
 プロポーショナルフォントの指定は、前述のようにMS Pゴシック、Osakaの順で指定した。だが当然ながら、両者とも入っていない場合に使われるであろうブラウザデフォルトのフォントは等幅フォントであるという可能性がある。等幅フォントの指定の時と同様に、最後にsans-serifかなんかを指定しておけばいいのかもしれないが、ブラウザがIEであり、PゴシもOsakaも入っていない環境であり、かつOSがWin2KかXP以外だと、なんと文字化けするらしい。マイクロソフトは「これはIEの問題と認識しているが修正の予定はない」ときたもんだ(爆)。ただし、これはもしかするとWindowsOSに限った話かもしれず、だとすればPゴシが入っていないという環境は恐らくあり得ないので、単にhtml作成側の問題かもしれない。この問題について書かれたページには、sans-serifの前に日本語フォント名を設定すればOKと書いてあるだけで、その日本語フォントがインストールされていない場合にどうかということに関しては言及していない。一応リンクも貼っておく。
[IE5]sans-serif を指定した HTML ファイルを表示すると文字化け
 ということで、万一LinuxかなんかでPゴシが入ってなくてIEを使ってる人が化けるとまずいので、sans-serifは外しておいたのである。

 今回のひとりごとを書くに当たって色々調べたのだが、まぁ出るわ出るわ文字化け例のオンパレードである。「文字化け」で検索してるので当たり前なのだが(爆)。中にはOsakaを先に指定しないとMacでは化けるなどという記述もあったりしたが、自分のパソコンに入っていないフォントを優先的に指定する勇気はないので無視した(笑)。Macの方、Osakaで見えてますか?
 で、フォントに関する解説の中に、Osaka等幅のOsakaと違うところは半角英数だけ、という記述もあった。だとすると「。」も「あ」も占有するスペースは同じで、日本語に関する限りは等幅フォントということになる。ほんとかな。

【HOME】【ひとりごとの目次】