Sintassi

Significato dei valori principali:

• grandezza (obbligatoria): numero che rappresenta quante righe deve occupare verticalmente la lettera iniziale. Es: 2, 3, 4…

• sporgenza (opzionale): specifica quanto la lettera deve sporgere orizzontalmente nel paragrafo (default: 1). Esempio: initial-letter: 3 2; occupa 3 righe e sporge su 2 lettere.

Esempio proprietà: initial-letter

Codice Esempio: initial-letter

CODE: CSS

1. .dropcap {

2.   font-family: Georgia, serif;

3.   font-size: 18px;

4.   line-height: 1.5;

5.   text-align: justify;

6. }

8. .dropcap::first-letter {

9.   initial-letter: 3;

10.   font-weight: bold;

11.   color: #9b2226;

12.   margin-right: 6px;

13. }

Contenuto Esempio: initial-letter

  
  <style>
    .dropcap {
      font-family: Georgia, serif;
      font-size: 18px;
      line-height: 1.5;
      text-align: justify;
    }

    .dropcap::first-letter {
      initial-letter: 3;
      font-weight: bold;
      color: #9b2226;
      margin-right: 6px;
    }
  </style>

  <p class="dropcap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </p>
  

⚠️ Nota di compatibilità:
Il supporto per initial-letter è limitato. Attualmente è implementata principalmente in Safari/WebKit. Per ottenere risultati simili in altri browser, si può usare un approccio con float + font-size, ma con meno precisione.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser