blob: 488867984934d9f6a1a070fcd38a70dcf97ba335 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
title: initial-letter
slug: Web/CSS/initial-letter
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/initial-letter
---
{{CSSRef}}{{SeeCompatTable}}
La propriété **`initial-letter`** permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).
```css
/* Valeurs avec un mot-clé */
initial-letter: normal;
/* Valeurs numériques */
/* Types <number> puis <integer> */
initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */
initial-letter: 3.0; /* La première lettre occupe 3 lignes */
initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
s'enfonce de deux lignes vers le bas */
/* Valeurs globales */
initial-letter: inherit;
initial-letter: initial;
initial-letter: unset;
```
## Syntaxe
La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<number>`) éventuellement suivi d'un entier (`<integer>`).
### Valeurs
- `normal`
- : Le texte se comporte de façon normale et on n'a pas de lettrines.
- `<number>`
- : Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.
- `<integer>`
- : Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### CSS
```css
.exemple {
-webkit-initial-letter: 3.0 2;
initial-letter: 3.0 2;
}
```
### HTML
```html
<p class="exemple">
Un grand rosier se trouvait à l’entrée du jardin ;
les roses qu’il portait étaient blanches, mais trois
jardiniers étaient en train de les peindre en rouge.
</p>
```
### Résultat
{{EmbedLiveSample("Exemples")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
| {{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}} | {{Spec2('CSS3 Inline')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.initial-letter")}}
|
