Aby znak interpunkcyjny poprzedzony odstępem pozostał przy poprzedzającym go słowie na stronie internetowej, zastąp zwykłą spację spacją nierozdzielającą albo obejmij oba elementy niewielkim elementem span CSS z ustawieniem zapobiegającym zawijaniu. Na Macu użyj lokalnego testu HTML, aby sprawdzić wynik przy różnych szerokościach.

Ten poradnik jest przeznaczony dla osób edytujących tekst lub kod HTML strony na Macu, na przykład etykietę kafelka abstrakcyjnego, taką jak Beta : w wąskiej karcie. Celem jest zachowanie widocznego odstępu przy jednoczesnym zapobieganiu przeniesieniu dwukropka do następnego wiersza. Przykłady celowo zachowują ten odstęp.

Które rozwiązanie wybrać?

Zacznij od ustalenia, czy reguła dotycząca odstępu ma być częścią tekstu, czy prezentacji strony. Standard Unicode definiuje U+00A0 NO-BREAK SPACE jako nierozdzielający odpowiednik zwykłej spacji, a U+202F NARROW NO-BREAK SPACE jako jego węższy wariant. Dzięki nim możesz wybrać dwa różne widoczne odstępy. Standard Unicode, rozdział 6

Sytuacja podczas edycji Zalecany punkt wyjścia Co sprawdzić
Możesz zmienić tekst i chcesz uzyskać odstęp o zwykłej szerokości Zastąp zwykłą spację znakiem U+00A0 Zapisany tekst nadal zawiera znak nierozdzielający
Celowo chcesz uzyskać węższy odstęp Użyj U+202F Wynik wygląda odpowiednio w faktycznie używanej czcionce strony
Chcesz zachować zwykłą spację w tekście Zastosuj white-space: nowrap do elementu span zawierającego całą parę Span obejmuje słowo, spację i znak interpunkcyjny
Możesz tylko wyświetlać stronę Wprowadź poprawkę w edytowalnym źródle albo poproś o to opiekuna strony Lokalny eksperyment nie zmienia oryginalnej strony

W kodzie HTML wpisz Beta :. Tabela odwołań do znaków w WHATWG przypisuje   do U+00A0. Zastąp istniejącą spację; nie zostawiaj zwykłej spacji przed odwołaniem. Standard HTML: nazwane odwołania do znaków

W przypadku reguły prezentacji umieść Beta : w elemencie span typu inline i zastosuj do niego white-space: nowrap. Pozostaw otaczający akapit z normalnym zawijaniem. MDN opisuje white-space jako właściwość sterującą obsługą białych znaków i zawijaniem. MDN: white-space

W praktyce decyzja sprowadza się do tego, jaki fragment tekstu ma pozostać razem. W tym przykładzie zabezpiecz tylko Beta :. Zabezpieczenie Tile Alpha Beta : Next tile niepotrzebnie ograniczyłoby zawijanie całej etykiety. Zacznij od najmniejszej jednostki, która wyraża zamierzoną relację.

Jak przygotować lokalny test w TextEdit

Utwórz osobny plik testowy, zanim zmienisz istniejącą stronę. Apple opisuje, jak używać TextEdit w trybie zwykłego tekstu do tworzenia plików HTML, zapisywać je z rozszerzeniem .html i wybierać Use .html po wyświetleniu monitu. Praca z dokumentami HTML w TextEdit na Macu

  1. Otwórz TextEdit i wybierz File > New.
  2. Wybierz Format > Make Plain Text.
  3. Wklej cały poniższy przykład.
  4. Wybierz File > Save i nazwij plik punctuation-test.html.
  5. Jeśli pojawi się monit, wybierz Use .html.
  6. W Safari użyj File > Open File, aby otworzyć zapisany plik.

To kompletny, samodzielny dokument HTML. Nie wymaga biblioteki, instalacji ani połączenia z siecią. Trzy karty zawierają ten sam przykładowy tekst, ale w każdej zastosowano inne rozwiązanie dla spacji przed dwukropkiem.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

Poprawność zamiany odwołania do znaku w przykładzie sprawdzono za pomocą parsera: &nbsp; odpowiada U+00A0. Podczas przygotowywania tekstu nie uruchomiono przeglądarki. Użyj poniższego porównania, aby sprawdzić układ w przeglądarce na Macu.

Porównuj punkt zawijania, a nie jeden zrzut ekranu

Ilustracyjna szerokość 14ch to punkt wyjścia, a nie gwarantowany próg zawijania. Zmień ją na 10ch, zapisz plik, wczytaj go ponownie, a następnie wypróbuj 18ch. Poszukaj szerokości, przy której dwukropek w karcie ze zwykłą spacją oddziela się od Beta. W dwóch wersjach zabezpieczających odstęp oczekiwany wynik to pozostawienie Beta i dwukropka razem, przy jednoczesnej możliwości przenoszenia pozostałych słów.

Jeśli początkowo wszystkie trzy karty wyglądają tak samo, nie oznacza to, że zastosowane rodzaje spacji są równoważne. Być może po prostu jest dość miejsca na tę parę. Zmieniaj szerokość, aż interesujący Cię punkt znajdzie się na końcu wiersza, a następnie powiększ tekst i powtórz próbę.

Otwierając plik ponownie w TextEdit, użyj File > Open, wybierz plik, kliknij Show Options i w razie potrzeby zaznacz Ignore rich text commands. Apple opisuje również ustawienie Display HTML files as HTML code instead of formatted text. Dzięki tym opcjom możesz bezpośrednio edytować kod źródłowy. Instrukcje Apple dotyczące HTML w TextEdit

Dlaczego spacja nierozdzielająca może nie działać?

Znak nierozdzielający działa w ramach reguł przepływu tekstu przeglądarki. Zanim dodasz kolejne niewidoczne znaki, sprawdź, czy problem wynika z treści, nadpisującej reguły CSS czy granicy układu.

Strona wyświetla odwołanie dosłownie

Jeśli strona pokazuje znaki &nbsp;, wpis został potraktowany jako tekst, a nie przeanalizowany jako odwołanie HTML do znaku. W polu kodu HTML użyj Beta&nbsp;:. W zwykłym polu tekstowym wstaw zamiast tego rzeczywisty znak nierozdzielający.

To samo rozróżnienie dotyczy JavaScriptu. Przypisanie ciągu znaków przez textContent tworzy tekst; nie analizuje odwołań HTML. Ciąg JavaScript może zawierać ten znak jako "Beta\u00A0:". Unikaj też przypisywania textContent do całego sformatowanego akapitu tylko po to, by poprawić jeden odstęp, ponieważ zastąpi to jego istniejące elementy potomne. MDN: Node.textContent

Reguła CSS dopuszcza wyjątkowo agresywne zawijanie

Sprawdź, czy ustawiono line-break: anywhere. MDN opisuje, że ta wartość dopuszcza podziały wokół jednostek typograficznych, ignorując zakazy związane z klasami znaków łączących i łącznika wyrazów. Dodany znak nierozdzielający nie jest więc bezwarunkowym sposobem na nadpisanie tego ustawienia. MDN: line-break

Sprawdź również overflow-wrap. Jego wartość anywhere pozwala w razie potrzeby podzielić ciąg, który normalnie nie podlega podziałowi, aby uniknąć przepełnienia. To zachowanie awaryjne różni się od zwykłego podziału w miejscu spacji. MDN: overflow-wrap

Użyj lokalnego elementu span zapobiegającego zawijaniu, gdy prezentacja wymaga, by cała krótka para pozostała razem. Sprawdź regułę faktycznie zastosowaną do tego elementu span, zwłaszcza jeśli arkusz stylów strony zawiera bardziej szczegółowe selektory. Ogranicz poprawkę do tego miejsca, aby inne długie teksty zachowały dotychczasowe zawijanie.

Znak interpunkcyjny znajduje się w osobnym polu układu

Sprawdź, czy dwukropek jest zwykłym tekstem typu inline, czy znajduje się w elemencie inline-block lub innym atomowym elemencie inline. W3C określa specjalne możliwości podziału wiersza wokół atomowych elementów inline, w tym wyjątek dotyczący sąsiadujących spacji nierozdzielających. Spacja wstawiona obok takiego pola nie jest równoważna spacji w jednym ciągłym fragmencie tekstu. CSS Text Module Level 3: szczegóły podziału wierszy

W przypadku tej prostej etykiety umieść słowo, odstęp i znak interpunkcyjny w jednym zwykłym elemencie span typu inline. Usuń umieszczony między nimi znacznik <br>, jeśli zamierzone jest automatyczne zawijanie; nowrap wyłącza miękkie zawijanie, ale nie usuwa wymuszonych podziałów. CSS Text Module Level 3: białe znaki i zawijanie

Jak zachować kształtowanie tekstu w przeglądarce i obsłużyć ciasny układ?

Pozostaw całe słowo w jednym kawałku, zamiast zawijać jego poszczególne litery. W3C określa, kiedy kształtowanie tekstu musi być kontynuowane między granicami elementów inline oraz kiedy zmiany, takie jak odstępy wewnętrzne, obramowania lub wyrównanie, wymagają jego przerwania. Zwykły element span typu inline pozwala uniknąć niepotrzebnego wprowadzania granic formatowania. CSS Text Module Level 3: kształtowanie tekstu na granicach elementów

Istnieje jednak fizyczne ograniczenie: zabezpieczona para potrzebuje odpowiedniej szerokości w poziomie. Jeśli kontener stanie się węższy niż Beta :, zachowanie pary razem może spowodować przepełnienie. Sprawdź celowo taką sytuację. Następnie wybierz rozwiązanie układowe, na przykład poszerzenie karty lub skrócenie jej etykiety, zamiast ukrywać tekst. Zachowanie zapobiegające zawijaniu opisuje definicja white-space W3C.

Czy potrzebujesz biblioteki do podziału wierszy?

W przypadku zwykłej strony internetowej nie jest ona potrzebna. Nazwana biblioteka linebreak oblicza możliwości podziału wierszy według Unicode; jej dokumentacja wyraźnie pozostawia wybór faktycznych podziałów oprogramowaniu, które zna dostępną szerokość i rozmiar wyświetlanego tekstu. W pliku README podano obecnie obsługę wersji 13 Unicode. Dokumentacja foliojs/linebreak

To rozróżnienie ma znaczenie, jeśli inny używany program korzysta już z tej biblioteki. Lista możliwych podziałów nie określa, gdzie przeglądarka zawinie tekst po jego ukształtowaniu. W przypadku edycji tej strony pozostaw kształtowanie czcionki i końcowe rozmieszczenie wierszy przeglądarce, a zamierzony sposób łączenia wyraź za pomocą znaku lub lokalnej reguły CSS.

Zanim przeniesiesz poprawkę, sprawdź trzy rzeczy: odstęp pozostaje widoczny, słowo i znak interpunkcyjny pozostają razem w pobliżu końca wiersza, a otaczający tekst nadal może się zawijać. Użyj spacji nierozdzielającej, gdy ta relacja ma być częścią tekstu, albo ograniczonego do danego miejsca elementu span zapobiegającego zawijaniu, gdy ma wynikać z prezentacji. Sprawdź ponownie faktyczną stronę przy najmniejszej użytecznej szerokości.

Źródła