強調を表す擬似傍点。

平成21年 2月 5日更新

CSSの小技として、日本語文書でしばしば使われる強調を表す傍点を擬似的に表す方法です。

強調を表す擬似傍点の概要。

一般にグラフィカルなウェブブラウザでは、要素のデフォルトスタイルは斜体、要素のそれは太字と英語圏での印刷パターンを踏襲しております。

CSSを用いる事でこれらを変える事は可能ですが、実際にはCSSの現行仕様であるCSS第二水準では表現法が限られており、日本語圏での印刷パターンでよく見かける「傍点」を打つ事は出来ません。

現在策定中のCSS第三水準・フォントモジュールにて強調された文字に傍点を当てるプロパティが追加される予定ですが、勧告はまだ大分先の事ですし(事前勧告は平成19年の予定ですが、正式勧告は未定です)、ましてやユーザエージェントへの実装となると更に後の事になりそうです。

ですが、背景画像を用いる事で擬似的に傍点を打つ事が出来ます。

但し、閲覧者の文字の大きさによっては文字と傍点が一体一に対応しない事になりますし、寧ろそうなる事が多くなるでしょう。

勿論、文字の大きさをpx単位で指定すればぴったり対応させる事は可能ですが、ピクセル単位でのフォントサイズ指定は拡大・縮小が自由に出来ず、閲覧者にとって不便ですのでやってはいけません。

また、一文字ごとに要素を当てれば、各文字の上に適切に傍点を振る事も可能ですが、そこまでする必要があるでしょうか。

結局、傍点っぽく見えるスタイルを作るつもりでやるのが良いでしょう。

強調を表す擬似傍点の実例。

当サイトの平成18年 6月20日当時のスタイル定義ファイルでは、要素は以下のように擬似傍点で強調を表すようにしておりました。

読み飛ばす

em {
    font-style: normal;
    padding: 6px 0 0;
    background: #f0fff0 url("Marguerite-Emphasizer.GIF") repeat-x;
    }
em em { background: transparent; }

ここでは、backgroundプロパティで背景に関するプロパティを一括して指定します。

まず、当サイトでは背景色は基本的に「#ffffff」(白)ですが、そうすると画像が表示されない環境では強調されている事が分からなくなるので、画像が表示されない場合の背景を薄緑色にするようにしました。(平成18年 6月20日修正)

続いて、「Marguerite-Emphasizer.GIF」は幅16ピクセルズ、高さ34ピクセルズで真上の中央に中黒点が打たれた背景が白のGIF画像です。(平成18年 6月20日修正)

ですから、フォントの幅が16ピクセルズだとピッタリになります。
また、この場合、文字の大きさが34ピクセルズを越えると、下の部分が薄緑色になりますが、幾ら何でも普通の文字を34ピクセルズにする事はまずないでしょうし、よしんばそう言う設定であったとしてもデフォルトの背景が白なので、下部が薄緑色になってもそれほど悪いと思えません。

また、背景画像はパディングを含めた左上端を基準に配置されますので、paddingプロパティで上方向に 6ピクセルズ分を空ける事にします。

つまり、こうする事でテキスト左上端から 6ピクセル上の点が背景画像基準点となります。

次に、傍点画像は当該要素内に横方向に続けて並べるべきであり、background-repeatプロパティ値としてrepeat-xプロパティ値を与える事でそれを指定します。

以上のようにして擬似傍点が実現すると言う訳です。

また、要素が入れ子になっている場合(こう言うマークアップの是非はここでは問いません)には背景を透明にしておかないと、傍点が二重に付く事になりますので、そのようなスタイル定義も与えておきます。(平成18年 6月20日)

擬似傍点の対応状況。(平成18年 6月23日)。

インターネットエクスプローラ 7.0 まででは、複数行に亘る場合、画像が適切に表示されない場合があります。

折返しが起こらない場合は、問題無く擬似傍点が表示されます。
white-spaceプロパティにnowrap値を当てて複数行に跨らないようにしても、画像が表示出来ない場合があります。

結局、対応出来る環境でのみ期待する事になるでしょう。

そもそも、この機能はユーザエージェントに備わっていないものを無理矢理擬似的に実現しているものですので…。

尚、対応出来ない環境でも何らかのスタイルで強調と分かるようにしておく事は忘れないようにしましょう。

擬似傍点に関する補足。

文字の大きさが異なる要素や半角文字の多そうな要素には。

尚、<h○>要素は通常のテキストとは極端に文字の大きさが異なり、この画像をそのまま用いると却って不恰好になってしまので、専用の画像を別途用意しました。

また、<pre>要素, <code>要素, <samp>要素或いは<kbd>要素など、半角文字が内容になる事の多い要素内では、全角文字を対象としたこの傍点表現法ではやはり不恰好になりそうです。

そこで、これらの要素の下位に置かれた要素や要素の下にこれらの要素がある場合には傍点表示を諦めて太字で表示させるなどしております。

勿論、擬似傍点画像をそれぞれに用意するなどしても良いでしょう。

もう一つの方法。(平成21年 2月 5日)

CSSで無理矢理実現した場合、フォントのサイズが変わるだけで崩れたりする事になります。

崩れないような傍点を打つには、一文字一文字に背景画像を適用するしかありませんが、まさかそのために一文字一文字にタグを書くなんて馬鹿げた事はしたくないでしょうし、すべきではありません。

しかし、これをJAVAスクリプトで実現する事は可能です。

但し、当然ながらJAVAスクリプトが実行出来る環境でのみ効果が出るものです。加えて、DOMが扱える事が条件となります(これらの条件は、現行のグラフィカルのブラウザであれば満たされるものです)。

実際の例についてはダイナミックHTMLとDOM内の強調する文字に傍点を与えるスクリプトをご覧下さい。