Aby rozsunąć jedną stłoczoną parę liter, najpierw sprawdź odstępy między znakami i kerning czcionki w nagłówku. W krótkiej łacińskiej nazwie lokalny margines śródliniowy może otworzyć jedną granicę, ale przerywa tam kształtowanie tekstu. Ten poradnik dla Maca wyjaśnia, kiedy taki kompromis jest właściwy.

Czy problem dotyczy odstępów między znakami, kerningu czy lokalnej kolizji?

Ten poradnik jest przeznaczony dla osoby, która edytuje nagłówek na stronie w Macu i może zmieniać jego kod HTML i CSS. Celem jest poprawienie jednej nieestetycznej pary, przy zachowaniu zwykłego układu pozostałego tekstu w przeglądarce. Przykład stanowi fikcyjny nagłówek NOVA STUDIO; nie oznacza to, że te litery kolidują w każdej czcionce.

Odstępy między znakami kontrolują odstępy w całym zaznaczonym tekście. W CSS odpowiada za nie letter-spacing: wartości dodatnie zwiększają odstępy, a ujemne je zmniejszają. Zwiększenie tej właściwości dla całego nagłówka zmienia więc coś więcej niż problematyczną parę. Najpierw sprawdź, czy przyczyną problemu nie jest odziedziczona ujemna wartość. MDN: letter-spacing

Kerning korzysta z informacji o odstępach zapisanych w czcionce. Właściwość CSS font-kerning przyjmuje wartości auto, normal lub none; nie pozwala ustawić własnego odstępu dla określonej pary liter. Ustawienie jej na normal powoduje użycie informacji o kerningu z czcionki, ale nie uzupełni brakującej korekty dla pary ani nie zagwarantuje, że dana kombinacja będzie wyglądać dobrze. MDN: font-kerning

Zanim dodasz znacznik, skorzystaj z tej wskazówki:

Co widzisz Pierwsze działanie Kiedy przejść dalej
Większość odstępów wygląda na zbyt małe Porównaj nagłówek z ustawieniem letter-spacing: normal Przejdź dalej tylko wtedy, gdy jedna para nadal wymaga poprawy
Wygląd nagłówka zmienia się po rozpoczęciu animacji tekstu Porównaj go z oryginalnym, niepodzielonym tekstem Zbadaj sposób podziału tekstu, zanim wprowadzisz poprawki
Jedna granica wygląda na zbyt ciasną w krótkim łacińskim wyrazie, który poza tym wygląda dobrze Rozważ lokalną korektę odstępów Zaakceptuj zmianę kształtowania tekstu na tej granicy
Oryginalne kształtowanie tekstu musi pozostać niezmienione Zachowaj ciągły fragment tekstu i porównaj inną odpowiednią czcionkę lub jej wersję Wybierz sposób renderowania, który działa bez wstawiania granicy

Na oglądanej stronie w Chrome naciśnij Command–Option–C, a następnie kliknij nagłówek. Panel Elements zaznaczy jego kod, a karta Styles pokaże stosowane reguły CSS. Poszukaj reguł nagłówka, dziedziczonych odstępów między znakami oraz elementów otaczających pojedyncze znaki. Te kroki odpowiadają udokumentowanej procedurze dla Chrome na Macu. Otwieranie narzędzi deweloperskich Chrome

Porównuj zmiany przy docelowej czcionce, grubości i rozmiarze nagłówka. Poprawka dobrana dla przykładowego tekstu w Arialu służy wyłącznie demonstracji; właściwą korektę dobierz, oglądając docelowy nagłówek. Zapisz oryginalne deklaracje, aby porównywać pojedyncze zmiany.

Co może zachować lokalna korekta?

Zwykły element span udostępnia zaczep do stylowania, nie nadając sam z siebie żadnego znaczenia. Reprezentuje swoje elementy potomne, więc nagłówek może zachować tekst NOVA STUDIO, a klasa wskazywać prefiks kończący się przy problematycznej granicy. Standard HTML WHATWG: element span

Element śródliniowy i korekta odstępów mają jednak różne konsekwencje. Aktualny projekt rekomendacji kandydującej CSS Text Level 3 W3C stanowi, że kształtowanie tekstu powinno pozostać ciągłe między granicami elementów śródliniowych, o ile nie zmieniają się istotne reguły formatowania. Określa też, że niezerowy margines, obramowanie lub dopełnienie śródliniowe oddzielające znaki przerywa kształtowanie tekstu na tej granicy. Lokalny margines nie może więc zagwarantować zachowania oryginalnego kerningu przez skorygowaną parę. CSS Text Module Level 3: kształtowanie tekstu na granicach elementów

W przykładzie umieść NOV w jednym elemencie śródliniowym i pozostaw bezpośrednio po nim A. Dodanie marginesu końcowego do tego prefiksu otwiera granicę V–A. Pozostałe litery pozostają zwykłym tekstem śródliniowym; nie trzeba tworzyć osobnego elementu dla każdego znaku. W tekście poziomym pisanym od lewej do prawej margin-inline-end odpowiada prawemu marginesowi. MDN: margin-inline-end

To ograniczenie ma znaczenie przy ocenie efektu: widoczna zmiana obejmuje zarówno utratę ewentualnej korekty kształtowania tekstu na tej granicy, jak i dodany margines. Nie musi to być pierwotny odstęp między literami powiększony dokładnie o określoną wartość. Jeśli trzeba zachować oryginalne kształtowanie tekstu, pozostaw ciągły fragment i porównaj czcionki.

Wypróbuj kompletny przykład lokalny na Macu

Utwórz osobny podgląd, zanim dostosujesz tę technikę do nagłówka, którym zarządzasz. W TextEdit wybierz File → New, a potem Format → Make Plain Text. Wklej cały poniższy dokument, zapisz go jako pair-preview.html i w razie pytania wybierz Use .html. Apple opisuje tę procedurę tworzenia plików HTML. Praca z dokumentami HTML w TextEdit na Macu

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Otwórz zapisany dokument w przeglądarce. Pozostaw tekst nagłówka w jednym wierszu źródłowym, tak jak pokazano: między NOV a A nie ma spacji, a przed STUDIO znajduje się jedna zwykła spacja. Dzięki temu treść nazwy pozostaje niezmieniona, bez widocznego ani specjalnego znaku odstępu.

Własna właściwość --pair-gap steruje marginesem na wybranej granicy. Jej początkowa wartość ma charakter poglądowy. Przy rozmiarze czcionki 64px wartość 0.02em odpowiada marginesowi o szerokości 1.28 pikseli CSS; przy 40px odpowiada 0.8 pikselom CSS. Margines skaluje się wraz z rozmiarem tekstu, choć wizualną korektę nadal trzeba sprawdzić. MDN opisuje marginesy em jako zależne od rozmiaru tekstu. MDN: margin-inline-end

Zewnętrzny element span .keep-word stosuje white-space: nowrap tylko do NOVA. Dzięki temu ten krótki wyraz pozostaje w całości, a zwykła spacja przed STUDIO umożliwia zawijanie wiersza. Nie stosuj tej reguły do całego nagłówka, chyba że celowo chcesz uzyskać jeden niepodzielony wiersz. MDN: white-space

Jeśli TextEdit później otworzy plik jako sformatowaną treść, użyj File → Open, wybierz plik, kliknij Show Options i zaznacz Ignore rich text commands. Możesz też włączyć opcję Display HTML files as HTML code instead of formatted text w TextEdit → Settings → Open and Save. Przewodnik Apple po HTML w TextEdit

Jak wybrać najmniejszą użyteczną korektę?

Porównuj ustawienia w kontrolowany sposób zamiast wielokrotnie zwiększać odstęp, aż zacznie przyciągać uwagę:

  1. Ustaw --pair-gap na 0em, zapisz plik i wczytaj go ponownie. Najpierw sprawdź nagłówek bez korekty.
  2. Wypróbuj kolejno 0.01em i 0.02em, zapisując i ponownie wczytując plik między porównaniami. To wartości do testowania, a nie zalecane standardy typograficzne.
  3. Oceń parę wraz z sąsiednimi literami. Zakończ, gdy jej rytm pasuje do reszty wyrazu.
  4. Zwęź okno przeglądarki, aż nagłówek się zawinie. Sprawdź cały nagłówek, nie tylko skorygowane litery.
  5. Powtórz to dla każdego rozmiaru i grubości nagłówka używanych w układzie.

Porównując zerowy i niezerowy margines, uwzględnij ważne zastrzeżenie. Przekroczenie tej granicy wprowadza opisane wcześniej przerwanie kształtowania tekstu, więc pierwsza zmiana może być większa, niż sugeruje wartość liczbowa marginesu. Jeśli już niewielka wartość dodatnia sprawia, że para jest zbyt luźna, usuń obejście i ponownie rozważ czcionkę lub dotychczasowe style nagłówka.

Korekta zajmuje też miejsce w układzie. Litery za granicą przesuwają się wraz z tekstem, a nagłówek zbliżony do dostępnej szerokości może zawinąć się inaczej. Lokalne odstępy pozwalają uniknąć zwiększania odstępów między wszystkimi znakami, ale nie gwarantują zachowania tej samej końcówki wiersza. Przed zachowaniem zmiany sprawdź układ w wąskiej i szerokiej wersji.

Ogranicz element zapobiegający zawijaniu do krótkiego wyrazu. Jeśli sam wyraz jest szerszy niż dostępne miejsce, może wystawać poza obszar. Zmniejsz rozmiar nagłówka w takim układzie albo rozważ usunięcie tego elementu zamiast ukrywania wystającego tekstu. MDN odróżnia kontrolowanie zawijania przez white-space od właściwości pozwalających na podział wyrazów. MDN: white-space

Co zrobić, jeśli nagłówek już korzysta z SplitType?

SplitType to narzędzie animacyjne, które otacza wiersze, wyrazy i znaki elementami. Oficjalna dokumentacja zaleca ustawienie font-kerning: none dla elementów docelowych, aby zapobiec niewielkim przesunięciom znaków podczas dzielenia tekstu lub przywracania jego pierwotnego stanu. To zalecenie dotyczy animacji z użyciem tej biblioteki; jego zastosowanie może zmienić odstępy w całym nagłówku. Dokumentacja SplitType

Jeśli istniejący nagłówek korzysta z SplitType, przed dodaniem kolejnej korekty porównaj go z oryginalnym tekstem. Biblioteka udostępnia metodę instancji instance.revert(), która przywraca oryginalną treść. W implementacji, która ma już instancję SplitType, użyj udokumentowanego cyklu jej życia, aby sprawdzić ten stan. Powyższy przykład HTML nie wymaga tej biblioteki. SplitType: przywracanie tekstu po podziale

Sprawdź też zachowanie przy zmianie rozmiaru. SplitType informuje, że względnie pozycjonowane podziały wyrazów i znaków mogą dopasować się do nowego układu, natomiast po podziale na wiersze lub przy pozycjonowaniu bezwzględnym trzeba ponownie podzielić tekst po zmianie rozmiaru kontenera. Jeśli pozorna kolizja występuje dopiero po zmianie szerokości, zbadaj najpierw to zachowanie układu, zanim wprowadzisz stałą korektę pary. SplitType: tekst responsywny

W przypadku zadania dotyczącego jednej pary praktyczny wniosek jest taki, by nie wprowadzać podziału na znaki wyłącznie po to, by uzyskać uchwyt do zmiany odstępów. Tworzy on więcej granic układu, niż wymaga tego przykład.

Kiedy pozostawić ciągły fragment tekstu?

Użyj przykładu z lokalnym marginesem tylko dla celowo wybranej granicy między prostymi literami łacińskimi. Nie zmieniaj go w rutynę, która otacza elementem każdą pozycję w ciągu znaków. W3C ostrzega, że dzielenie klastrów grafemów lub ligatur granicami elementów może prowadzić do niespójnego lub niepożądanego renderowania. Pozycja znaku w ciągu nie zawsze jest odpowiednim miejscem na przerwanie kształtowania tekstu. CSS Text Module Level 3: znaki i litery

Jeśli trzeba zachować dokładne kształtowanie tekstu, pozostaw nagłówek jako ciągły tekst, porównaj jego natywne ustawienia kerningu i wybierz renderowanie czcionki, które zapewnia zadowalający wygląd pary. Jeśli dopuszczalny jest kontrolowany lokalny wyjątek, dodaj jedną granicę, zastosuj najmniejszy użyteczny margines i wspólnie sprawdź wygląd wyrazu oraz podział wierszy.

Źródła