Studio iFOX · seria „Z warsztatu", odc. 3
Poprzedni odcinek kończyliśmy zdaniem, że to domyka serię. Domknęło się na dziesięć dni.
Wróciliśmy, bo przy okazji poprzednich narzędzi wyszła trzecia rzecz z dokładnie tej samej rodziny co dwie pierwsze: psuje się po cichu, nikt Cię o tym nie powiadomi, a dotyczy wyłącznie języka polskiego.
Samotne „w" na końcu wiersza. Wisząca „i". Pojedyncza litera, która została w poprzedniej linijce, zamiast przejść do następnej razem ze swoim wyrazem. W polskiej typografii to błąd — jeden z niewielu, które Wikipedia odnotowuje jako specyficzne dla polskiego i czeskiego. W polskim internecie jest niemal normą.
Sierotka nie jest cechą tekstu
To jest sedno i powód, dla którego cała ta sprawa jest trudniejsza, niż wygląda.
Weź akapit. Przy szerokości łamu 620 pikseli wiszą w nim trzy sierotki. Rozszerz do 700 — nie ma ani jednej. Zwęź do szerokości telefonu — pojawiają się cztery, ale zupełnie inne, w innych miejscach.
Tekst się nie zmienił. Zmieniło się miejsce, w którym łamie się wiersz.
Z tego wynika rzecz, której nie da się obejść: pytanie „czy ta strona ma sierotki" nie ma sensu bez podania szerokości. A strona responsywna nie ma jednej szerokości — ma tyle, ilu odwiedzających. Sprawdziłeś na swoim monitorze i było czysto? Sprawdziłeś jeden przypadek z tysiąca.
Dlatego to nie jest problem, który da się zobaczyć okiem. To problem, który trzeba zmierzyć.
Wtyczka istnieje, jest dobra i nadal nie rozwiązuje wszystkiego
Zacznijmy od tego, co już jest, bo udawanie, że nie ma, byłoby nieuczciwe.
Do WordPressa jest darmowa wtyczka Sierotki Marcina Pietrzaka z iWorks. Siedzi w oficjalnym repozytorium, jest regularnie aktualizowana i ma gotowe integracje z Divi, Bricks, WPBakery, beTheme oraz polami ACF — autor wyraźnie potraktował page buildery poważnie. Jeśli prowadzisz stronę na WordPressie, zainstaluj ją.
Jest jednak rzecz, której żadna wtyczka zrobić nie może, i nie jest to jej wina.
Zajrzeliśmy w kod źródłowy. Nie ma tam ani jednego odwołania do szerokości okna, rozdzielczości ekranu czy czegokolwiek związanego ze składem. Nie ma też ani linijki JavaScriptu. To czysta zamiana w tekście, wykonywana na serwerze — zanim przeglądarka złoży pierwszą linijkę.
I tak być musi. W momencie, w którym ten kod działa, wiersze jeszcze nie istnieją. Nie ma czego zmierzyć. Jedyne, co można zrobić, to związać każde wystąpienie bez wyjątku i mieć nadzieję, że to wystarczy.
Zwykle wystarcza. Ale wynikają z tego dwie rzeczy.
To jest poprawka, nie diagnoza. Wtyczka nie powie Ci, czy Twoja strona w ogóle miała problem, ani czy poprawka dotarła wszędzie. Sprawdzić to można wyłącznie po złożeniu tekstu, czyli w przeglądarce.
Wiązanie bez warunku ma cenę. Wystarczy zdanie w rodzaju „w Łodzi u nas i u nich" — i powstaje nierozerwalny ciąg, który na wąskim telefonie nie ma gdzie się złamać. Potrafi wypchnąć tekst poza ekran. Jeden błąd typograficzny naprawiony przez stworzenie drugiego, bardziej widocznego.
Dlatego mierzymy, zamiast zgadywać
Nasz Zecer nie wylicza sierotek z reguł. Składa tekst przy zadanej szerokości, odczytuje z przeglądarki, gdzie realnie kończą się wiersze, i sprawdza, jakie słowo wypadło na końcu każdego z nich. Suwak szerokości nie jest ozdobą — jest całym narzędziem. Przesuwasz i widzisz, jak sierotki wędrują, znikają i pojawiają się gdzie indziej.
To ta sama zasada, na której stoją dwa poprzednie narzędzia. W generatorze palet liczba kontrastu wydrukowana jest kolorem, który testuje — jeśli jej nie widać, to jest wynik. W parownicy fontów obecność polskich znaków sprawdza przeglądarka, nie nasza tabelka. Tutaj łamanie wiersza liczy silnik składu, a nie nasze wyobrażenie o tym, jak się złamie.
Najciekawszy jest trzeci możliwy werdykt. Nie „są sierotki" i nie „nie ma sierotek", tylko: przy tej szerokości nic nie wisi, ale w tekście nie ma ani jednej twardej spacji. Czyli masz szczęście, nie zabezpieczenie. Przesuń suwak o sto pikseli i szczęście się kończy — a u części odwiedzających kończy się od razu.
Narzędzie mierzy też najdłuższy nierozerwalny ciąg i ostrzega, zanim ten wypchnie tekst poza ekran telefonu. To odpowiedź na drugi z problemów opisanych wyżej.
Cztery pułapki, w które wpadł nasz własny korektor
Pierwsze osiem testów. Cztery przeszły, cztery nie.
„100 zł" nie wiązało się w ogóle. Powód okazał się bolesny: reguła sprawdzała granicę wyrazu, a mechanizm wyrażeń regularnych nie uznaje „ł" za znak należący do słowa. Narzędzie do polskiej typografii wyłożyło się na polskim znaku. „5 kg" działało bez zarzutu, bo „kg" to dwie litery z alfabetu angielskiego.
„12 500 000" wiązało tylko pierwszy odstęp. Reguła pochłaniała całą grupę cyfr, przez co przy drugim odstępie nie miała już przed sobą wolnej cyfry, żeby się o nią zaczepić. Wynik: liczba nadal mogła się rozpaść w połowie.
W zwrocie „a w domu" wiązała się tylko pierwsza litera. Ten sam mechanizm — pierwsze dopasowanie zjadało odstęp, którego potrzebowało drugie. Akurat w polskim dwie jednoliterówki obok siebie to nie jest rzadkość.
Ta akurat pułapka ma ciąg dalszy. Kiedy zaglądaliśmy do kodu wtyczki Sierotki — żeby sprawdzić, czy wolno nam o niej napisać to, co napisaliśmy wyżej — znaleźliśmy tam zamianę pojedynczych liter wywołaną dwa razy pod rząd. Nad nią komentarz autora: double call to handle orphan after orphan after orphan.
Marcin Pietrzak wdepnął w dokładnie to samo i rozwiązał to dokładnie tak samo, tylko kilkanaście lat wcześniej. Nasza wersja robi trzy przebiegi zamiast dwóch, co jest jedyną różnicą i szczerze mówiąc żadnym powodem do dumy.
A w adresie a@b.pl narzędzie rozpoznawało „pl" jako skrót od „plac" i doklejało twardą spację do następnego wyrazu. Fałszywy alarm w miejscu, w którym nikt by go nie szukał.
Wszystkie cztery poprawione, jedenaście testów przechodzi. Ale warto zobaczyć, co te błędy mają wspólnego: każdy z nich dawał wynik wyglądający na poprawny. Tekst wychodził z narzędzia czysty, bez ostrzeżeń, tylko po prostu w połowie niepoprawiony. Bez wypisania z góry, jaki wynik ma wyjść, przepuścilibyśmy komplet.
Co z tego wynika dla Twojej strony
Zwęź okno przeglądarki. Nie otwieraj widoku mobilnego w narzędziach dewelopera — po prostu chwyć krawędź okna i przeciągnij ją powoli w lewo, patrząc na tekst. Sierotki zaczną wyskakiwać i chować się z powrotem. To zajmuje dziesięć sekund i pokazuje więcej niż każdy audyt.
Jeśli masz wtyczkę Sierotki, sprawdź, czy działa na aktualnej wersji — integracje z page builderami dochodziły stopniowo, ta z Divi dopiero w wersji 3.2.0 z 2023 roku. Starsza wersja poprawi wpisy blogowe i ominie sekcje zbudowane w builderze.
I jedna rzecz do zapamiętania na przyszłość: typografia to obszar, w którym polski wymaga rzeczy, o których angielskie narzędzia nie mają pojęcia — bo w angielskim ten problem nie istnieje. Domyślne ustawienia każdego zagranicznego rozwiązania są dla polskiego tekstu w tym miejscu po prostu puste.
Zecer jest darmowy i nie wymaga logowania: sprawdź swój tekst — sierotki mierzone przy Twojej szerokości łamu, twarde spacje, polskie cudzysłowy, półpauzy i jednostki. Tekst liczony jest w przeglądarce i nigdzie nie wychodzi.
Trzy narzędzia, trzy odcinki. Tym razem nie deklarujemy, że to koniec serii — poprzednio wyszło niezręcznie.