text-decoration-skip-ink
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS text-decoration-skip-ink définit comment les lignes au-dessus et en dessous du texte sont dessinées lorsqu'elles passent sur les jambages et hampes des glyphes.
Exemple interactif
text-decoration-skip-ink: auto;
text-decoration-skip-ink: none;
<section id="default-example">
<p>
<span class="transition-all" id="example-element">parapsychologues</span>
</p>
</section>
p {
font:
1.9em "Georgia",
serif;
text-decoration: underline;
}
text-decoration-skip-ink ne fait pas partie de la propriété abrégée text-decoration.
Syntaxe
/* Valeur avec un mot-clé */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
/* Valeurs globales */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;
Valeurs
none-
La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.
auto-
Valeur par défaut — le navigateur peut interrompre les soulignements et les lignes au-dessus afin qu'ils ne touchent pas ou ne s'approchent pas trop d'un glyphe. Autrement dit, ils sont interrompus là où ils croiseraient un glyphe.
all-
Le navigateur doit interrompre les soulignements et les lignes au-dessus afin qu'ils ne touchent pas ou ne s'approchent pas trop d'un glyphe. Cela peut être utile avec certaines polices chinoises, japonaises ou coréennes (CJK), où le comportement
autopourrait ne pas créer d'interruptions.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
text-decoration-skip-ink =
auto |
none |
all
Exemples
HTML
<p>Vous devriez partir en quête d'une tasse de café.</p>
<p class="no-skip-ink">Ou peut-être préféreriez-vous du thé ?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
CSS
p {
font-size: 1.5em;
text-decoration: underline blue;
text-decoration-skip-ink: auto; /* c'est la valeur par défaut */
}
.no-skip-ink {
text-decoration-skip-ink: none;
}
.skip-ink-all {
text-decoration-skip-ink: all;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |
Compatibilité des navigateurs
Voir aussi
- La propriété
text-decoration - La propriété
text-decoration-skip