Per disattivare una singola occorrenza di una legatura in un’etichetta web, racchiudi le lettere in uno span inline e disattiva lì la funzionalità di legatura pertinente. Il resto del testo mantiene le proprie impostazioni. CSS non offre un interruttore generale per disattivare una specifica legatura denominata in tutto un font. I controlli per le legature di MDN definiscono categorie di funzionalità, non singole sostituzioni.

Questa guida è pensata per chi usa un Mac e modifica l’HTML e il CSS di una pagina web. L’obiettivo concreto è separare la prima occorrenza di fi nell’etichetta sintetica fine flake office fine, consentendo al resto del testo di mantenere le proprie legature. Un piccolo test locale mostra la differenza tra modificare una sola occorrenza e modificare un’intera funzionalità.

Che cosa può disattivare selettivamente CSS?

Una funzionalità di legatura può contenere più sostituzioni. Disattivare liga significa disattivare quella funzionalità per il testo interessato; non significa selezionare una particolare coppia di lettere. Allo stesso modo, font-variant-ligatures: no-common-ligatures controlla le legature comuni tramite liga e clig. Le sostituzioni effettive dipendono dal font. MDN: font-variant-ligatures

La distinzione utile è tra dove si applica un’impostazione e quale funzionalità del font controlla. Puoi restringere l’impostazione a due lettere con il markup, anche quando la funzionalità contiene molte legature. In questo modo ottieni una soluzione alternativa a livello di singola occorrenza senza bisogno di un interruttore di esclusione valido per tutto il font.

Risultato desiderato Approccio adatto Condizione
Separare una singola occorrenza di fi Racchiudere l’occorrenza e disattivare localmente la funzionalità Puoi modificare il markup
Rimuovere le legature discrezionali mantenendo quelle comuni Usare no-discretionary-ligatures sull’elemento desiderato La sostituzione indesiderata appartiene a dlig
Rimuovere ogni fi mantenendo tutte le altre legature comuni Usare una funzionalità specifica del font e documentata, se disponibile Il font deve offrire il controllo necessario
Modificare una singola occorrenza in un’applicazione che non puoi modificare Cercare la formattazione a livello di carattere documentata per quell’applicazione CSS per il web non determina le funzionalità di un’applicazione desktop

Preferisci font-variant-ligatures per le categorie che supporta. MDN consiglia di usare, quando disponibili, le proprietà di font di livello più alto; font-feature-settings consente di accedere alle funzionalità OpenType di livello più basso negli altri casi. Scrivere font-feature-settings: \"liga\" off non aggiunge un controllo specifico per coppia di lettere. MDN: font-feature-settings

Fai un confronto locale sul Mac

Per prima cosa, usa un file autonomo per confrontare il risultato senza gli stili non pertinenti della pagina. In TextEdit, scegli File > New, poi Format > Make Plain Text. Inserisci l’esempio completo riportato qui sotto, salvalo come ligature-demo.html e, se richiesto, scegli Use .html. Questi sono i passaggi documentati da Apple per creare un file HTML in TextEdit. Apple: Lavorare con documenti HTML in TextEdit sul Mac

Apri il file salvato nel browser. L’esempio usa font disponibili localmente e non richiede librerie o download. L’elenco dei font è solo illustrativo: per notare una differenza, il font selezionato deve contenere le legature pertinenti. Il test consiste nel rendering del browser; non si presume un aspetto specifico dei glifi.

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

Nella riga centrale, lo span contiene entrambe le lettere della fi interessata. Il resto della riga eredita l’impostazione per le legature comuni. Uno span è appropriato per questo raggruppamento puramente stilistico: WHATWG lo definisce come un elemento che rappresenta i propri figli senza aggiungere un significato autonomo. WHATWG: L’elemento span

Esamina il confronto in tre passaggi:

  1. Confronta la prima fine nelle righe di base e centrale. Osserva la forma delle lettere, non soltanto la larghezza totale.
  2. Confronta flake, office e l’ultima fine tra le due righe. Sono al di fuori dell’eccezione e dovrebbero mantenere le impostazioni originali delle funzionalità.
  3. Confronta la riga inferiore con le altre. È il controllo più ampio: in tutta la riga sono disattivate le legature comuni.

Se tutte e tre le righe sembrano identiche, il confronto non è conclusivo. Cambia il font di esempio con quello che intendi effettivamente usare e scegli sequenze di lettere per cui quel font documenta la presenza di legature. Una dichiarazione CSS non può mostrare una sostituzione che il font selezionato non offre.

Applica l’eccezione senza alterare il flusso del testo

Per un’etichetta breve, colloca lo span direttamente intorno all’intera sequenza che vuoi separare. Nel codice sorgente, mantieni adiacenti i caratteri che la precedono e la seguono, come fa l’esempio con fi e ne. Non inserire uno spazio o un a capo nella parola solo per rendere più leggibile il markup.

Lo span deve includere la modifica dell’impostazione della funzionalità. Inserire una sola lettera in uno span senza altri stili non interrompe le legature in modo affidabile: la specifica W3C sul testo richiede che la composizione continui attraverso i confini inline quando non vi è una modifica effettiva della formattazione. Definisce anche i casi in cui margini, bordi, spaziatura interna o altra formattazione interrompono la composizione. W3C: Composizione attraverso i confini degli elementi

Mantieni questa eccezione in un normale span inline. Aggiungere inline-block, spaziatura o contenitori per il layout comporta ulteriori decisioni di impaginazione che non servono per questo obiettivo. Dopo aver applicato l’impostazione tipografica, restringi la finestra del browser e controlla l’etichetta nel contenitore previsto. Verifica che l’andata a capo non sia cambiata, perché una forma diversa del glifo può modificare lo spazio occupato dal testo.

Per sequenze più lunghe, definisci esplicitamente i confini desiderati. Se la sostituzione indesiderata coinvolge ffi, racchiudere solo fi crea anche un confine di formattazione all’interno della sequenza più ampia. Verifica l’intera parola e le lettere adiacenti, invece di presumere che ogni sostituzione sovrapposta si comporti indipendentemente.

Quando adatti l’esempio a una pagina esistente, modifica l’etichetta pertinente nel codice sorgente o nel componente. Evita di ricreare un intero paragrafo a partire dal testo visibile solo per aggiungere un’eccezione; mantieni i link, il testo in evidenza e la struttura degli elementi esistenti. Questo esempio gestisce deliberatamente una singola occorrenza nota, anziché tentare una sostituzione automatica in una pagina qualsiasi.

E se la legatura resta o scompaiono altre legature?

Usa il confronto come sequenza diagnostica, invece di aggiungere subito altri override.

Per prima cosa, controlla la categoria della funzionalità. L’esempio riguarda le legature comuni. Se il font documenta la sostituzione indesiderata sotto dlig, applica invece no-discretionary-ligatures all’eccezione. Una sostituzione contestuale può coinvolgere calt, controllata da no-contextual; questa impostazione può modificare altre forme contestuali all’interno del testo selezionato. Definizioni delle categorie di funzionalità di MDN

Poi, controlla le impostazioni in conflitto. Una dichiarazione font-feature-settings esistente può sovrascrivere le scelte delle funzionalità implicate da font-variant-ligatures. W3C specifica che le impostazioni delle funzionalità di basso livello vengono applicate più avanti durante la risoluzione delle funzionalità. Verifica quella dichiarazione prima di concludere che l’approccio con lo span non sia supportato. W3C: Risoluzione delle funzionalità e delle variazioni del font

Poi, controlla l’ambito. Se altre parole perdono le legature, verifica che la classe dell’eccezione sia associata solo allo span interessato. Un’impostazione applicata al paragrafo o al suo contenitore raggiunge un intervallo di testo molto più ampio. Nell’esempio locale, la riga inferiore mostra deliberatamente questo risultato più esteso.

Infine, distingui la tipografia facoltativa dalla composizione obbligatoria. font-variant-ligatures: none è più ampio di quanto serva per questo obiettivo, e i controlli di disattivazione non riguardano le legature obbligatorie. W3C specifica esplicitamente che questa proprietà preserva le legature obbligatorie. W3C: Legature

Se vuoi rimuovere ovunque un tipo di legatura, la tecnica dello span locale va applicata a ogni occorrenza desiderata. Una funzionalità specifica del font potrebbe offrire una soluzione più semplice, ma il relativo tag e il suo effetto devono provenire dalla documentazione di quel font. Non presumere che un numero di set stilistico abbia lo stesso significato in font diversi.

Una libreria di composizione offre un controllo più preciso?

HarfBuzz espone intervalli di funzionalità tramite hb_feature_t: una funzionalità ha un tag, un valore, un inizio incluso e una fine esclusa, espressi tramite valori di cluster. Questo consente a un’applicazione che chiama la libreria di composizione di applicare un’impostazione a un intervallo limitato. L’intervallo resta riferito a una funzionalità: non è un selettore universale per una singola legatura denominata. HarfBuzz: hb_feature_t

Questa API appartiene a un livello diverso dal normale CSS di una pagina. Il meccanismo documentato di HarfBuzz passa le richieste relative alle funzionalità a hb_shape(). Gli esempi descrivono buffer di composizione e regole di ricerca dei font, non l’aggiunta di un’opzione ai fogli di stile del browser. Per questo lavoro su un’etichetta web sul Mac, introdurre una pipeline di composizione personalizzata aggiungerebbe lavoro oltre l’eccezione inline. HarfBuzz: Funzionalità OpenType

Concludi verificando la coppia interessata, le legature circostanti e l’etichetta alla sua larghezza effettiva di visualizzazione. Mantieni l’eccezione funzionante più semplice: l’intera sequenza indesiderata in un unico span, la funzionalità appropriata disattivata al suo interno e il resto del testo con le impostazioni previste.

Fonti