CSS3 Tips : そのうち役に立つばい text-rendering で WordPress 日本語ブログを美しく見せる おまじないに

Sharing is caring!

[icon name=”icon-time”]この記事を読むのに必要な時間は約 5 分 47 秒です。

WordPress に限らず英語で書かれているサイトはブラウザで見て回るとどれも綺麗。書かれている文章も日本のブログでよく出会うものよりも充実している。文筆家が更新されている日本語のブログのほうが内容は充実していますが、様になっている印象があるというべきでしょうか。
それは英文と日本語の文体の扱い、視認性によるところが多いでしょう。縦書が美しいのでしょうが、それは横書きになった時の文字の並びにあるのではないでしょうか。文章を両端揃えにする「text-align:justify;」は常套的に利用していますが、「text-rendering: optimizeLegibility;」は『読みやすく、美しく』を理想により導いてくれるおまじないでしょう。

行間が詰まっていて文章が硬く見える、本文が少ない時は殺風景に感じられる。

→それで、改行をむやみに入れる。

文章の右端の改行が、凸凹に並ぶので新聞、雑誌や書籍のようにきっちりと揃えたい。

→それで、文章の並びを変えたり、文字の間にスペースや半角スペースを入れる。文章の途中でも強引に行末で改行させる。

改行は行替え、段落を意味します。見た目は何もありませんが、改行コードが挿入されるので文字数に数えられるし、読み込まれるのに時間が要します。作為的にページ滞在時間を稼ぐのに使われ、スパム的挙動とも認知されるのでブログシステムによってはアップする時に改行コードを自動的に削除することが常識化してきた。それに段落が変わることで文章のつながりと判断されないので、検索にはヒットしなくなる。文章の途中で改行すること、文字間にスペースを入れることも単語としての成立がしなくなりますから、検索されなくなるものです。

行間が詰まっていて文章が硬く見える、本文が少ない時は殺風景に感じられる。

→文章の行間は、line-height を好みのサイズで指定する。それで、一行分でなく、半分ぐらいを開けることが出来るようになります。もちろん、一行半ということも容易。

文章の右端の改行が、凸凹に並ぶので新聞、雑誌や書籍のようにきっちりと揃えたい。

→ページの両端いっぱいに文章を揃えるのは、text-align:justify; それで、文章は幾分整頓されているように見えます。英文の単語を文章内で使う時は word-spacing: を指定すると単語毎に感覚が自動調整されます。letter-spacing: を指定すると文字それぞれの間を調整できます。

わたしも躍起になって文字や単語、文章の両端に半角スペースをいくつも入れてイメージ目指していた頃がある。

パソコンで文章書きをする前にワープロ経験があると、この２つは有りがちが行為ではないだろうか。わたしも最初のMacで作り始めたのは、それ以前に書いたりしていたものをパソコンでイメージ通りにすること。ワープロでは文章だけだし、ファックスは白黒だし。Macのクラリスシリーズは使わなくなった今でも愛着があります。

その後、EGWord に出会い、カーニング、原稿用紙モードが楽しく使えるようになった。HTML 書き出しも出来るものでしたが満足できるものには、程遠いといった感想を持ちました。でも、その当時にスタイルシートのことを知っていたら違ったかもしれない。インターネットマガジンなど月刊誌でタグブックが付録についていたり、本誌で連載されていた講座は勉強に成ったけど、スタイルシートの項目は飛ばしてただけだから。

しばらくしてブログを JUGEM ではじめ、慣れてくると Blogger で長く続いている。この段階でスタイルシートが楽しくなってきますがレイアウトや、なにかイベントを起こすことに気が行っていてブログの読みやすい見せ方までは至らないものでした。

text-rendering: optimizeLegibility;

記事（Post ）のタイトルだけ、適用してみていますが変化が感じられないのですが上から適用してない場合、二番目が『 text-rendering: optimizeLegibility; 』が適応時、そして両者の比較です。

そのうち良さが分かってくるもので、効果適面に「よかかも」と感じられるものではない。text-rendering プロパティは CSS ではなく SVG の仕様に定義されています。現在のところ利用できるブラウザは Firefox、Chrome、Safari。和文フォントでは、ヒラギノ角ゴ・明朝は軽くカーニングが調整されます。

ただフォントがカーニングや合字のデータを持っていなければ指定しても何も起こりません。和文フォントでもメイリオと MS 系ゴシック・明朝は効果がないですが、optimizeLegibility はカーニングと合字(リガチャ)をうまい具合に調整してくれるもので、まだまだ見慣れないレアモノなので今後に期待したい。

使用例と指定できる値

html {
    font-family: "Open Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    text-rendering: optimizeLegibility;
    ...
}

指定できる値は

• auto (初期値)
• optimizeSpeed
• optimizeLegibility
• geometricPrecision
• inherit