Um eine einzelne Ligatur in einer Webbeschriftung zu deaktivieren, umschließe ihre Buchstaben mit einem Inline-Span und deaktiviere dort die entsprechende Ligaturfunktion. Für den übrigen Text bleiben die Einstellungen erhalten. CSS bietet keinen allgemeinen Schalter, mit dem sich eine bestimmte Ligatur im gesamten Font deaktivieren lässt. Die Ligatursteuerungen von MDN definieren Funktionskategorien statt einzelner Ersetzungen.

Diese Anleitung richtet sich an Mac-Nutzer, die den HTML- und CSS-Code einer Webseite bearbeiten. Die konkrete Aufgabe besteht darin, das erste fi in der synthetischen Beschriftung fine flake office fine zu trennen, während der übrige Text seine Ligaturen beibehält. Ein kleiner lokaler Test macht den Unterschied zwischen der Änderung eines einzelnen Vorkommens und einer ganzen Funktion sichtbar.

Was lässt sich mit CSS gezielt deaktivieren?

Eine Ligaturfunktion kann mehrere Ersetzungen enthalten. liga zu deaktivieren bedeutet, diese Funktion für den betroffenen Text zu deaktivieren; es bedeutet nicht, ein bestimmtes Buchstabenpaar auszuwählen. Ebenso steuert font-variant-ligatures: no-common-ligatures über liga und clig die gängigen Ligaturen. Welche Ersetzungen tatsächlich auftreten, hängt vom Font ab. MDN: font-variant-ligatures

Entscheidend ist der Unterschied zwischen dem Geltungsbereich einer Einstellung und der gesteuerten Fontfunktion. Mit Markup kannst du die Einstellung auf zwei Buchstaben eingrenzen, selbst wenn die Funktion viele Ligaturen enthält. So erhältst du eine Lösung für ein einzelnes Vorkommen, ohne einen fontweiten Ausschlussschalter zu benötigen.

Gewünschtes Ergebnis Geeigneter Ansatz Voraussetzung
Ein einzelnes Vorkommen von fi trennen Das Vorkommen umschließen und seine Funktion lokal deaktivieren Du kannst das Markup bearbeiten
Optionale Ligaturen entfernen, aber gängige beibehalten no-discretionary-ligatures auf das vorgesehene Element anwenden Die unerwünschte Ersetzung gehört zu dlig
Alle fi entfernen und alle anderen gängigen Ligaturen beibehalten Eine dokumentierte fontspezifische Funktion verwenden, sofern verfügbar Der Font muss die nötige Steuerungsmöglichkeit bieten
Ein einzelnes Vorkommen in einer nicht bearbeitbaren Anwendung ändern In der Dokumentation der Anwendung nach zeichenbezogener Formatierung suchen Web-CSS sagt nichts darüber aus, was eine Desktopanwendung unterstützt

Bevorzuge font-variant-ligatures für die unterstützten Kategorien. MDN empfiehlt, sofern verfügbar, die höherstufigen Font-Eigenschaften zu verwenden; font-feature-settings ermöglicht in anderen Fällen den Zugriff auf niedrigerstufige OpenType-Funktionen. font-feature-settings: \"liga\" off hinzuzufügen, schafft keine paarbezogene Steuerung. MDN: font-feature-settings

Einen lokalen Vergleich auf dem Mac erstellen

Verwende zunächst eine eigenständige Datei, damit du das Ergebnis ohne andere Seitenstile vergleichen kannst. Wähle in TextEdit File > New und anschließend Format > Make Plain Text. Gib das vollständige Beispiel unten ein, speichere es als ligature-demo.html und wähle bei entsprechender Aufforderung Use .html. Dies sind Apples dokumentierte Schritte zum Erstellen einer HTML-Datei in TextEdit. Apple: Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Öffne die gespeicherte Datei in deinem Browser. Das Beispiel verwendet lokal verfügbare Fonts und benötigt weder eine Bibliothek noch einen Download. Die Fontliste dient nur zur Veranschaulichung: Ein sichtbarer Unterschied setzt voraus, dass der ausgewählte Font die betreffenden Ligaturen enthält. Der Browser-Render ist der Test; ein bestimmtes Glyphenbild wird nicht vorausgesetzt.

<!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>

In der mittleren Zeile enthält der Span beide Buchstaben der anvisierten fi. Der übrige Text dieser Zeile übernimmt die Einstellung für gängige Ligaturen. Für diese rein gestalterische Gruppierung eignet sich ein Span: WHATWG definiert ihn als Element, das seine Inhalte ohne eigene zusätzliche Bedeutung darstellt. WHATWG: Das span-Element

Gehe den Vergleich in drei Schritten durch:

  1. Vergleiche die erste fine in der oberen und der mittleren Zeile. Achte auf die Buchstabenformen, nicht nur auf die Gesamtbreite.
  2. Vergleiche flake, office und die letzte fine zwischen diesen Zeilen. Sie liegen außerhalb der Ausnahme und sollten ihre ursprünglichen Funktionseinstellungen beibehalten.
  3. Vergleiche die untere Zeile mit den anderen. Sie dient als umfassendere Kontrolle: In dieser Zeile sind gängige Ligaturen durchgehend deaktiviert.

Wenn alle drei Zeilen gleich aussehen, ist der Vergleich nicht aussagekräftig. Ändere den Testfont in den Font, den du tatsächlich verwenden möchtest, und wähle Buchstabenfolgen, für die dieser Font Ligaturen dokumentiert. Eine CSS-Deklaration kann keine Ersetzung zeigen, die der ausgewählte Font nicht bereitstellt.

Die Ausnahme anwenden, ohne den Textfluss zu stören

Bei einer kurzen Beschriftung setze den Span direkt um die vollständige Buchstabenfolge, die du trennen möchtest. Lasse die Zeichen davor und danach im Quelltext direkt angrenzen, wie im Beispiel mit fi und ne. Füge nicht nur für eine übersichtlichere Darstellung des Markups ein Leerzeichen oder einen Zeilenumbruch mitten im Wort ein.

Der Span benötigt eine Änderung der Funktionseinstellung. Nur einen Buchstaben in einen ansonsten unformatierten Span zu setzen, unterbricht Ligaturen nicht zuverlässig: Laut der Textspezifikation des W3C muss die Textgestaltung über Inline-Grenzen hinweg fortgesetzt werden, wenn keine wirksame Formatierungsänderung vorliegt. Sie nennt außerdem Fälle, in denen Ränder, Rahmen, Innenabstände oder andere Formatierungen die Textgestaltung unterbrechen. W3C: Textgestaltung über Elementgrenzen hinweg

Belasse diese Ausnahme als gewöhnlichen Inline-Span. inline-block, Abstände oder Layout-Wrapper hinzuzufügen, führt weitere Layoutentscheidungen ein, die für diese Aufgabe nicht nötig sind. Nachdem du die typografische Einstellung angewendet hast, verkleinere das Browserfenster und prüfe die Beschriftung in ihrem vorgesehenen Container. Kontrolliere, ob der Zeilenumbruch unverändert bleibt, da eine andere Glyphenwahl den benötigten Platz des Textes verändern kann.

Lege bei längeren Buchstabenfolgen die gewünschte Grenze ausdrücklich fest. Wenn die unerwünschte Ersetzung ffi betrifft, schafft es ebenfalls eine Formatierungsgrenze innerhalb der größeren Folge, nur fi zu umschließen. Prüfe das ganze Wort und die angrenzenden Buchstaben, statt davon auszugehen, dass sich alle überlappenden Ersetzungen unabhängig voneinander verhalten.

Wenn du das Beispiel an eine bestehende Seite anpasst, bearbeite die betreffende Beschriftung in der Quelle oder Komponente. Vermeide es, einen ganzen Absatz anhand seines sichtbaren Textes neu aufzubauen, nur um eine Ausnahme hinzuzufügen; erhalte vorhandene Links, Hervorhebungen und Elementstruktur. Dieses Beispiel behandelt bewusst ein bekanntes Vorkommen, statt eine automatische Ersetzung auf einer beliebigen Seite zu versuchen.

Was tun, wenn die Ligatur bleibt oder andere Ligaturen verschwinden?

Verwende den Vergleich als Diagnoseabfolge, statt sofort weitere Überschreibungen hinzuzufügen.

Prüfe zuerst die Funktionskategorie. Das Beispiel zielt auf gängige Ligaturen. Wenn der Font die unerwünschte Ersetzung unter dlig dokumentiert, wende stattdessen no-discretionary-ligatures auf die Ausnahme an. Eine kontextabhängige Ersetzung kann calt betreffen, das durch no-contextual gesteuert wird; diese Einstellung kann sich auf weitere kontextabhängige Formen im ausgewählten Text auswirken. Die Definitionen der Funktionskategorien von MDN

Prüfe als Nächstes konkurrierende Einstellungen. Eine vorhandene Deklaration font-feature-settings kann die durch font-variant-ligatures vorgegebenen Funktionsauswahlen überschreiben. Laut W3C werden die niedrigstufigen Funktionseinstellungen später bei der Funktionsauflösung angewendet. Prüfe diese Deklaration, bevor du zu dem Schluss kommst, dass der Span-Ansatz nicht unterstützt wird. W3C: Auflösung von Font-Funktionen und -Variationen

Prüfe danach den Geltungsbereich. Wenn andere Wörter Ligaturen verlieren, vergewissere dich, dass die Ausnahmeklasse nur am anvisierten Span angebracht ist. Eine Einstellung auf dem Absatz oder seinem Container wirkt sich auf einen viel größeren Textbereich aus. Im lokalen Beispiel zeigt die untere Zeile absichtlich dieses umfassendere Ergebnis.

Unterscheide schließlich optionale Typografie von erforderlicher Textgestaltung. font-variant-ligatures: none ist umfassender, als diese Aufgabe erfordert, und erforderliche Ligaturen lassen sich damit nicht deaktivieren. Laut W3C bleiben erforderliche Ligaturen durch diese Eigenschaft ausdrücklich erhalten. W3C: Ligaturen

Wenn du einen Ligaturtyp überall entfernen möchtest, muss die lokale Span-Technik auf jedes gewünschte Vorkommen angewendet werden. Eine fontspezifische Funktion kann eine sauberere Lösung bieten, doch ihr Tag und ihre Wirkung müssen aus der Dokumentation des Fonts hervorgehen. Gehe nicht davon aus, dass eine Nummer eines Stilsets in verschiedenen Fonts dieselbe Bedeutung hat.

Bietet eine Textgestaltungsbibliothek eine genauere Steuerung?

HarfBuzz stellt über hb_feature_t Funktionsbereiche bereit: Eine Funktion hat ein Tag, einen Wert, einen inklusiven Start und ein exklusives Ende, angegeben anhand von Clusterwerten. Eine Anwendung, die die Textgestaltungsbibliothek aufruft, kann damit eine Funktionseinstellung auf einen begrenzten Bereich anwenden. Der Bereich ist weiterhin ein Funktionsbereich und kein universeller Selektor für eine bestimmte Ligatur. HarfBuzz: hb_feature_t

Diese API gehört zu einer anderen Ebene als gewöhnliches CSS für Webseiten. Der dokumentierte Mechanismus von HarfBuzz übergibt Funktionsanfragen an hb_shape(). Die Beispiele beschreiben Textgestaltungs-Puffer und Regeln zur Fontsuche, keine zusätzliche Option für Browser-Stylesheets. Für diese Aufgabe mit einer Webbeschriftung auf dem Mac würde eine eigene Textgestaltungspipeline mehr Aufwand verursachen als die Inline-Ausnahme. HarfBuzz: OpenType-Funktionen

Prüfe abschließend das anvisierte Paar, die umgebenden Ligaturen und die Beschriftung bei ihrer tatsächlichen Anzeigebreite. Verwende die kleinste funktionierende Ausnahme: die vollständige unerwünschte Buchstabenfolge in einem Span, die dort deaktivierte passende Funktion und die übrigen Texte mit ihren vorgesehenen Einstellungen.

Quellen