Pour désactiver une occurrence de ligature dans un libellé Web, encadrez ses lettres d’un élément span en ligne et désactivez-y la fonctionnalité de ligature concernée. Le reste du texte conserve ses paramètres. CSS ne propose pas de commande générale permettant de désactiver une ligature nommée dans toute une police. Les commandes de MDN relatives aux ligatures définissent des catégories de fonctionnalités plutôt que des substitutions individuelles.

Ce guide s’adresse à une personne utilisant un Mac et modifiant le HTML et le CSS d’une page Web. La tâche concrète consiste à isoler le premier fi dans le libellé synthétique fine flake office fine, tout en permettant au reste du texte de conserver ses ligatures. Un petit test local permet de voir la différence entre la modification d’une seule occurrence et celle d’une fonctionnalité entière.

Que peut-on désactiver sélectivement avec CSS ?

Une fonctionnalité de ligature peut comporter plusieurs substitutions. Désactiver liga revient à désactiver cette fonctionnalité pour le texte concerné ; cela ne revient pas à sélectionner une paire de lettres particulière. De même, font-variant-ligatures: no-common-ligatures contrôle les ligatures courantes via liga et clig. Les substitutions réelles dépendent de la police. MDN : font-variant-ligatures

Il est utile de distinguer la portée d’un paramètre de la fonctionnalité de police qu’il contrôle. Vous pouvez limiter le paramètre à deux lettres grâce au balisage, même si la fonctionnalité contient de nombreuses ligatures. Vous disposez ainsi d’une solution de contournement à l’échelle d’une occurrence, sans avoir besoin d’une commande d’exclusion pour toute la police.

Résultat souhaité Approche adaptée Condition
Séparer une occurrence de fi Encadrer cette occurrence et désactiver localement sa fonctionnalité Vous pouvez modifier le balisage
Supprimer les ligatures discrétionnaires tout en conservant les ligatures courantes Utiliser no-discretionary-ligatures sur l’élément visé La substitution indésirable relève de dlig
Supprimer toutes les occurrences de fi tout en conservant toutes les autres ligatures courantes Utiliser une fonctionnalité propre à la police, si elle est documentée La police doit fournir le contrôle nécessaire
Modifier une occurrence dans une application que vous ne pouvez pas éditer Rechercher les options de mise en forme au niveau des caractères documentées pour cette application Le CSS Web ne permet pas de savoir ce qu’une application de bureau prend en charge

Privilégiez font-variant-ligatures pour les catégories qu’il prend en charge. MDN recommande les propriétés de police de plus haut niveau lorsqu’elles sont disponibles ; font-feature-settings donne accès aux fonctionnalités OpenType de plus bas niveau dans les autres cas. Écrire font-feature-settings: \"liga\" off n’ajoute pas de contrôle propre à une paire. MDN : font-feature-settings

Effectuer une comparaison locale sur votre Mac

Commencez par utiliser un fichier autonome pour comparer le résultat sans styles de page sans rapport. Dans TextEdit, choisissez Fichier > Nouveau, puis Format > Convertir au format texte. Saisissez l’exemple complet ci-dessous, enregistrez-le sous le nom ligature-demo.html, puis choisissez Utiliser .html si vous y êtes invité. Voici les étapes documentées par Apple pour créer un fichier HTML dans TextEdit. Apple : Utiliser des documents HTML dans TextEdit sur Mac

Ouvrez le fichier enregistré dans votre navigateur. L’exemple utilise des polices disponibles localement et ne nécessite ni bibliothèque ni téléchargement. La liste de polices est fournie à titre d’exemple : une différence visible suppose que la police sélectionnée contient les ligatures concernées. Le test consiste à observer le rendu du navigateur ; aucune apparence particulière des glyphes n’est présupposée.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

Dans la ligne du milieu, le span contient les deux lettres du fi visé. Le reste de cette ligne hérite du paramètre des ligatures courantes. Un span convient à ce regroupement purement stylistique : WHATWG le définit comme un élément qui représente ses enfants sans leur conférer de sens propre. WHATWG : L’élément span

Examinez la comparaison en trois temps :

  1. Comparez le premier fine des lignes de référence et du milieu. Observez la forme des lettres, pas seulement la largeur totale.
  2. Comparez flake, office et le dernier fine entre ces lignes. Ils sont en dehors de l’exception et doivent conserver leurs paramètres de fonctionnalité d’origine.
  3. Comparez la ligne du bas aux autres. Il s’agit du contrôle plus général : les ligatures courantes sont désactivées dans toute cette ligne.

Si les trois lignes semblent identiques, la comparaison n’est pas concluante. Remplacez la police de l’exemple par celle que vous comptez réellement utiliser, et choisissez des suites de lettres pour lesquelles cette police documente des ligatures. Une déclaration CSS ne peut pas montrer une substitution que la police sélectionnée ne fournit pas.

Appliquer l’exception sans perturber le flux du texte

Pour un libellé court, placez le span directement autour de toute la suite que vous souhaitez séparer. Laissez les caractères qui la précèdent et la suivent adjacents dans le code source, comme dans l’exemple avec fi et ne. N’insérez ni espace ni saut de ligne au milieu du mot simplement pour faciliter la lecture du balisage.

Le span doit modifier le paramètre de fonctionnalité. Placer simplement une lettre dans un span sans autre style ne suffit pas à interrompre les ligatures de façon fiable : la spécification de texte du W3C exige que la mise en forme continue au-delà des limites des éléments en ligne lorsqu’aucun changement de mise en forme effectif n’intervient. Elle définit aussi des situations dans lesquelles les marges, bordures, marges internes ou autres styles interrompent la mise en forme. W3C : mise en forme au-delà des limites des éléments

Gardez cette exception dans un span en ligne ordinaire. Ajouter inline-block, de l’espacement ou des conteneurs de mise en page introduirait des décisions supplémentaires dont la tâche n’a pas besoin. Après avoir appliqué le paramètre typographique, réduisez la largeur de la fenêtre du navigateur et examinez le libellé dans son conteneur prévu. Vérifiez que le retour à la ligne n’a pas changé, car le choix d’un glyphe différent peut modifier l’espace occupé par le texte.

Pour les suites plus longues, définissez explicitement la limite souhaitée. Si la substitution indésirable concerne ffi, encadrer uniquement fi crée aussi une limite de mise en forme à l’intérieur de la suite plus longue. Testez le mot complet et les lettres adjacentes au lieu de supposer que chaque substitution qui se chevauche fonctionnera indépendamment.

Pour adapter l’exemple à une page existante, modifiez le libellé concerné dans son code source ou son composant. Évitez de reconstruire un paragraphe entier à partir de son texte visible pour ajouter une seule exception ; conservez ses liens, ses mises en évidence et sa structure d’éléments. Cet exemple traite délibérément une occurrence connue au lieu de tenter un remplacement automatique dans une page quelconque.

Que faire si la ligature reste présente ou si d’autres ligatures disparaissent ?

Utilisez la comparaison comme séquence de diagnostic au lieu d’ajouter immédiatement d’autres règles de remplacement.

Commencez par vérifier la catégorie de fonctionnalité. L’exemple cible les ligatures courantes. Si la police documente la substitution indésirable sous dlig, appliquez plutôt no-discretionary-ligatures à l’exception. Une substitution contextuelle peut impliquer calt, contrôlée par no-contextual ; ce paramètre peut avoir un effet sur d’autres formes contextuelles dans le texte sélectionné. Définitions des catégories de fonctionnalités de MDN

Vérifiez ensuite les paramètres concurrents. Une déclaration font-feature-settings existante peut remplacer les choix de fonctionnalités impliqués par font-variant-ligatures. Le W3C précise que les paramètres de fonctionnalité de bas niveau sont appliqués plus tard, lors de la résolution des fonctionnalités. Examinez cette déclaration avant de conclure que l’approche avec span n’est pas prise en charge. W3C : résolution des fonctionnalités de police et des variations

Vérifiez ensuite la portée. Si d’autres mots perdent leurs ligatures, vérifiez que la classe d’exception est appliquée uniquement au span visé. Un paramètre appliqué au paragraphe ou à son conteneur s’étend à une portion de texte bien plus grande. Dans l’exemple local, la ligne du bas montre délibérément ce résultat plus général.

Enfin, distinguez la typographie facultative de la mise en forme requise. font-variant-ligatures: none a une portée plus large que nécessaire ici, et ses commandes de désactivation ne concernent pas les ligatures requises. Le W3C précise que cette propriété préserve les ligatures requises. W3C : ligatures

Si l’objectif est de supprimer partout un type de ligature, la technique du span local doit être appliquée à chaque occurrence visée. Une fonctionnalité propre à la police peut offrir une solution plus simple, mais son identifiant et son effet doivent être tirés de la documentation de cette police. Ne supposez pas qu’un numéro de jeu stylistique a le même sens d’une police à l’autre.

Une bibliothèque de mise en forme du texte offre-t-elle un contrôle plus précis ?

HarfBuzz expose les plages de fonctionnalités via hb_feature_t : une fonctionnalité comporte une balise, une valeur, un début inclus et une fin exclue, exprimés au moyen de valeurs de clusters. Une application qui appelle cette bibliothèque de mise en forme peut ainsi appliquer un paramètre de fonctionnalité à une plage limitée. Cette plage reste une plage associée à une fonctionnalité, et ne constitue pas un sélecteur universel pour une ligature nommée. HarfBuzz : hb_feature_t

Cette API relève d’une couche différente du CSS ordinaire d’une page. Le mécanisme documenté de HarfBuzz transmet les demandes de fonctionnalités à hb_shape(). Ses exemples décrivent des tampons de mise en forme et des règles de recherche de polices, plutôt que l’ajout d’une option de feuille de style pour navigateur. Pour cette tâche de libellé Web sur Mac, mettre en place une chaîne de mise en forme personnalisée ajouterait du travail au-delà de l’exception en ligne. HarfBuzz : fonctionnalités OpenType

Pour finir, vérifiez la paire visée, les ligatures environnantes et le libellé à sa largeur d’affichage réelle. Conservez l’exception minimale qui fonctionne : toute la suite indésirable dans un seul span, la fonctionnalité appropriée désactivée dans celui-ci, et le reste du texte conservant les paramètres prévus.

Sources