TAAT Technologie Cyfrowe

Dzielenie i justowanie tekstu
w przeglądarkach internetowych

Domyślnie, przeglądarki internetowe nie obsługują dzielenia wyrazów. Aby je zmusić do prawidłowego dzielenia tekstu, trzeba się uciec do kilku zabiegów, które na pierwszy rzut okna mogą wydawać się pracochłonne, lecz uzyskany efekt najczęściej na tyle cieszy oczy, że warto się postarać.

Sprawa justowania wstępnie została rozwiązana przez CSS, bo za pomocą ustawienia text-align: justify możemy wymusić justowanie obustronne. Niestety, polega ono wyłącznie na bezmyślnym rozciągnięciu przerw międzywyrazowych. Czasami do takich granic, że tekst wygląda na najdroższy ser szwajcarski, a nie kolumnę o jednakowej szarości.

Dlatego też, bez dzielenia wyrazów nie można się obejść. Jeśli nie zdecydujemy się na dzielenie, najlepiej od razu zapomnieć o tym, że mamy do dyspozycji justowanie obustronne i od razu ustawić wyrównanie do lewej.

Obsługa dzielenia za pomocą ­

Encja ­ wstawia znak soft-hypen, czyli znak miękkiego podziału, który domyślnie jest ukryty, a wyświetlany tylko w wypadku kiedy zaistnieje potrzeba podzielenia wyrazu. Przykładowy tekst podzielony za pomocą encji ­ wygląda mniej więcej tak:

Kon ­ stan ­ ty ­ no ­ pol

Jeśli kolumna jest szeroka i wyraz się mieści w całości, przeglądarka wyświetli:

Konstantynopol

Jeśli szerokość kolumny jest wąska i wyraz się nie zmieści, wyraz zostanie podzielony w miejscu gdzie występuje encja ­, czyli dla powyższego przykładu:

Kon­stan­ty­no­pol

Wiersz został podzielony, pod warunkiem, że przeglądarka obsługuje dzielenie za pomocą encji ­

Które przeglądarki obsługują ­ prawidłowo?

Nie było by zabawy, gdyby wszystkie przeglądarki zachowywały się tak samo… Jak łatwo się domyślić, nie wszystkie obsługują ten rodzaj dzielenia. O dziwo, wieczny odmieniec, Internet Explorer, obsługuje dzielenie wyrazów i to — uwaga — już od wersji 5!

Firefox, który należy do grona najlepszych przeglądarek internetowych, w testach dzielenia zaskoczył wszystkich. Pomimo, że mamy 21 wiek, jako jedyny wśród testowanych przeglądarek nie dzieli wyrazów prawidłowo. Jest mała nadzieja na poprawę tego stanu w najbliższym czasie, ponieważ brat Firefoksa, Iceweasel już obsługuje prawidłowo. Niestety, te nadzieje mogą okazać się płonne, bo następca Firefoxa — Gran Paradiso — w wersji alpha 3, wyrazów nie dzieli.

Wyniki dla testowanych przeglądarek:

Jak widać, trzeba znaleźć sposób na Firefoksa i jest szansa na prawidłowe dzielenie we wszystkich przeglądarkach.

Firefox i dzielenie wyrazów

Tekst podzielony za pomocą ­ i wyjustowany obustronnie w poziomie w przeglądarkach obsługujących wygląda jako tako. Tylko w Firefoxie tragicznie. Szczególnie przy mniejszych szerokościach kolumny.

Lamentowanie nad brakiem obsługi dzielenia w Firefoksie nic nie pomoże, więc pozostaje się zastanowić, jak sobie poradzić z tą sytuacją. Nie ma dobrego rozwiązania. można jednak potraktować Firefoksa inaczej: zrezygnować z justowania obustronnego i wyrównać tekst do lewej, w układzie chorągiewkowym. Nie będzie to wyglądało dobrze, ale przynajmniej nie będzie wyglądało tragicznie.

Czyli w jednym arkuszu określamy, że wszystkie przeglądarki mają justować obustronnie, a Firefox — niestety — do lewej.

Hack na zastosowanie stylu tylko do Firefoksa wygląda następująco:



/* dla wszystkich przeglądarek */
#content {
    text-align: justify;
    text-justify: newspaper;
    width: 20em; /* i jakieś inne reguły */
}

/* tylko dla Firefox’a */
#content, x:-moz-any-link {
    text-align: left;
    *text-align: justify; /* reguła z gwiazdką dla IE */
} 

Zamiast #content można oczywiście użyć dowolnego innego selektora.

Dla Firefoksa 3 zamiast x:-moz-any-link trzeba zastosować x:-moz-any-link, x:default

Automatyczne wstawianie ­

Było by idealnie, gdyby przeglądarki automatycznie dzieliły wyrazy i wstawiały ­ w odpowiednie miejsce. Ale to już jest wyzwanie dla deweloperów przeglądarek. Wbrew pozorom, to wcale nie jest taka trudna sprawa. Każdy średnio rozgarnięty edytor tekstowy — z lepszym bądź gorszym skutkiem — obsługuje dzielenie. Dlaczego przeglądarki nie mogą?

Tymczasowo, trzeba się zadowolić dzieleniem ręcznym. Teoretycznie oznacza to, że mając dwie strony tekstu, będziemy siedzieć dwie godziny i wklejać ­ pomiędzy sylaby. Na szczęście, można się posiłkować odpowiednimi narzędziami.

Tekst, oraz tekst zaszyty w kodzie HTML możesz podzielić za pomocą narzędzia text4web. Narzędzie obsługuje algorytmiczne dzielenie dla języka polskiego, angielskiego i niemieckiego. text4web przy okazji może poprawić często spotykane typograficzne błędy interpunkcyjne oraz uporządkować kod za pomocą Tidy.

Wady dzielenia za pomocą ­

Największą wadą, jest oczywiście jakość samego dzielenia. Algorytmy obsługi ­ — jeśli szczęśliwie przeglądarka je obsługuje — są bardzo wątpliwej jakości. W najlepszym przypadku, przeglądarka poprawnie manipuluje jedynie odstępami międywyrazowymi i to w dodatku w obrębie jednego wiersza, nie biorąc pod uwagę następnych wierszy. Może to prowadzić na przykład do sytuacji, w której pięć kolejnych wierszy będzie się kończyło dywizem, a w ostatnim wierszu zostanie na dodatek tylko część jednego wyrazu.

Pominąwszy konieczność pracochłonnego, ręcznego wstawiania encji ­ i fanaberie przeglądarek, jedną ze istotnych wad tego rodzaju dzielenia jest znaczny przyrost objętości kodu. W przypadku krótkich tekstów i małej liczbie podzielnych słów, nie jest to aż tak istotne, ale w przypadku dużej ilości tekstu, różnicę można zauważyć gołym okiem.

Dla 400 KB strony www czas załadowania jest już bardzo długi. Dodając do tego encje soft-hyphen rozmiar strony rośnie średnio o więcej niż 70%. W praktyce, oznacza to o 70% dłuższy czas oczekiwania na załadowanie się strony, a w przypadku usług hostingowych z rozliczeniami za ilość wygenerowanego ruchu, rachunki wyższe o 70%. Dla bardzo dużego serwisu 70% zwiększenie obciążenia, może pociągać za sobą poważne konsekwencje.

Justowanie pionowe

Do sfery marzeń należą zaawansowane funkcje: analiza podczas dzielenia kilku wierszy jednocześnie, kerning i automatyczny tracking. To samo dotyczy justowania w pionie.

Poprawne justowanie wielu wierszy w pionie, czyli automatyczna korekta interlinii, tak aby tekst zajmował określoną wysokość, to zadanie zadanie nie do przejścia dla przeglądarek. Co najwyżej, można się pokusić o justowanie pionowe pojedynczego wiersza za pomocą vertical-align, ale niestety to rozwiązanie nie jest prawidłowo obsługiwane przez wszystkie przeglądarki. Do tego, nie można takiego zabiegu nazwać justowaniem. Mowa tu raczej o pozycjonowaniu elementu na środku.

Wyrównanie do środka w pionie — metoda 1

Ta metoda ma następujące ograniczenia:

Jeśli powyższe ograniczenia nie przeszkadzają, można zastosować następujące rozwiązanie:

<style type="text/css">
        #zewnetrzny { position: relative}
        #wewnetrzny { position:absolute; top: 50%; height: 10em; margin-top: -5em}

</style>

<div id="zewnetrzny">
        <div id="wewnetrzny">
                <p>Lorem ipsum</p>
                <p>Dolor sit amet</p>

        </div>
</div> 

Wyrównianie do środka w pionie — metoda 2

Ta metoda justowania ma następujące ograniczenia:

Rozwiązanie polega na ustawieniu interlinii (line-height) równej wysokości kontenera. Przykład:


<style type="text/css">
        #zewnetrzny { line-height: 4em }
</style>

<p id="zewnetrzny">
        Lorem ipsum dolor sit amet!
</p>