Jak rozwiązać problem wstawianych przez edytor wizualny twardych spacji

Twarde spacje

Przez wiele lat korzystając z WordPressa używałem praktycznie tylko edytora tekstowego, głównie dlatego, że lubiłem mieć całkowitą kontrolę nad formatowaniem tekstu. Jednak z czasem edytor wizualny TinyMCE stawał się coraz lepszy, a ja stawałem się coraz bardziej leniwy – i w końcu porzuciłem ręczne wstukiwanie znaczników HTML i postawiłem na komfort pracy.

Bardzo szybko zauważyłem, że z nieznanego mi powodu w moich tekstach pojawiają się same z siebie znaki twardej (niełamliwej) spacji, widoczne w kodzie strony jako  , powodujące niepotrzebne przenoszenie słów do kolejnych wierszy. Znaki te pojawiają się w różnych miejscach i trudno w ich ułożeniu dostrzec jakiś schemat. Na szczęście problem jest łatwy do rozwiązania, aczkolwiek jego przyczyna jest co najmniej dziwna.

Co i dlaczego wstawia twarde spacje do treści wpisów?

Problem z wstawianymi w losowych miejscach twardymi spacjami nie jest nowy – po raz pierwszy został zgłoszony ponad 3 lata temu i od tamtej pory nie został rozwiązany. Nie jest to ani błąd samego WordPressa, ani (wbrew pozorom) edytora wizualnego TinyMCE. Tak naprawdę to nie jest w ogóle błąd – to funkcja przeglądarki. Jak wyjaśniono w tym komentarzu, ponieważ w HTMLu wiele spacji jest zawsze wyświetlanych jako jedna spacja, przeglądarki próbują zachować widoczność wielu spacji zamieniając je na twarde (niełamliwe) spacje. Wygląda jednak na to, że niektóre przeglądarki (w szczególności Chrome) wstawiają te znaki w wielu miejscach, często wyglądających na losowe.

Problem ten jest dość trudno wychwycić, ponieważ znak niełamliwej spacji nie jest widoczny ani w edytorze wizualnym, ani w tekstowym – jest bowiem wstawiany jako biały znak o kodzie U+00A0, a dopiero w bazie danych i na stronie pojawia się jako  . Gdy jednak już go zauważymy, to da się go usunąć w edytorze tekstowym – po prostu wystarczy skasować znak wyglądający na spację i zastąpić go spacją. Brzmi to nieco dziwacznie, więc nie będziemy tak robić i zamiast tego poszukamy prawdziwego rozwiązania problemu.

Rozwiązanie problemu

Znalazłem kilka prób rozwiązań tego problemu, przy czym większość z nich albo już nie działa, albo nie działała nigdy. Skupię się więc tylko na tych, które na pewno się sprawdzą.

Pierwsza metoda to usuwanie zbędnych twardych spacji z treści wpisów przed ich wysłaniem do przeglądarki. Jest to sposób skuteczny i prosty – wystarczy do pliku functions.php motywu lub do pliku wtyczki dodać następujący kod:

Wadą tego rozwiązania jest to, że usuwa ono wszystkie twarde spacje, co nie zawsze jest pożądanym przez nas działaniem. Poza tym tak naprawdę usuwane są tylko objawy, a nie ich przyczyna – tekst w bazie danych wciąż będzie zawierał niepotrzebne twarde spacje.

Drugą (moim zdaniem lepszą) metodą jest usuwanie zbędnych twardych spacji w momencie zapisywania treści wpisu do bazy danych. Dzięki temu niezależnie od tego, ile zbędnych znaków zostanie dodanych na etapie edycji, do bazy danych (a co za tym idzie również na stronę) trafi wyczyszczony z nich tekst. Aby to zrobić należy do pliku functions.php motywu lub do pliku wtyczki dodać następujący kod:

Wadą tego rozwiązania jest to, że aby pozbyć się zbędnych znaków z danego wpisu musimy zapisać go w panelu administracyjnym (nie trzeba dokonywać w nim żadnych zmian – wystarczy kliknąć przycisk Zaktualizuj).

Bezpośredni link

  • Szczerze to z problemem nigdy się nie spotkałem, a Chrome’a używam od prawie 7 lat.

    Okazjonalnie edytor wizualny walnie sobie   bez powodu ale staram się wizualnego nie używać, głównie ze względu na pełną kontrolę formatowania, którego wizualny w ogóle nie zapewnia(chyba, że doprawiony wtyczkami ale nie w tym rzecz).

    Ja natomiast chciałbym wiedzieć jak się pozbyć problemu nadmiernego autop – edytor nieważne, czy tekstowy, czy wizualny często pchają niektóre linie w paragrafy mimo, że nie mają ku temu podstaw. Naprawdę głupio to czasami wychodzi, kiedy shortcode działa na zasadzie dynamicznej treści albo wstawiamy jakiś swój kawałek kodu(np. link), który nie ma być oddzielnym paragrafem. Rozwiązaniem jest albo wstawienie linii w div albo wyłączenie całkowicie autop ale przecież takie rozwiązanie problemu to nie jest porządna solucja.

    Przeciętny blogger pewnie nie zwróci uwagi ale mnie, perfekcjonistę, nawet 5 pikseli nadto doprowadza do szewskiej pasji :)

    • wtyczka wpautop czy jakoś tak, dla mnie jeden z dwóch podstawowych obok sierotek.

  • A jak usuwanie twardej spacji, ma się do perfekcjonistów typografi, który twardymi spacjami walczą z sierotkami?

    • Preferowany przeze mnie sposób niczego tu nie zmienia. Usuwamy twarde spacje z tekstu zapisywanego do bazy, a wtyczki walczące z sierotkami dodają twarde spacje „w locie” przed wyświetleniem (filtr ‚the_content’ i tym podobne), tak więc wszystko wciąż działa.

  • Oooo. Zawsze mi to denerwowało :)

  • Dariusz Grochocki

    przetestuję to, już kilka razy miałem ten denerwujący problem

  • Tomasz Stopa

    a mnie nurtuje sprawa nieco podobna. świadomie używam tzw. twardej spacji do rozdziału wierszy. Zainstalowałem wtyczkę do wydruku postów Post ad Page Print i zadałem opcję wydruku bez zdjęć. wszystko jest super, ale… właśnie ta twarda spacja powoduje, że niepotrzebnie ta przestrzeń między wierszami pozostaje na wydruku. Przez to wydruk mojego posta zamiast na jednej stronie zawiera się na dwóch. Czy jest może jakiś sposób (np. CSS), aby usunąć twardą spację tylko z wydruku?