CSS3

プロパティ

initial-letter

[Edge]⛌。→●、mdn

先頭字の作成法。

このプロパティは、［埋没／持ち上げ／沈み込み］先頭字が［占める行数、沈み込む行数］を指定する。

normal

特別な先頭字効果はなし。テキストは通常どおりふるまう。

<number> <integer>

¶

<DIV style="width:200px; border:1px solid red;
 initial-letter:3 2;
">あああああああああああああああああああああああああああああ
</DIV>

<number> && [drop | raise]?

¶

<number>○

先頭字のサイズを、それが占める行数により定義する。1 未満の値は 無効とする。

<integer> ○

省略可能なこの引数は、先頭字が沈み込む行数を定義する。値 1 は 持ち上げ頭字を指示する。1 を超える値は、沈み込み頭字を指示する。1 未満の値は 無効とする。

raise

先頭字が沈み込む行数は、1 に算出される。

drop

先頭字が沈み込む行数は、先頭字が占める行数を超えない最大な正な整数に算出される。

沈み込む行数用の値が省略された場合、drop があるものと見なされる。

normal 以外の値は、影響されるボックスを先頭字ボックスにする ─ それは、フロー内にある行内レベルのボックスであり、特別なレイアウトのふるまいも伴う。

H2 + P::first-letter { initial-letter: 2; }

initial-letter: 3 2

高さ 3 行分、深さ 2 行分を表現する沈み込み頭字：

initial-letter と他の CSS プロパティを併用すれば、テキストに“隣接する先頭字”を作成できる：

P::first-letter {
  initial-letter: 3;
  color: red;
  width: 5em;
  text-align: right;
  margin-left: -5em;
}
P {
  margin-left: 5em;
}

テスト