Om één ligatuur in een weblabel uit te schakelen, zet je de letters ervan in een inline span en schakel je daar de betreffende ligatuurfunctie uit. De instellingen van de overige tekst blijven behouden. CSS heeft geen algemene schakelaar om één benoemde ligatuur in een heel lettertype uit te schakelen. De ligatuurinstellingen van MDN definiëren functiecategorieën en geen afzonderlijke vervangingen.

Deze handleiding is bedoeld voor een Mac-gebruiker die de HTML en CSS van een webpagina bewerkt. De concrete taak is om de eerste fi in het synthetische label fine flake office fine te scheiden, terwijl de ligaturen in de overige tekst behouden blijven. Met een kleine lokale test wordt het verschil zichtbaar tussen één voorkomen aanpassen en een hele functie wijzigen.

Wat kan CSS selectief uitschakelen?

Een ligatuurfunctie kan meerdere vervangingen bevatten. liga uitschakelen betekent dat die functie wordt uitgeschakeld voor de betreffende tekst; het betekent niet dat je een specifiek letterpaar selecteert. Ook font-variant-ligatures: no-common-ligatures regelt gewone ligaturen via liga en clig. De daadwerkelijke vervangingen zijn afhankelijk van het lettertype. MDN: font-variant-ligatures

Het nuttige onderscheid is dat tussen waar een instelling van toepassing is en welke lettertypefunctie deze regelt. Met opmaak kun je de instelling beperken tot twee letters, ook als de functie zelf veel ligaturen bevat. Zo krijg je een oplossing voor één voorkomen zonder dat je een uitschakelaar nodig hebt die het hele lettertype beïnvloedt.

Gewenst resultaat Geschikte aanpak Voorwaarde
Eén voorkomen van fi scheiden Zet dat voorkomen in een span en schakel de functie daar lokaal uit Je kunt de opmaak bewerken
Discretionaire ligaturen verwijderen, maar gewone behouden Gebruik no-discretionary-ligatures op het bedoelde element De ongewenste vervanging valt onder dlig
Elke fi verwijderen en alle andere gewone ligaturen behouden Gebruik indien beschikbaar een gedocumenteerde, lettertypespecifieke functie Het lettertype moet de benodigde instelling bieden
Eén voorkomen wijzigen in een toepassing die je niet kunt bewerken Zoek naar de gedocumenteerde opmaakopties voor afzonderlijke tekens in die toepassing Web-CSS bepaalt niet wat een desktoptoepassing ondersteunt

Gebruik bij voorkeur font-variant-ligatures voor de categorieën die het ondersteunt. MDN raadt aan om waar mogelijk de eigenschappen op een hoger niveau te gebruiken; met font-feature-settings krijg je voor andere gevallen toegang tot OpenType-functies op een lager niveau. font-feature-settings: \"liga\" off schrijven voegt geen specifieke controle voor letterparen toe. MDN: font-feature-settings

Maak een lokale vergelijking op je Mac

Gebruik eerst een zelfstandig bestand, zodat je het resultaat kunt vergelijken zonder niet-gerelateerde paginastijlen. Kies in Teksteditor Archief > Nieuw en daarna Opmaak > Maak platte tekst. Voer het volledige onderstaande voorbeeld in, sla het op als ligature-demo.html en kies Gebruik .html als daarom wordt gevraagd. Dit zijn de door Apple gedocumenteerde stappen om een HTML-bestand te maken in Teksteditor. Apple: Werken met HTML-documenten in Teksteditor op de Mac

Open het opgeslagen bestand in je browser. Het voorbeeld gebruikt lokaal beschikbare lettertypen en vereist geen bibliotheek of download. De lijst met lettertypen is illustratief: een zichtbaar verschil is alleen mogelijk als het geselecteerde lettertype de betreffende ligaturen bevat. De weergave in de browser is de test; er wordt geen specifieke glyphweergave verondersteld.

<!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 de middelste rij bevat de span beide letters van de beoogde fi. De rest van die rij erft de instelling voor gewone ligaturen. Een span is geschikt voor deze puur stilistische groepering: WHATWG definieert het als een element dat zijn kinderen weergeeft zonder zelf betekenis toe te voegen. WHATWG: Het span-element

Doorloop de vergelijking in drie stappen:

  1. Vergelijk de eerste fine in de basisrij en de middelste rij. Let op de lettervormen, niet alleen op de totale breedte.
  2. Vergelijk flake, office en de laatste fine tussen die rijen. Ze vallen buiten de uitzondering en moeten hun oorspronkelijke functie-instellingen behouden.
  3. Vergelijk de onderste rij met de andere rijen. Dit is de bredere controletest: gewone ligaturen zijn in de hele rij uitgeschakeld.

Als alle drie de rijen er hetzelfde uitzien, levert de vergelijking geen uitsluitsel op. Wijzig het voorbeeldlettertype in het lettertype dat je daadwerkelijk wilt gebruiken en kies lettercombinaties waarvoor dat lettertype ligaturen documenteert. Een CSS-declaratie kan geen vervanging aantonen die het geselecteerde lettertype niet biedt.

Pas de uitzondering toe zonder de tekststroom te verstoren

Zet bij een kort label de span direct om de volledige reeks die je wilt scheiden. Houd de tekens ervoor en erna in de bron direct naast elkaar, zoals in het voorbeeld met fi en ne. Voeg geen spatie of nieuwe regel binnen het woord in alleen om de opmaak beter leesbaar te maken.

De span heeft de wijziging van de functie-instelling nodig. Eén letter in een verder onopgemaakte span zetten is geen betrouwbare manier om een ligatuur te doorbreken: volgens de tekstspecificatie van W3C moet tekstvervorming over inline-elementgrenzen heen doorgaan als er geen effectieve opmaakwijziging is. De specificatie beschrijft ook omstandigheden waarin marges, randen, opvulling of andere opmaak de tekstvervorming onderbreken. W3C: Tekstvervorming over elementgrenzen heen

Houd deze uitzondering als een gewone inline span. inline-block, spatiëring of lay-outwrappers toevoegen introduceert extra lay-outkeuzes die voor deze taak niet nodig zijn. Verklein na het toepassen van de typografie-instelling het browservenster en bekijk het label in de beoogde container. Controleer of de regelafbreking ongewijzigd blijft, want een andere glyphkeuze kan de ruimte veranderen die de tekst inneemt.

Bepaal bij langere reeksen expliciet waar de grens moet liggen. Als de ongewenste vervanging ffi betreft, creëer je door alleen fi in een span te zetten ook een opmaakgrens binnen de grotere reeks. Test het hele woord en de aangrenzende letters in plaats van aan te nemen dat elke overlappende vervanging zich onafhankelijk gedraagt.

Bewerk bij het aanpassen van het voorbeeld aan een bestaande pagina het betreffende label in de broncode of component. Bouw niet een hele alinea opnieuw op aan de hand van de zichtbare tekst, alleen om één uitzondering toe te voegen; behoud de bestaande links, nadruk en elementstructuur. Dit voorbeeld behandelt bewust één bekend voorkomen en probeert geen automatische vervanging op een willekeurige pagina uit te voeren.

Wat als de ligatuur blijft staan of andere ligaturen verdwijnen?

Gebruik de vergelijking als een diagnostische reeks in plaats van meteen meer overschrijvingen toe te voegen.

Controleer eerst de functiecategorie. Het voorbeeld richt zich op gewone ligaturen. Als het lettertype de ongewenste vervanging documenteert onder dlig, pas dan no-discretionary-ligatures toe op de uitzondering. Bij een contextafhankelijke vervanging kan calt betrokken zijn, dat wordt geregeld door no-contextual; die instelling kan andere contextafhankelijke vormen binnen de geselecteerde tekst beïnvloeden. Definities van functiecategorieën bij MDN

Controleer daarna instellingen die elkaar beïnvloeden. Een bestaande declaratie van font-feature-settings kan de functiekeuzes overschrijven die voortvloeien uit font-variant-ligatures. W3C specificeert dat de functie-instellingen op laag niveau later worden toegepast tijdens het oplossen van functies. Controleer die declaratie voordat je concludeert dat de span-aanpak niet wordt ondersteund. W3C: Oplossen van lettertypefuncties en variaties

Controleer vervolgens het bereik. Als ligaturen in andere woorden verdwijnen, controleer dan of de uitzonderingsklasse alleen aan de bedoelde span is gekoppeld. Een instelling op de alinea of de container ervan bereikt een veel groter tekstbereik. In het lokale voorbeeld laat de onderste rij dat bredere effect bewust zien.

Maak ten slotte onderscheid tussen optionele typografie en vereiste tekstvervorming. font-variant-ligatures: none is ruimer dan voor deze taak nodig is, en vereiste ligaturen vallen buiten de opties om ligaturen uit te schakelen. W3C behoudt vereiste ligaturen expliciet bij die eigenschap. W3C: Ligaturen

Als je één type ligatuur overal wilt verwijderen, moet je de lokale span-techniek toepassen op elk bedoeld voorkomen. Een lettertypespecifieke functie kan een eenvoudigere oplossing bieden, maar de tag en het effect ervan moeten uit de documentatie van dat lettertype komen. Ga er niet van uit dat een nummer van een stylistische set in verschillende lettertypen dezelfde betekenis heeft.

Biedt een vormgevingsbibliotheek fijnere controle?

HarfBuzz biedt functiegebieden via hb_feature_t: een functie heeft een tag, waarde, inclusief begin en exclusief einde, uitgedrukt met clusternummers. Hiermee kan een toepassing die de vormgevingsbibliotheek aanroept een functie-instelling op een beperkt gebied toepassen. Het gebied blijft een bereik voor een functie en is geen universele selector voor één benoemde ligatuur. HarfBuzz: hb_feature_t

Deze API hoort bij een andere laag dan gewone paginastijlen in CSS. Het gedocumenteerde mechanisme van HarfBuzz geeft functieaanvragen door aan hb_shape(). De voorbeelden beschrijven vormgevingsbuffers en regels voor het opzoeken van lettertypen, niet een optie voor browserstijlen. Voor deze Mac-taak met een weblabel zou een eigen vormgevingspijplijn extra werk opleveren boven op de inline-uitzondering. HarfBuzz: OpenType-functies

Controleer tot slot het beoogde letterpaar, de omliggende ligaturen en het label op de werkelijke weergavebreedte. Houd de uitzondering zo klein mogelijk: de volledige ongewenste reeks in één span, de juiste functie daar uitgeschakeld en de overige tekst met de beoogde instellingen.

Bronnen