Part 1. Let's begin CSS : Chapter 4. “要素の操作”

4.1 テキストの操作(1)

 本節では,テキストを操作するプロパティについて解説する。

文字間隔:letter-spacing プロパティ

 letter-spacing プロパティは,文字の間隔またはそれらの振る舞いについて指定する。

letter-spacing: 長さ;
letter-spacing: normal;

 このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード normal である。
  • プロパティの値は,継承される。

 キーワード normal が指定されたときには,文字間隔はブラウザまたはフォントによって定められた既定の値になる。長さで指定された場合,文字間隔は,既定の値にその長さを足した値になる(したがって,無理のない範囲でこのプロパティに負の値を与えることができる)。

 まずは,このプロパティの振る舞いを見てみよう。

H3 { font-family: Verdana, Chicago, sans-serif; letter-spacing: 1em; }

<H3>Neutralization</H3>
<P> 中和反応は,本質的には,水溶液中の水素イオンと水酸化物イオンが結合し,水ができる反応である。</P>

Neutralization

 中和反応は,本質的には,水溶液中の水素イオンと水酸化物イオンが結合し,水ができる反応である。

 このプロパティの振る舞いは,text-align プロパティの指定状況によって変わってくる。text-align プロパティに justify が指定されているときは,テキストの両端をそろえるための文字間隔の調整は,letter-spcingnormal のときにしか起こらない。すなわち,このプロパティに長さが指定されているときは,文字間隔は指定された長さで固定され,両端揃えの調整には役をしない。

 また,欧文などの合字(リガチャ;“fl”,“fi”などが 1 文字で表現されるもの)に対しても letter-spcing プロパティは関わりをもっている。このプロパティで調整された文字間隔が結果として既定と異なる値になっていた場合,一般にブラウザは合字の処理を行わない(連続した“fl”を合字にしたりということを行わない)。

ワード間スペース:word-spacing プロパティ

 word-spacing プロパティは,欧文などにおいて,単語間の空白の幅を指定する。

word-spacing: 長さ;
word-spacing: normal;

 このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード normal である。
  • プロパティの値は,継承される。

 キーワード normal が指定された場合,単語間スペースはブラウザの設定またはそのときのフォントによって定められる標準の間隔になる。長さで指定された場合には,その“標準の間隔”に,指定された長さが加えられる。長さには,無理のない範囲で負の値を与えてもよい。

P { font-family: Verdana, Chicago, sans-serif; word-spacing: 1em; }

<P LANG="en">Neutralization is actually a reaction between H<SUP>+</SUP> and OH<SUP>-</SUP>, and generates water.</P>

Neutralization is actually a reaction between H+ and OH-, and generates water.

 単語間スペースは letter-spacing プロパティで指定される文字間隔とは異なり,長さで指定されてもそれから算出される文字間隔に固定されるわけではない。たとえば,text-align プロパティjustify を与えて両端揃えとして整形しようとするとき,単語間スペースはそれを実行するために増減させられることがある。

IE4, 5, 5.5
word-spacing プロパティはサポートされない。

大文字・小文字の操作:text-transform プロパティ

 text-transform プロパティは,欧文などにおいて,テキストの大文字・小文字の操作を行うことができる。

text-transform: キーワード;

 このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード none である。
  • プロパティの値は,継承される。

 キーワードとしては,次の中から 1 つを与える。

capitalize
単語の先頭の文字を大文字にする。
uppercase
単語の文字を大文字にする。
lowercase
単語の文字を小文字にする。
none
大文字・小文字の操作を行わない。

 text-transform プロパティを使用した例をご覧いただこう。

P { font-family: Verdana, Chicago, sans-serif; text-transform: capitalize; }

<P LANG="en">Neutralization is actually a reaction between H<SUP>+</SUP> and OH<SUP>-</SUP>, and generates water.</P>

Neutralization is actually a reaction between H+ and OH-, and generates water.

 実際,何をして大文字・小文字とするのか,それらの変換をいかに行うかは使用する言語による部分も多い。そのような細かい点はともかくとして,欧文でいわゆる“大文字・小文字”の操作を行うプロパティとして認識していただければよいだろう。

空白の扱い:white-space プロパティ

 white-space プロパティは,空白の扱いと折り返しについて指定する。

white-space: キーワード;

このプロパティは,

  • ブロックボックスを描く要素に適用される。
  • 初期値は,キーワード normal である。
  • プロパティの値は,継承される。

キーワードとしては次の中から 1 つを与える。

normal
連続した空白文字(半角空白,改行)は,1 個の空白に“圧縮”される。また,要素の内容を収めるために必要に応じて次の行への“折り返し”が行われる。
pre
normal のときのように連続した空白文字の“圧縮”は起こらない。それぞれの(改行を含む)空白文字は(複数が連続していても)その文字どおりに処理される。HTML の PRE 要素の状態を考えていただければよい。
nowrap
連続した空白文字は,1 個の空白に“圧縮”されるが,“折り返し”は起こらない。改行は,LF(ラインフィード;\0A)を生成することで(たとえば,HTML の BR 要素を用いて)行う。

 要素の内容の“生成”については 4.6 以降を参照されたい。

 white-space プロパティを使用した例をご覧いただこう。

P { line-height: 130%; }
.eq { margin-left: 10%; white-space: nowrap; }
SUB { font-size: 80%; }

<P> 塩素の実験室製法は,酸化マンガン(IV)に塩酸を加えて加熱するというものである。</P>
<P CLASS="eq">MnO<SUB>2</SUB> + 4HCl → MnCl<SUB>2</SUB> + 2H<SUB>2</SUB>O +Cl<SUB>2</SUB>↑</P>

 塩素の実験室製法は,酸化マンガン(IV)に塩酸を加えて加熱するというものである。

MnO2 + 4HCl → MnCl2 + 2H2O +Cl2

 ブラウザの表示領域の幅を狭めるなどして,折り返しが起こらなくなっていることを確認されたい。

IE4, 5
white-space プロパティはサポートされない。