text-decorationの過去と現在

CSSのtext-decorationプロパティは、テキストに線や色、スタイルなどの装飾を指定するもので、古くから存在しています。CSS 2.1までは1つで完結するプロパティでしたが、CSS Text Decoration Module Level 3からはショートハンドプロパティとして定義されています。

none | [ underline || overline || line-through || blink ] | inherit

構文からもわかるように、グローバル値以外は、装飾のスタイルのみを指定するものでした。これが現在では次のようになっています。

<'text-decoration-line'> || <'text-decoration-style'>
|| <'text-decoration-color'>

<'text-decoration-line'> || <'text-decoration-thickness'>
|| <'text-decoration-style'> || <'text-decoration-color'>

'つきの<と>で囲まれているものは、同じ名前のプロパティの値と同義です。

このように、Level3では3つ、Level 4では4つのプロパティのショートハンドとして機能するようになりました。<'text-decoration-line'>のみを指定したtext-decorationプロパティは、古い構文と互換性を持ちます。

新しい構文を使いつつ、古い構文もサポートしたい場合は、次のように2つ指定することでフォールバック可能です。

a[href] {
  text-decoration: underline;
  text-decoration: underline dotted tomato;
}

こうすることで、新しい構文をサポートしている環境では2つ目のルールが、そうでない環境では1つ目のルールが反映されます。

それでは、個々のプロパティを見てみましょう。

text-decoration-line

このプロパティは、CSS 2.1までのtext-decorationと同じです。

none | [ underline || overline || line-through || blink ] 

inheritはグローバルキーワードとして定義されましたので、ここからは消えていますが、他は同じです。

なお、blinkは廃止予定ですので、点滅させたい場合はCSSアニメーションを利用します。blinkキーワードを使わなくてはならない状況も存在するでしょうが、どうしても必要でないかぎりはCSSアニメーションを使うほうがよいでしょう。

underlineとoverlineは、名前の通り下線と上線ですが、縦書きの際は言語依存となります。日本語で使われるwriting-mode: vertical-rlでは、次のようになるでしょう。

/* 下線付きのテキスト */
.underline {
  text-decoration-line: underline;
}

/* 上線付きのテキスト */
.overline {
  text-decoration-line: overline;
}

/* 縦書き */
.vertical {
  writing-mode: vertical-rl;
}

縦書きでunderlineまたはoverlineを指定した場合はtext-underline-positionプロパティを使うことで、線を左右どちらに描画するかを指定できます。

前述のデモを見てもわかるとおり、underlineを指定した場合、vertical-rl（縦書き、右から左へ読む）ときには、テキストの右側に線が引かれます。これを左側に移動したい場合にはtext-underline-position: left;と指定します。この際、overlineを指定された線は右側になります。

日本語の縦書きwriting-mode: vertical-rl;の場合は、text-underline-position: left;を指定するとunderlineは左に、overlineは右になると考えるとよいでしょう。

.underline-left {
  text-decoration-line: underline;
  text-underline-position: left;
}

text-underline-positionプロパティについては次回にも説明します。

text-decoration-style

CSS2.1では線のスタイルを指定できませんでしたが、text-decoration-styleで線のスタイルを指定できるようになりました。

solid | double | dotted | dashed | wavy

基本的にはborder-*-styleと同じですが、wavyで波線を指定できるのが特徴です。初期値はsolidです。

p {
  color: darkgray;
  text-decoration-line: underline;
  text-decoration-color: tomato;
}

.solid  { text-decoration-style: solid }
.double { text-decoration-style: double }
.dotted { text-decoration-style: dotted }
.dashed { text-decoration-style: dashed }
.wavy   { text-decoration-style: wavy }

<p class="solid">通常の下線</p>
<p class="double">二重線の下線</p>
<p class="dotted">点線の下線</p>
<p class="dashed">破線の下線</p>
<p class="wavy">波線の下線</p>

通常のコンテンツ作成においては、通常の下線（1本）のsolid以外を使う機会は少ないかもしれません。

使用場面としては、点線のdottedはabbr[title]でのスタイルに使う*、二重線の下線のdoubleは特に強調したいときに使う、などが考えられます。しかし下線が直線ベースである限り、「これはリンクなのだろうか」とユーザーを迷わせる原因にもなります。使うならば、リンクとはスタイルを区別し、使用場面を明確にすることでこのような混乱を抑えることも考える必要があるでしょう。

波線の場合は、リンクと判断されることはあまりないでしょう。そのような使用方法は一般的ではありません。ウェブブラウザ上で波線を見る機会は、入力した文字列に何らかの間違いがある、といった場合でしょう。CSSで指定する場合も、なるべくその文脈から離れないような使用が望ましいと考えられます。

abbr[title] {
  text-decoration: underline dotted;
}

text-decoration-color

このプロパティは線の色を指定するものです。難しいことは何もないでしょう。指定できるのは<color>型です。

過去、text-decorationで指定した下線などは、colorプロパティの値と同じ色で描画されていました。ですが、このプロパティの登場により、現在のcolorの値が何であれ、text-decorationによる線の色を指定できるようになりました。

指定しなかった場合は、初期値のcurrentcolorが使われます。これはcolorプロパティの値と同じ色になりますので、CSS 2.1までと同じ結果になります。

例として、タイプミスのハイライトを作成してみましょう。

p {
  color: black;
}

mark {
  background-color: transparent; /* UAスタイルをリセット */
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<p>
  春はあけぼの。やうやう白くなりゆく山際、少し<mark>明かｒて</mark>、紫だちたる雲の細くたなびきたる。
</p>

このように、前景色colorの値に依存せずに、線の色を指定できます。

text-decoration-thickness

CSS Text Decoration Module Level 4で追加されたプロパティで、text-decorationによる線の太さを指定可能です。一見すると地味な機能ではありますが、テキストの装飾に気を遣う場合には非常に便利なプロパティでもあります。

auto | from-font | <length> | <percentage>

構文は以上のようになっており、初期値はautoです。

autoによる線の太さはユーザーエージェントが決定しますが、「OpenTypeなどの一部のフォント形式には適切な線の太さの情報を持っているものがあり、ユーザーエージェントはそれを使用すべきである」と仕様には記載されています。

from-fontは、最初に有効なフォントに線の太さの情報がある場合はそれを使用し、そうでなければautoになります。

<length>型はそのままの意味です。CSSで指定可能な長さの値です。この値の特徴は、フォントサイズに依存しない先の太さを実現可能なことにあります。

<percentage>は1emに対するパーセンテージです。フォントサイズに依存して太さが変更されます。

このようなプロパティですが、実際に試してみましょう。

以下は、text-decoration-thicknessの各値を指定し、文字の大きさを変えた場合に下線の太さがどのように変化するかを確認するデモです。

p {
  color: darkgray;
  font-family: 'Hiragino Sans', sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
}

.auto       { text-decoration-thickness: auto }
.from-font  { text-decoration-thickness: from-font }
.length     { text-decoration-thickness: 1px }
.percentage { text-decoration-thickness: 20% }

.s  { font-size: 10px }
.m  { font-size: 16px }
.l  { font-size: 24px }
.xl { font-size: 32px }

<div>
  <p class="auto s">自動</p>
  <p class="auto m">自動</p>
  <p class="auto l">自動</p>
  <p class="auto xl">自動</p>
</div>

<div>
  <p class="from-font s">フォント依存</p>
  <!-- 文字の大きさを変えつつ繰り返し -->
</div>

<div>
  <p class="length s">長さ</p>
  <!-- 文字の大きさを変えつつ繰り返し -->
</div>

<div>
  <p class="percentage s">パーセンテージ</p>
  <!-- 文字の大きさを変えつつ繰り返し -->
</div>

autoが指定されたテキスト（「自動」）は、見慣れた線の太さで、フォントサイズに応じて太くなっています。一方、from-fontと1pxが指定されたテキスト（「フォント依存」と「長さ」）は、フォントサイズにかかわらず一定の太さで描画されています。20%が指定されたテキスト（「パーセンテージ」）は、フォントサイズが大きくなるほど、その太さが顕著になります。

次のfrom-fontがautoになる例です。

text-decoration-thicknessにfrom-fontを指定し、フォント指定を変更したデモを作ってみました。ヒラギノとOsaka、それぞれのフォント指定で下線がどのように描画されるか見ていきましょう。

p {
  color: darkgray;
}

.hiragino {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: from-font;
}

.osaka {
  font-family: "Osaka", sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: from-font;
}

OpenTypeフォントであるヒラギノ角ゴシックが指定されたテキストの下線は、文字の大きさが変わっても一定の線の太さです。一方、TrueTypeフォントのOsakaは、autoが指定されたときと同じように文字の大きさに合わせて下線が太くなっています。

また、Firefoxの場合、Osakaの下線はChromeとは異なる描画になります。

このように、from-fontキーワードは、フォントによって描画が変わる特性を持ちます。使い所としては、下線の太さも含めてフォントを選択する場合となるでしょう。電子書籍などテキスト主体の場合に有効かもしれません。

まとめ

今回は古典的なtext-decorationプロパティと、現代の同名プロパティの違いを解説しました。

新しい指定をしながらも古い環境にも対応したい場合は、最初のほうで述べたように、古いtext-decorationを先に指定し、新しいプロパティを後に書くことで実現できるでしょう。

次回は下線を指定した場合の、下線の位置を調整するプロパティを紹介します。