Przeglądając strony internetowe, pewnie wielokrotnie zauważyłeś/-aś, że tekst na nich różni się od tego, który spotykasz w książkach czy czasopismach. Pierwszą rzeczą, która rzuca się w oczy, jest zazwyczaj brak justowania, czyli wyrównania do obu krawędzi strony. Drugą jest natomiast częste występowanie w tekstach internetowych spójników oraz przyimków, zwłaszcza tych jednoliterowych (jak „w”, „z”, „a”, „i”, „o”, „u”) na końcach linii. Choć nie jest to błędem, w polskiej typografii zaleca się jednak unikanie tego, aby zachować estetykę treści i ułatwić jej odbiór.
Powód takiego stanu rzeczy jest jeden: responsywność, której oczekuje się od współczesnych witryn. Responsywność to zdolność witryn do automatycznego dopasowywania się do ekranu smartfona, tabletu, laptopa czy monitora komputera. Dzięki temu witryny mogą być czytelne na różnych urządzeniach. Niestety, to sprawia, że dużo trudniej zadbać o wygląd treści, niż w przypadku kartki papieru, której wysokość i szerokość są niezmienne.
Czym są „sierotki”?
Pojedyncze, jednoliterowe przyimki i spójniki na końcu wiersza określane są mianem „sierot”, „sierotek” (potocznie), „zawieszek” lub „wiszących wyrazów”, a w języku angielskim określane są mianem „orphans” (termin z typografii angielskiej). Choć zasada unikania „sierotek” dotyczy głównie jednoliterowych spójników i przyimków, zaleca się również, by wieloliterowe przyimki pozostawały w jednym wierszu z następującymi po nich wyrazami.
Jeśli należysz do grona osób, dla których występowanie „sierotek” jest nieakceptowalne, lub po prostu chcesz, by treści na Twojej witrynie wyglądały estetyczniej, w tym poradniku podpowiem, jak rozwiązać ten problem.
– Czym jest i jak działa „niełamliwa spacja”
Niełamliwa / twarda spacja (ang. non-breaking space), zapisywana jako „ „, to specjalny znak w HTML. Choć w tekście widocznym na stronie wygląda jak zwykła spacja, zapobiega łamaniu wiersza. Łamanie wiersza w HTML oznacza, że tekst zostaje podzielony na dwie lub więcej linie, gdy nie mieści się w jednej linii na ekranie.
Twarda spacja jest szczególnie przydatna, gdy chcesz, by pewne elementy tekstu, jak imiona i nazwiska, liczby z jednostkami miary czy inne wyrażenia, były traktowane jako jeden ciąg znaków, bez ryzyka ich rozdzielenia na dwie linie.
Załóżmy, że chcesz poprawić układ tekstu na swojej stronie i masz następujący akapit:
<p>Bardzo lubię książki i czasopisma.</p>Aby rozwiązać problem „sierotek”, kod z niełamliwą spacją może wyglądać tak:
<p>Bardzo lubię książki i czasopisma.</p>Dzięki temu będziesz mieć pewność, że fragment „i czasopisma.” zawsze znajdzie się w jednej linii.
Aby twarda spacja działała poprawnie, upewnij się, że między nią ( ) a sąsiadującymi znakami nie ma „zwykłej” spacji. W przeciwnym razie rozwiązanie nie zadziała, a odstęp między znakami się powiększy.
Jeśli chcesz zastosować tę metodę w WordPressie, przełącz się z „Edytora wizualnego” (ang. „Visual (Block) Editor”) na „Edytor kodu” (ang. „Code Editor”) podczas edycji.
Możesz również skorzystać z tego rozwiązania na innych witrynach, jeśli masz możliwość edytowania treści w HTML, a także – co chyba oczywiste – na stronach budowanych wyłącznie za pomocą HTMLa.
Użyj wtyczki… „Sierotki”
Co zrobić, gdy piszesz dużo (albo bardzo dużo), a zabawa z kodem nie jest Twoją mocną stroną? Na szczęście mamy do czynienia z WordPressem, więc istnieje duża szansa, że jest już odpowiednia wtyczka. I tak jest! Taką wtyczką są „Sierotki” (ang. „Orphans”) autorstwa naszego niezastąpionego rodaka, Marcina Pietrzaka, którą możesz pobrać z repozytorium WordPressa:
https://pl.wordpress.org/plugins/sierotki/
A czym jest wtyczka „Sierotki”:
Wtyczka Sierotki automatycznie poprawia typografię witryny WordPress, zapobiegając pojawianiu się pojedynczych liter lub bardzo krótkich słów – zwanych sierotkami – na końcu wiersza. Zastępując spację po tych słowach twardą spacją, wtyczka zapewnia czystsze, bardziej profesjonalnie wyglądające układy tekstu, szczególnie w przypadku języków takich jak polski, w których takie zasady typograficzne są ważne.
