O webu
First-letter

Zápis

element:first-letter {
  /* styl pro první písmeno */
}

Správně by se asi měly používat dvojtečky dvě (dvě dvojtečky značí pseudo-element), ale fungovalo by to potom jen od IE 9. S jedinou dvojtečkou funguje first-letter i v IE 6 a novějších.

Jedná se tedy o široce podporovaný selektor.

První písmeno bude červené.

Využití

Selektor prvního písmene se hodí minimálně v následujících případech.

Převedení prvního písmena na velké

Kombinací :first-letter a text-transform: uppercase zvětšíme první písmeno nadpisu, odstavce nebo čehokoliv jiného bez úpravy zdrojového kódu.

odstavec v HTML kódu začíná malým písmenem, ale CSS první písmeno zvětší.

Vytvoření zajímavějších stylů

Díky first-letter je možné umocnit efekt kapitálek (font-variant: small-caps). Hodí se například pro zajímavější styl nadpisů.

Text napsaný kapitálkami

Toto první písmeno je více zvětšeno

Zvětšení písmene na začátku textu

Rozplaváním prvního písmene a přidáním marginu dosáhneme požadovaného efektu bez změny HTML kódu.

První písmeno bude výrazně zvětšené a další text kolem něj bude obtékat klidně dva řádky.

Nevýhoda je, že musíme skloubit:

  1. velikost písma,
  2. styl písma,
  3. odsazení,
  4. výšku řádku

Aby to nějak vypadalo. Když se některá z výše uvedených hodnot změní, bude nejspíš nutné si hodnotami laborovat znovu.

Tento problém by v budoucnu mohla řešit CSS vlastnost initial-letter. Nyní to umí řešit skript dropcap.js.

Odkazy jinam