La propriété CSS initial-letter vous simplifie la tâche.
Prise en charge des navigateurs
Où pouvez-vous essayer initial-letter ? Elle est disponible dans Safari et à partir de Chrome 110. Dans Safari, la propriété nécessite le préfixe -webkit-. Il existe un problème ouvert concernant son implémentation dans Firefox.
Testez la compatibilité de initial-letter avec:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Solutions actuelles
Comment définiriez-vous le style d'une "drop cap" dans CSS aujourd'hui ?
Le pseudo-élément ::first-letter nous emmène dans une partie du processus.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Mais vous devrez probablement cibler des propriétés telles que "float" tout en calculant une taille pour cette première lettre.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
L'introduction de nouvelles unités CSS comme lh pourrait atténuer une partie de ce problème. Toutefois, leur compatibilité est limitée (lh n'est actuellement compatible qu'avec Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Présentation de la première lettre
La propriété initial-letter vous permet de contrôler plus précisément ce style de dropcap. Il accepte deux valeurs séparées par un espace:
p::first-letter {
initial-letter: 3.5 3;
}
- Le premier argument définit la taille de la lettre et le nombre de lignes qu'elle occupera. La lettre augmentera tout en conservant ses proportions. Vous ne pouvez pas utiliser de valeur négative, mais vous pouvez utiliser des valeurs décimales.
- Le deuxième argument définit le récepteur de lettres. Cela peut être considéré comme le décalage de l'emplacement de la lettre. La deuxième valeur est facultative et ne peut pas être négative. S'il n'est pas présent, il suppose la valeur minimale de la taille de lettre à l'entier le plus proche. Cela équivaut à utiliser le mot clé "drop". Le récepteur accepte également une autre valeur de mot clé, "raise", qui équivaut à un récepteur de 1.
Dans cette démonstration, vous pouvez modifier les valeurs pour voir comment cela affecte le style de la légende.
En combinant cette fonction avec ::first-line, vous pourriez obtenir un résultat semblable à celui-ci :
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Vous pouvez également lui attribuer un border. Notez que l'exemple suivant utilise le mot clé "drop" qui serait utilisé par défaut en cas d'omission et équivaut à 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Ajoutez peut-être un élément background ou un élément box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
Vous pouvez aussi rogner l'arrière-plan sur le texte:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Vous avez de nombreuses possibilités !
Vous pouvez désormais contrôler plus précisément le style de votre repère avec initial-letter. Ajouteriez-vous des majuscules à votre typographie ? Comment pouvez-vous leur donner un style ? Merci de nous tenir informés.