本節では,テキストを操作するプロパティについて解説する。
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>
中和反応は,本質的には,水溶液中の水素イオンと水酸化物イオンが結合し,水ができる反応である。
このプロパティの振る舞いは,text-align
プロパティの指定状況によって変わってくる。text-align
プロパティに justify
が指定されているときは,テキストの両端をそろえるための文字間隔の調整は,letter-spcing
が normal
のときにしか起こらない。すなわち,このプロパティに長さが指定されているときは,文字間隔は指定された長さで固定され,両端揃えの調整には役をしない。
また,欧文などの合字(リガチャ;“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
を与えて両端揃えとして整形しようとするとき,単語間スペースはそれを実行するために増減させられることがある。
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
pre
normal
のときのように連続した空白文字の“圧縮”は起こらない。それぞれの(改行を含む)空白文字は(複数が連続していても)その文字どおりに処理される。HTML の PRE
要素の状態を考えていただければよい。
nowrap
\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↑
ブラウザの表示領域の幅を狭めるなどして,折り返しが起こらなくなっていることを確認されたい。
white-space
プロパティはサポートされない。