font-variant-ligatures - Propriété CSS
Résumé des caractéristiques de la propriété font-variant-ligatures
normal
| none
| common-ligatures
| no-common-ligatures
| historical-ligatures
| no-historical-ligatures
| discretionary-ligatures
| no-discretionary-ligatures
| contextual
| no-contextual
normal
font-variant-ligatures
passe d'une valeur à l'autre sans transition.Description de la propriété font-variant-ligatures
.
font-variant-ligatures
permet d'activer ou désactiver la ligature des caractères, c'est à dire le fait que certaines lettres,
lorsqu'elles se suivent peuvent être reliées entre elles, ou même former un nouvelle lettre.
Voici les ligatures les plus courantes :
Les principaux caractères liés existent dans le jeu Unicode, mais ils ne sont pas disponibles directement au clavier :
il faut connaître leur code (ou l'entité HTML pour les utiliser). Les polices OTF
offre la possibilité
de remplacer automatiquement certaines paires de lettres par le caractère lié correspondant.
C'est évidemment beaucoup plus simple pour les auteurs, qui peuvent taper leur texte, sans entrer dans le codage
informatique.
font-variant-ligatures
est la propriété la plus simple à utiliser, mais vous pouvez aussi vous renseigner sur la propriété résumée font-variant
qui permet
d'activer ou désactiver plusieurs options des polices OTF
en une seule écriture.
Quant à font-feature-settings
, c'est une propriété beaucoup plus complexe à utiliser, mais qui permet une gestion bas niveau de toutes les possibilités
des polices OTF.
Quelques précisions sur les ligatures.
Une ligature consiste donc à remplacer une paire de lettres par un autre caractère, plus esthétique ou plus lisible.
Le jeu de caractères Unicode comporte de nombreuses lettres ligaturées comme œ
, æ
,
fi
, etc. mais pour que le remplacement puisse être automatique (ce que prétend faire font-variant-ligatures
,
il faut en plus que la police comporte une table de substitution, afin que le navigateurs sache par quoi remplacer les
paires de lettres.
Bien entendu l'auteur de la page a toujours la possibilité d'utiliser les entités HTML afin d'imposer les caractères de son choix mais les navigateurs peuvent à présent prendre ce travail à leur charge.
Les ligatures sont des subtilités typographiques : on pourrait tout simplement les ignorer. Mais les tablettes de lecture, les livres numériques sont de plus en plus nombreux : Kindle de Amazon, Kobo, Pocket Book, etc. Il serait dommage que ces livres numériques fassent moins bien que leurs prédécesseurs, les livres papier.
Plusieurs types de ligatures :
Les ligatures orthographiques.
Ne pas utiliser ces ligatures est considéré comme une faute d'orthographe.
Les correcteurs signalent d'ailleurs ces oublis.
En français, ce sont essentiellement les deux caractères œ
et æ
,
qui existent aussi en majuscules Œ
et Æ
.
Les autres langues comportent aussi leurs ligatures orthographiques comme ß en allemand.
Les ligatures esthétiques.
Certaines lettres, lorsqu'elles se suivent, ont des formes qui se chevauchent ou qui rendent
un résultat peu esthétique pour les puristes.
C'est surtout le cas avec les polices à empattements comme 'Times new Roman'.
Par exemple, le f
suivi d'un i
fait que le point du i
vient percuter la boucle du f
. On pourra avantageusement remplacer ces
deux lettres par le caractère fi
.
Une autre ligature est très couramment utilisée, celle qui consiste à remplacer les lettres
e
et t
par &
.
Les ligatures optionnelles.
Certains créateurs de polices de caractères ne se privent pas de dessiner non seulement toutes les lettres individuelles mais également des caractères de remplacement pour de nombreuses paires de caractères. L'auteur peut activer ces ligatures complémentaires mais le résultat sera fortement lié à la police utilisée.
Les ligatures historiques.
Elles sont un peu tombées dans l'oubli mais il peut être intéressant de les ressortir pour créer un effet de typographie à l'ancienne. Malheureusement, très peu de polices comportent ces caractères.
Pour en savoir plus sur les ligatures.
Si vous souhaitez approfondir cette notion de ligature, nous vous recommandons cette page, très précise et détaillée : Les ligatures dans les navigateurs.
Syntaxes pour font-variant-ligatures
.
La police de caractères utilisée pour les exemples et le simulateur est la police Kleymissky
(copyright gluk).
- font-variant-ligatures: normal;
Valeur par défaut. Les caractères sont restitués tels qu'ils dont définis par défaut dans la police. Certaines ligatures sont utilisées, d'autres non. En général cette valeur est équivalente à
common-ligatures
etcontextual
.L fi ff - font-variant-ligatures: none;
Aucune ligature n'est utilisée.
L fi ff - font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures;
Activation ou désactivation des ligatures les plus communes : par exemple fi => fi
Correspond aux styles OTF
liga
etclig
. Reportez-vous à la propriétéfont-feature-settings
pour une description plus complète des possibilités des polices Open Type.L fi ffcommon-ligatures
L fi ffno-common-ligatures
- font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures;
Activation ou désactivation des ligatures spécifiques à la police utilisée.
Correspond au style OTF
dlig
.L fi ffdiscretionary-ligatures
L fi ffno-discretionary-ligatures
- font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures;
Activation ou désactivation des ligatures telles qu'elles étaient utilisées en imprimerie mécanique, comme par exemple fz => β.
Correspond au style OTF
hlig
.L fi ffhistorical-ligatures
L fi ffno-historical-ligatures
- font-variant-ligatures: contextual; font-variant-ligatures: no-contextual;
Activation ou désactivation des ligatures contextuelles.
Correspond au style OTF
calt
.L fi ffcontextual
L fi ffno-contextual
- font-variant-ligatures:
initial
; font-variant-ligatures:inherit
; font-variant-ligatures:revert
; font-variant-ligatures:revert-layer
; font-variant-ligatures:unset
;La valeur initiale est :
.normal
Animation de la propriété font-variant-ligatures
.
Les trois animations ci-dessous font bien ressortir les différences de comportement de chacune des polices de caractères. Et donc en conséquence, la difficulté de gérer les ligatures autrement que de façon spécifique à la police utilisée.
Kleymissky
ajoute bien une ligature entre lef
et lei
, mais ajoute également des boucles sur les premières et dernières lettres de chaque mot. Ce qui ne devrait pas être inclus dans les ligatures.Warnock
applique également les ligatures sur les paires de lettresst
etct
. Ce que les autres polices ne font pas.- Quant à
Comic Jens
il s'agit d'une police de caractères humoristique avec des ligatures tout à fait spécifiques : on voit les trois lettresLOL
en majuscules ou en minuscules, devenir un nouveau symbole.
fin effet
Kleymissky
fin effet
Warnock
LOL lol
Comic Jens
Simulateur.
L'effet de la propriété font-variant-ligatures
est très dépendant de la police utilisée.
Observez surtout les paires de caractères fi
et ff
, qui sont le plus souvent traitées.
if ij IJ fi ff tf ft jf fj sz ct st
Prise en charge par les navigateurs (compatibilité).
La propriété font-variant-ligatures
est bien reconnue par les navigateurs actuels, mais il faut garder à l'esprit que
son effet est très dépendant de la police utilisée.
font-variant-ligatures
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que font-variant-ligatures
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant-ligatures
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.