La propriété CSS initial-letter vous facilitera grandement 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.
Vérifiez la compatibilité avec initial-letter avec:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Solutions actuelles
Comment styliseriez-vous une initiale en majuscule dans CSS ?
Le pseudo-élément ::first-letter nous aide à y parvenir.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Vous devrez alors probablement utiliser des propriétés telles que "float" lors du calcul de la taille de 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 telles que lh pourrait atténuer certains de ces problèmes. Cependant, leur compatibilité est également 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 initial-letter
La propriété initial-letter vous permet de contrôler plus précisément ce style de première lettre majuscule. 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. Il s'agit du décalage de la lettre. La deuxième valeur est facultative et ne peut pas être négative. Si elle n'est pas présente, la valeur de la taille de la lettre est arrondie à l'entier inférieur le plus proche. Cela équivaut à utiliser le mot clé "drop". Le sink accepte également une autre valeur de mot clé, "raise", qui équivaut à un sink de 1.
Regardez cette démonstration dans laquelle vous pouvez modifier les valeurs pour voir leur impact sur le style des initiales en majuscule.
Combinez-le avec ::first-line pour obtenir quelque chose comme ceci :
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;
}
Ou peut-être un border. Notez que l'exemple suivant utilise le mot clé "drop", qui serait la valeur par défaut s'il était omis et qui é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;
}
Vous pouvez ajouter un background ou des 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 également découper l'arrière-plan pour qu'il s'adapte au 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;
}
Les possibilités sont nombreuses.
Vous pouvez ainsi contrôler plus précisément le style des initiales majuscules avec initial-letter. Voulez-vous ajouter des capitales initiales à votre typographie ? Comment les styliser ? Merci de nous tenir informés.