second gate studio blog

Autorem tego bloga jest zx. Na stronie zajmuję się szeroko pojętym user-experience i takoż pojętym designem. Piszę o technologii, pokazuję rzeczy zaprojektowane z wyczuciem, dbałością o szczegóły i szukam inspiracji w każdej możliwej dziedzinie. Kontakt.

Typografia w sieci: Wyrównanie tekstu

W większości papierowych dokumentów, gazet czy książek tekst jest wyjustowany. Nasz mózg lubi symetrię, więc lepsze wrażenie robi na nim blok tekstu, który nie jest poszarpany. Niemniej jednak, justowanie odrobinę utrudnia czytanie. Trudniej jest zaczepić wzrok na ostatnim słowie w wierszu, ponieważ wszystkie linie mają jednakową długość. Czasami przez to potrafimy zgubić linijkę w trakcie schodzenia do kolejnej. Staramy się temu zapobiec stosując odpowiednią długość wiersza, jednak zawsze odpowiednia długość plus niejustowany tekst da lepsze rezultaty niż tylko odpowiednia długość. Jest to jedno z ustępstw jakie popełnia się by tekst wyglądał dobrze.

Justowanie wymaga precyzji. Nie wystarczy samo porozsuwanie wyrazów tak, aby wypełniły całą długość wiersza, ponieważ zdarzyć się może, że odstępy między nimi staną się okrutnie duże. Typografowie, oprócz manipulowania odstępami międzywyrazowymi, starają się również odpowiednio dobierać odstępy między znakami jak również przenosić niektóre wyrazy do kolejnej linii. W dzisiejszych czasach to żmudne zajęcie wspomagane jest przez profesjonalne oprogramowanie do składu tekstu.

Różnica między justowaniem tekstu za pomocą odstępów międzywyrazowych, a połączenia odstępów między znakami, wyrazami i przenoszenia wyrazów do nowej linii

Do tej pory nie radzą sobie z tym przeglądarki. Przy wyrównywaniu tekstu do obu stron manipulują tylko odstępami międzywyrazowymi, co często daje efekt bardzo rozstrzelonych wyrazów. Jest kilka metod pozwalających zadbać o ten aspekt przy odrobinie wysiłku, jednak część z nich obciąża zasoby komputera, a druga część wymaga bardzo dużej pracy przy ręcznej edycji tekstu. Dlatego też, mówiąc ogólnie, nie poleca się justowania tekstu na stronach internetowych.

p { text-align: justify; } /* justowanie */

p { text-align: left; } /* wyrównanie do lewej */

p { text-align: right; } /* wyrównanie do prawej */

W krótszych tekstach możemy ręcznie pokazać przeglądarce w którym miejscu można podzielić wyraz. Robi się to za pomocą ­. Kiedy przeglądarka uzna, że podzielenie wyrazu w tym miejscu będzie korzystne dla czytelnika, przeniesie jego część do kolejnej linii.

Ręczne dba­nie o typografię.

Na horyzoncie pojawia się CSS3 z nowym modułem tekstu. Twórcy przewidują w nim wsparcie dla automatycznego przenoszenia wyrazów do nowej linii (ang. hyphenation) jak również wsparcia dla justowania z prawdziwego zdarzenia. W tej chwili przeglądarki dopiero starają się zadbać o ten aspekt i prawdopodobnie przyjdzie nam jeszcze trochę poczekać.

Automatyczne dzielenie wyrazów

Nowy CSS przewiduje kontrolę nad automatycznym dzieleniem wyrazów za pomocą własności hyphens:

Pamiętajmy, że sposób dzielenia wyrazów zależny jest od języka tekstu. Specyfikacja CSS mówi, że możliwe będzie zaimportowanie własnego „słownika podziału wyrazu” za pomocą @hyphenation-resource. Jednak można się spodziewać, że przeglądarki same będą radziły sobie z określaniem tegoż jeśli w znaczniku <html> określimy wartość lang. Przeglądarki i tak posiadają już słowniki ortograficzne, więc logicznym następstwem wydaje się być dodanie w nich wsparcia dla podziału wyrazów. Specyfikacja oddaje nam też w ręce pełną kontrolę nad różnymi aspektami, jednak póki całość jest tylko szkicem, nie ma sensu się w nie zagłębiać.

Lepsze justowanie tekstu

W CSS3 znajdziemy również kilka przydatnych opcji jeśli chodzi o dokładniejsze justowanie. Szczególnie jedna z możliwości text-justify wydaje się interesująca: distribute powinno wyjustować tekst używając zarówno odstępów między wyrazami jak i między znakami.

Specyfikacja nie jest jednak jasna. W tej chwili brzmi nawet dość dziwnie, więc musimy poczekać dłuższą chwilę aż ustalone zostaną konkretny.

Typografia w sieci: Wybierz odpowiednią długość wiersza

Przez długość wiersza rozumiem liczbę znaków w jednej linii tekstu. Przyjmuje się, że najwygodniejszy do czytania jest wiersz między 45 a 75 znaków, a za idealną liczbę uznaje się 66 znaków w wierszu (biorąc pod uwagę zarówno litery jak i znaki dodatkowe czy spacje). Wartość ta zmienia się odrobinę jeśli mówimy o layoutach wykorzystujących kilka kolumn. Wtedy wystarczy 40 do 50 znaków.

Optymalna ilość znaków w wierszu

Dlaczego nie więcej? Dochodząc do końca linii tekstu musimy zapamiętać gdzie skończyliśmy, żeby móc znaleźć początek kolejnego wiersza. Jeśli początek od końca wiersza będzie dzielić zbyt długa droga, nasz wzrok pogubi się na kolejnych literach. Chyba każdy wie jak irytujące potrafi być uczucie kiedy zgubiliśmy linijkę tekstu, albo kiedy musimy palcem jeździć po książce, żeby wiedzieć co czytamy.

Mimo wszystko, z tą wartością można śmiało eksperymentować. Czytelnicy na pewno postrzegają tekst w różny sposób, a część z nich nie zgodziłaby się z proponowanymi przez typografów wartościami.

Dlaczego nie mniej chyba nie trzeba nawet mówić. Każdy zdaje sobie sprawę jak źle czytałoby się dwa lub trzy wyrazy w wierszu. I nie mówimy tu po poezji.

W CSS widzę trzy możliwości ustalenia długości wiersza. Najprościej oczywiście nadając odpowiednią długość kontenerowi, w którym zamykamy tekst.

p.kolumna1 { width: 465px; }

p.kolumna2 { width: 40%; }

p.kolumna3 { width: 33em; }

W druku ten element jest dość prosty. Twórca ustala sztywno wielkość tekstu i może dopasować do tego długość linii. Projektując dla urządzeń elektronicznych trzeba jednak mieć na uwadze to, że użytkownik sam może zmienić wielkość czcionki (a czasami zrobi to za niego urządzenie, na którym stronę przegląda).

W pierwszym przypadku długość wiersza będzie miała dokładnie 465 pikseli, co odpowiada mniej-więcej 66 znakom dla tekstu wielkości 14 pikseli. Oczywiście, w praktyce wszystko zależy od używanego fonta, więc trzeba do tego podchodzić indywidualnie i za każdym razem policzyć znaki. Co ważne – jeśli czytelnik zmieni tę wartość do 16 pikseli, zmniejszy się również ilość znaków w wierszu.

Logiczne wydaje się w takim razie zastosowanie wartości relatywnych. Używając procentów tak na prawdę oddajemy decyzję o długości wiersza w ręce użytkownika. Jeśli będzie chciał go zwiększyć, może zmaksymalizować okno przeglądarki. Jeśli uzna, że wolałby krótszy wers, może okno zmniejszyć. Krótka chwila na zastanowienie i dochodzimy do wniosku, że nikomu z nas nie chce się manipulować oknem przeglądarki dla pojedynczej strony, a użytkownicy urządzeń mobilnych nie mogą zmienić wielkości okna.

Wcześniej wspominałem już, że wielkości dotyczące tekstu najkorzystniej ustawiać z pomocą em. W trzecim przykładzie długość linii wynosi 33 em, czyli 462 piksele dla tekstu wielkości 14 pikseli, ale jeśli użytkownik zwiększy tę wielkość do np. 16 pikseli, długość linii również się zwiększy i będzie wynosić już 480 pikseli. Dzięki temu w wierszu ilość znaków zawsze pozostanie taka sama, niezależnie od ustawionej przez użytkownika wielkości tekstu.

No dobra, ale co z naszym layoutem, który przecież ma określone wymiary i w którym długi wiersz się nie zmieści? Idealny layout to taki, w którym taka sytuacja nie zajdzie, bo wszystkie wartości dostosowują się zarówno do wielkości tekstu jak i ekranu, na którym wyświetlana jest strona. W praktyce rzadko udaje się taki ideał osiągnąć, więc możemy po prostu ograniczyć maksymalną długość linii. Nie w każdym designie taka sztuczka się sprawdzi, bo nie w każdym jest miejsce na większą długość linii. W praktyce więc, najczęściej na sztywno ustala się długość linii, choć – jeśli tylko jest taka możliwość – powinniśmy używać rozwiązań dających większe możliwości adaptacji.

p.kolumna3 { width: 33em; max-width: 600px; }

Typografia w sieci: Pamiętaj o odstępach między słowami

Odstępy między wyrazami wydają się być często pomijanym aspektem przy tworzeniu stron internetowych. Powód jest dla mnie oczywisty – używaliśmy standardowych fontów, które wyglądają czytelnie nawet przy domyślnych ustawieniach. Niedawno zyskaliśmy możliwość osadzania dowolnych fontów na stronach, a niektórym z nich na pewno przyda się ustawienie odstępów międzywyrazowych.

Pytanie kiedy zadbać o odstępy i co zrobić, żeby nie przegiąć? Prawda jest taka, że w większości przypadków można śmiało nie dotykać tej wartości, ponieważ domyślna zapewni optymalną czytelność tekstu. Są jednak miejsca, w których zmniejszenie bądź zwiększenie odstępów między wyrazami może dać korzystny efekt. Myślę tutaj o fontach pogrubionych, o szerokich literach i dużych odstępach między znakami. Ogólna zasada jest taka – im większy tekst i im więcej pustej przestrzeni między znakami (ale również w samych znakach), tym więcej przestrzeni należy zostawić między kolejnymi słowami. Dzięki temu ułatwimy czytelnikowi znalezienie miejsca, w którym kończy się wyraz. Znaczenie ma również kolor tekstu i tła pod nim. Jeśli użyjemy w tle tekstury, która może miejscami mieszać się z tekstem (oczywiście nie powinniśmy, ale to toporny przykład, żeby pokazać zasadę), również warto zwiększyć odstępy.

Natomiast kiedy powinno się je zmniejszać i czy w ogóle ma to sens? Owszem, czasami ma. Pamiętajmy, że podstawą dobrej typografii jest dobra czytelność tekstu. Istnieją fonty, w których można ułatwić odbiór treści zmniejszając odstępy między wyrazami. W takich przypadkach warto zwrócić uwagę na to, czy przy czytaniu nasz wzrok nie musi skakać za daleko do kolejnego wyrazu. Jeśli złapiemy się na tym, że zamiast płynnie poruszać oczami, skaczemy od końca jednego słowa do początku następnego, może to być sygnał, że trzeba zmniejszyć odstępy.

Zbyt małe i odopowiednie odstępy między słowami w tekscie

Pamiętajmy jednak, że istnieje wiele metod czytania. Osoba, która czyta dużo najprawdopodobniej nie robi tego w sposób przedstawiony wyżej. Nie musi równomiernie płynąć wzrokiem po kolejnych literach. Zamiast tego ustawia wzrok na środku każdego z nich i stara się objąć wszystkie znaki. Wtedy również musi mieć możliwość zaczepienia początku i końca aktualnie czytanego wyrazu. Mówi się, że przy regularnych ćwiczeniach z czasem wyłapuje się już nie pojedyncze wyrazy, ale nawet kilka. Łatwo wyobrazić sobie jakim utrudnieniem byłoby takie czytanie, gdyby odstępy międzywyrazowe utrudniały rozpoznanie kolejnych słów.

Wszystko to wymaga oczywiście praktyki, a najczęściej wystarczy nam domyślnie proponowana wielkość. Przy eksperymentowaniu najlepiej zasięgać opinii jak największej ilości czytelników – każdy z nich na pewno czyta odrobinę inaczej.

W CSS do regulowania odstępów między wyrazami używa się właściwości word-spacing, która domyślnie ma wielkość około 0,25 em (choć w praktyce zależy to od obranego fontu).

p { word-spacing: 0.3em }

p { word-spacing: -0.3em }

W pierwszym przykładzie powiększyłem odstępy między wyrazami o 0,3 em, natomiast w drugim pomniejszyłem o tę samą wartość. Prawdą jest, że możemy korzystać tutaj nie tylko z emów, ale również z pikseli. Byłby to jednak błąd. Ustawione na sztywno wartości spowodowałyby, że przy powiększeniu rozmiaru tekstu o 10 pikseli przez użytkownika, odstępy między wyrazami pozostałyby cały czas takie, jakie ustawiliśmy dla czcionki o rozmiarze 12 piskeli. Wartości te muszą zmieniać się płynnie w zależności od rozmiaru tekstu.

Typografia w sieci: Jednostki wielkości

W CSS do dyspozycji dostajemy kilkanaście różnych jednostek wielkości. Użycie części z nich wydaje się być dość oczywiste, jednak koderzy często nie są świadomi, że za każdą z nich kryje się swojego rodzaju „drugie dno”. Poza tym wydawało mi się, że warto wspomnieć o takich podstawach, żeby nie wyjaśniać wszystkiego później.

Jednostki absolutne

Jednostki absolutne to takie, które w założeniu mają stały wymiar niezależnie od miejsca ich użycia. Oczywistym przykładem będą cale, centymetry czy milimetry. Nie są to raczej popularnie stosowane wielkości, głównie ze względu na brak skalowalności. Być może chcemy, żeby tekst na ekranie komputera miał 3 centymetry wysokości, ale pomyślmy jak duże te trzy centymetry wydają się kiedy otworzymy tę samą stronę na telefonie komórkowym. Jednostki tego typu sprawdzać się mogą na przykład w osobnej wersji strony internetowej przygotowanej specjalnie do druku (za pomocą media queries).

Osobną kwestią są piksele. Zaliczane były przez długi czas do jednostek absolutnych, ale to nie do końca prawda. Pamiętajmy, że jeden piksel też może mieć różne wymiary fizyczne. Na przykład piksel na moim monitorze ma około 0,257 milimetra, ale już piksel na telewizorze w pokoju obok to 0,639 milimetra, a w iPhone 4 ma zaledwie 0,077 milimetra. Mam nadzieję, że widać tu już wyraźnie główną wadę piksela – nigdy nie mamy pewności na jakim urządzeniu wyświetlona zostanie strona, więc nie możemy założyć, że tekst wielkości 12 px nie będzie np. za mały na telewizorze.

Oczywiście większość software radzi sobie z tym bez większego problemu, przeskalowując tekst dla odpowiedniej widoczności. Podobnie bez większych problemów przeglądarki internetowe potrafią zoomować stronę internetową powiększając tekst razem z resztą elementów. Zdania na temat używania bądź nie używania pikseli do określania wielkości związanych z tekstem są podzielone, ale mówi się raczej, że lepszym wyjściem jest używanie jednostek relatywnych.

Jednostki relatywne

Jednostki relatywne to te, które w jakiś sposób zależą od innej wartości. Idealnie nadają się do operowania na rozmiarach związanych z tekstem, ponieważ bezproblemowo skalują się z jednego medium do drugiego (np. z monitora na ekran smartphone’a).

Podstawową i jedną z najczęściej wykorzystywanych jednostek relatywnych jest em. Nazywa się tak, ponieważ wielkość jednostki jest w założeniu zbliżona do szerokości wielkiej litery M. Jest to jednak wielkość relatywna w stosunku do font-size. Jak to działa w praktyce?

<p>Lorem ipsum <span>dolor</span> sit amet, consectetur adipiscing elit.</p>
p { font-size: 16px; }
span { font-size: 1.5em; }

Nadajemy elementowi <p> wielkość czcionki 16px. Element <span> dziedziczy tę wielkość, jednak zmieniliśmy ją na 1.5em. W praktyce oznacza to, że powiększamy wielkość tekstu o 50% w stosunku do elementu nadrzędnego (więc będzie równa 24px). Warto pamiętać, że em zawsze będzie odwoływać się do wielkości tekstu, nawet jeśli użyjemy go np. w width.

Em technicznie jest bardzo fajnym narzędziem, ponieważ pozwala manipulować wielkościami w zależności od tego, co na stronie najważniejsze, czyli treści. Nie są jednak zbyt wygodne w użyciu, ponieważ wymagają liczenia i sprawdzania jaką wartość ma element nadrzędny. Łatwo sobie wyobrazić, że przy kilkunastu zagnieżdżonych elementach można się zgubić. Z pomocą przychodzą nam różne narzędzia, które pomogą policzyć odpowiednie wartości jak np. Em Calculator.

Oprócz tego, wraz z pojawieniem się CSS3 do dyspozycji oddano nam ciekawą alternatywę dla em, która jest o wiele wygodniejsza w użyciu. Jest nią rem. Od swojego poprzednika różni się tym, że jest relatywna tylko w stosunku do głównego elementu strony (czyli najczęściej <body>). Nie musimy dzięki temu każdorazowo obliczać wielkości w stosunku do kolejnych elementów. Niestety jest to jednostka nowa i minie trochę czasu zanim będzie wspierana przez większość używanych przeglądarek.

Warto pamiętać również o procentach, które od czasu do czasu przydają się również w manipulowaniu wartościami związanymi z tekstem.

AJAX, HTML5 i Internet Explorer < 9

Problem z IE w wersji mniejszej niż 9 jest taki, że kiedy pobieramy kod HTML5 z zewnętrznego źródła przez AJAX, silnik nie rozpoznaje nowych elementów. Nawet jeśli użyjemy html5shiv, którego zadaniem jest „nauczenie” IE, że takowe istnieją. Na szczęście z pomocą przychodzi nam biblioteka innershiv, która przeparsowuje kod i zwraca go w postaci zrozumiałej dla IE. Jej użycie samo w sobie może być mało wygodne, ale łącząc ją z jQuery jest już dużo przyjemniej.

Przede wszystkim trzeba dołączyć plik z kodem JavaScript widoczny tylko dla starszych wersji IE i samo innershiv.js. Proponowałbym wszystko wrzucić do jednego pliku – mniej połączeń do serwera.

<!--[if lt IE 9]>
	<script src="/files/ie.js"></script>
<![endif]-->

W nim samym korzystamy z fajnej funkcji w jQuery, czyli $.ajaxSetup w połączeniu z dataFilter, które jest wywoływane zanim zwrócone dane dostaną się do metody success, dzięki czemu możemy je odpowiednio przygotować przed wyświetleniem:

$.ajaxSetup({
	dataFilter: function(data, dataType){
		if(dataType == 'html'){
			return innerShiv(data, false);
		}
		else {
			return data;
		}
	}
});

Od tej pory wszystkie zwrócone w AJAX wartości będą parsowane przez innershiv, a Internet Explorer poradzi sobie z nimi bez problemu. Ważne jest tylko, żeby pamiętać, że zwrócone dane muszą być typu html, więc do zapytań AJAX proponuję na wszelki wypadek dodawać dataType: 'html'.

Jeszcze lepsze osadzanie fontów z pomocą @font-face

W ostatnio opublikowanym poradniku używałem kodu zaproponowanego przez Paula Irisha. Tymczasem okazuje się, że do używania własnych czcionek przez @font-face na wszystkich przeglądarkach wystarczy znacznie prostszy hack. Jest tak zgrabny, że do zwykłego, czystego kodu wystarczy dodać jeden znak.

@font-face {
	font-family: 'MojFont';
	src: url('mojFont.eot?') format('eot'), 
	     url('mojFont.woff') format('woff'), 
	     url('mojFont.ttf')  format('truetype'),
	     url('mojFont.svg#font') format('svg');
	}

Piękne w powyższym kodzie jest to, że jedynym dodatkowym elementem jest znak zapytania postawiony na końcu URLa do pliku dla Internet Explorera. Cała reszta to najzwyczajniejszy i najbardziej poprawny kod w życiu. Powyższe rozwiązanie zaproponował Ethan Dunham i wyjaśnia, że kiedy IE zauważa znak zapytania, myśli że dalsza część kodu to po prostu URL w postaci jakiej używają języki server-side (po nim najczęściej dopisuje się kolejne zmienne np. index.php?nme=lore). Najpiękniejszy hack jaki widziałem.

Kompletna instrukcja używania @font-face

Designerzy stron internetowych dostali do ręki potężne narzędzie. Mogą teraz niemal dowolnie przebierać w potężnej bazie rozmaitych fontów i używać ich na stronach internetowych. Do tej pory byliśmy ograniczeni do tego, co na swoim komputerze zainstalowane miał użytkownik, więc – w praktyce – do fontów, które dostępne były standardowo z systemem operacyjnym. Trochę ograniczało to pole do popisu, zwłaszcza kiedy chcieliśmy wyróżnić stronę. Było co prawda kilka technik, które pozwalały używać w jakimś stopniu własnych fontów – umieszczanie ich w obrazkach, albo wyświetlanie przy połączeniu JavaScript i Flasha. Tyle, że nie było to wygodne rozwiązanie. Nawet nie tyle dla twórców, co dla użytkowników.

Całe szczęście, ktoś to zauważył i w CSS3 (właściwie wcześniej, jednak przeglądarki nie wspierały ówczesnych rozwiązań) mamy możliwość osadzania na stronach dowolnego fontu.