Aby wyłączyć jedno wystąpienie ligatury w etykiecie internetowej, umieść jej litery w elemencie span wyświetlanym w wierszu i wyłącz w nim odpowiednią funkcję ligatur. Pozostały tekst zachowuje swoje ustawienia. CSS nie ma ogólnego przełącznika, który wyłączałby jedną nazwaną ligaturę w całej czcionce. Opcje ligatur w MDN definiują kategorie funkcji, a nie poszczególne zamiany.

Ten poradnik jest przeznaczony dla użytkownika Maca edytującego HTML i CSS strony internetowej. Konkretne zadanie polega na oddzieleniu pierwszego fi w sztucznej etykiecie fine flake office fine, przy jednoczesnym zachowaniu ligatur w pozostałym tekście. Niewielki test lokalny pozwala zobaczyć różnicę między zmianą jednego wystąpienia a zmianą całej funkcji.

Co można selektywnie wyłączyć w CSS?

Funkcja ligatur może obejmować wiele zamian. Wyłączenie liga oznacza wyłączenie tej funkcji dla wskazanego tekstu; nie oznacza wybrania konkretnej pary liter. Podobnie font-variant-ligatures: no-common-ligatures steruje ligaturami zwykłymi przez liga i clig. Konkretne zamiany zależą od czcionki. MDN: font-variant-ligatures

Przydatne rozróżnienie dotyczy miejsca zastosowania ustawienia i kontrolowanej przez nie funkcji czcionki. Możesz ograniczyć ustawienie do dwóch liter za pomocą znaczników, nawet jeśli sama funkcja obejmuje wiele ligatur. Dzięki temu możesz zastosować obejście na poziomie pojedynczego wystąpienia bez potrzeby wyłączania ligatur w całej czcionce.

Oczekiwany wynik Odpowiednie podejście Warunek
Rozdzielenie jednego wystąpienia fi Umieszczenie tego wystąpienia w elemencie span i lokalne wyłączenie jego funkcji Możesz edytować znaczniki
Usunięcie ligatur ozdobnych przy zachowaniu zwykłych Użycie no-discretionary-ligatures na wybranym elemencie Niepożądana zamiana należy do dlig
Usunięcie wszystkich fi przy zachowaniu wszystkich pozostałych zwykłych ligatur Użycie udokumentowanej funkcji specyficznej dla czcionki, jeśli jest dostępna Czcionka musi zapewniać niezbędną kontrolę
Zmiana jednego wystąpienia w aplikacji, której nie możesz edytować Sprawdzenie udokumentowanych opcji formatowania pojedynczych znaków w tej aplikacji CSS dla stron internetowych nie określa, co obsługuje aplikacja komputerowa

W przypadku obsługiwanych kategorii wybieraj font-variant-ligatures. MDN zaleca używanie właściwości czcionek wyższego poziomu, gdy są dostępne; font-feature-settings zapewnia dostęp do funkcji OpenType niższego poziomu w innych przypadkach. Zapis font-feature-settings: \"liga\" off nie dodaje kontroli dla konkretnej pary. MDN: font-feature-settings

Wykonaj lokalne porównanie na Macu

Najpierw użyj samodzielnego pliku, aby porównać wynik bez wpływu innych stylów strony. W TextEdit wybierz Plik > Nowy, a następnie Format > Zamień na zwykły tekst. Wpisz cały poniższy przykład, zapisz go jako ligature-demo.html i, jeśli pojawi się odpowiedni monit, wybierz Użyj .html. Są to instrukcje Apple dotyczące tworzenia pliku HTML w TextEdit. Apple: Praca z dokumentami HTML w TextEdit na Macu

Otwórz zapisany plik w przeglądarce. Przykład korzysta z lokalnie dostępnych czcionek i nie wymaga biblioteki ani pobierania plików. Lista czcionek jest przykładowa: widoczna różnica wymaga, aby wybrana czcionka zawierała odpowiednie ligatury. Testem jest renderowanie w przeglądarce; nie zakładamy określonego wyglądu glifu.

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

W środkowym wierszu element span obejmuje obie litery docelowego fi. Pozostała część tego wiersza dziedziczy ustawienie zwykłych ligatur. Element span pasuje do takiego grupowania służącego wyłącznie stylizacji: WHATWG definiuje go jako element, który reprezentuje swoje elementy potomne, nie nadając im własnego znaczenia. WHATWG: Element span

Odczytaj porównanie w trzech krokach:

  1. Porównaj pierwsze fine w wierszu bazowym i środkowym. Zwróć uwagę na kształty liter, nie tylko na całkowitą szerokość.
  2. Porównaj flake, office i końcowe fine w obu wierszach. Znajdują się poza wyjątkiem i powinny zachować pierwotne ustawienia funkcji.
  3. Porównaj dolny wiersz z pozostałymi. To szersza kontrola: zwykłe ligatury są w nim wyłączone na całej długości wiersza.

Jeśli wszystkie trzy wiersze wyglądają identycznie, porównanie nie daje rozstrzygającego wyniku. Zmień przykładową czcionkę na tę, której zamierzasz użyć, i wybierz sekwencje liter, dla których ta czcionka ma udokumentowane ligatury. Deklaracja CSS nie może pokazać zamiany, której wybrana czcionka nie zapewnia.

Zastosuj wyjątek bez zakłócania przepływu tekstu

W krótkiej etykiecie umieść element span bezpośrednio wokół całej sekwencji, którą chcesz rozdzielić. Pozostaw sąsiadujące z nią znaki przed i po niej bezpośrednio obok siebie w kodzie źródłowym, tak jak w przykładzie z fi i ne. Nie wstawiaj spacji ani znaku nowego wiersza wewnątrz słowa tylko po to, by ułatwić czytanie znaczników.

Element span wymaga zmiany ustawienia funkcji. Umieszczenie jednej litery w elemencie span bez innych stylów nie jest niezawodnym sposobem na przerwanie ligatury: specyfikacja tekstu W3C wymaga kontynuowania kształtowania tekstu przez granice elementów wyświetlanych w wierszu, jeśli nie ma skutecznej zmiany formatowania. Określa też sytuacje, w których marginesy, obramowania, dopełnienie lub inne formatowanie przerywają kształtowanie tekstu. W3C: Kształtowanie tekstu na granicach elementów

Pozostaw ten wyjątek jako zwykły element span wyświetlany w wierszu. Dodanie inline-block, odstępów lub kontenerów układu wprowadza dodatkowe decyzje dotyczące układu, których to zadanie nie wymaga. Po zastosowaniu ustawienia typograficznego zwęź okno przeglądarki i sprawdź etykietę w docelowym kontenerze. Sprawdź, czy zmienił się podział wierszy, ponieważ inny kształt glifu może wpłynąć na zajmowane miejsce.

W przypadku dłuższych sekwencji wyraźnie określ zamierzoną granicę. Jeśli niepożądana zamiana dotyczy ffi, objęcie elementem span tylko fi tworzy też granicę formatowania wewnątrz dłuższej sekwencji. Sprawdź całe słowo i sąsiednie litery, zamiast zakładać, że każda nakładająca się zamiana zadziała niezależnie.

Przenosząc przykład na istniejącą stronę, edytuj odpowiednią etykietę w jej kodzie źródłowym lub komponencie. Nie przebudowuj całego akapitu na podstawie widocznego tekstu tylko po to, by dodać jeden wyjątek; zachowaj istniejące odnośniki, wyróżnienia i strukturę elementów. Ten przykład celowo obsługuje jedno znane wystąpienie, a nie próbuje automatycznie wprowadzać zmian w dowolnej stronie.

Co zrobić, jeśli ligatura pozostaje albo znikają inne ligatury?

Potraktuj porównanie jako sekwencję diagnostyczną, zamiast od razu dodawać kolejne reguły nadpisujące.

Najpierw sprawdź kategorię funkcji. Przykład dotyczy zwykłych ligatur. Jeśli czcionka dokumentuje niepożądaną zamianę w ramach dlig, zastosuj no-discretionary-ligatures zamiast tego do wyjątku. Zamiana kontekstowa może dotyczyć calt, kontrolowanego przez no-contextual; to ustawienie może wpłynąć na inne formy kontekstowe w wybranym tekście. Definicje kategorii funkcji w MDN

Następnie sprawdź ustawienia, które mogą ze sobą kolidować. Istniejąca deklaracja font-feature-settings może nadpisywać wybory funkcji wynikające z font-variant-ligatures. W3C określa, że niskopoziomowe ustawienia funkcji są stosowane później, podczas rozstrzygania ustawień. Sprawdź tę deklarację, zanim uznasz, że podejście z elementem span nie działa. W3C: Rozstrzyganie funkcji i wariantów czcionek

Następnie sprawdź zakres. Jeśli ligatury znikają w innych słowach, upewnij się, że klasa wyjątku jest przypisana tylko do docelowego elementu span. Ustawienie zastosowane do akapitu lub jego kontenera obejmie znacznie większy zakres tekstu. W lokalnym przykładzie dolny wiersz celowo pokazuje ten szerszy efekt.

Na koniec odróżnij typografię opcjonalną od obowiązkowego kształtowania tekstu. font-variant-ligatures: none ma szerszy zakres, niż wymaga to zadanie, a obowiązkowe ligatury nie podlegają wyłączaniu za pomocą tej właściwości. W3C wyraźnie zachowuje obowiązkowe ligatury dla tej właściwości. W3C: Ligatury

Jeśli celem jest usunięcie wszędzie jednego rodzaju ligatur, technikę z lokalnym elementem span trzeba zastosować do każdego odpowiedniego wystąpienia. Funkcja specyficzna dla czcionki może być prostszym rozwiązaniem, ale jej tag i działanie muszą wynikać z dokumentacji tej czcionki. Nie zakładaj, że numer zestawu stylistycznego ma takie samo znaczenie w różnych czcionkach.

Czy biblioteka kształtowania tekstu zapewnia dokładniejszą kontrolę?

HarfBuzz udostępnia zakresy funkcji za pomocą hb_feature_t: funkcja ma tag, wartość, włączne położenie początkowe i wyłączne położenie końcowe określone przez wartości klastrów. Dzięki temu aplikacja korzystająca z biblioteki kształtowania tekstu może zastosować ustawienie funkcji do ograniczonego zakresu. Nadal jest to zakres dotyczący funkcji, a nie uniwersalny selektor jednej nazwanej ligatury. HarfBuzz: hb_feature_t

To API należy do innej warstwy niż zwykły CSS strony. Udokumentowany mechanizm HarfBuzz przekazuje żądania funkcji do hb_shape(). Przykłady opisują bufory kształtowania tekstu i reguły wyszukiwania czcionek, a nie dodanie opcji do arkusza stylów przeglądarki. W przypadku tego zadania z etykietą internetową na Macu wprowadzenie własnego procesu kształtowania tekstu wymagałoby dodatkowej pracy, wykraczającej poza lokalny wyjątek. HarfBuzz: Funkcje OpenType

Na koniec sprawdź docelową parę liter, otaczające ją ligatury i etykietę przy rzeczywistej szerokości wyświetlania. Zachowaj najmniejszy działający wyjątek: cała niepożądana sekwencja wewnątrz jednego elementu span, odpowiednia funkcja wyłączona w tym miejscu i zamierzone ustawienia zachowane dla pozostałego tekstu.

Źródła