W dzisiejszych czasach każdy może zostać wydawcą, nie ponosząc przy tym zbyt wielkich nakładów albo wcale. Jednym ze sposobów na publikowanie jest blog. Głównie wartość merytoryczna decyduje o poczytności, ale nie tylko. W wymianie myśli za pomocą tekstu pisanego bardzo istotna jest również estetyka, której chyba najważniejszym aspektem jest typografia. Kiedy mówię z kimś o typografii, najczęściej obserwuję na jego twarzy zakłopotanie, bo dla wielu osób typografia, to po prostu „kosmos”.
 Dwunastego grudnia brałem udział w konferencji poświęconej WordPressowi — systemowi zarządzania treścią na stronach www, szeroko używanemu do utrzymywania blogów. Przedstawiam zapis wideo i najważniejsze fragmenty towarzyszącej wykładowi prezentacji. Skupiam się przede wszystkim na mikrotypografii (i to w dość wąskim ujęciu), pomijając zagadnienia kompozycji, barwy, kroju czy stopnia pisma etc.
 Mikrotypografia, a więc «mikrokosmos». Podczas dyskusji padło kilka obietnic i postulatów, które poniżej chciałbym zrealizować.

Omawiany plugin do WordPressa — wp‑Typography autorstwa Jeffreya Kinga — pozwala na automatyczną kontrolę tekstu pod kątem mikrotypograficznym. Ta kontrola nie jest doskonała — nie wszystkie błędy składu zostaną wyeliminowane — jednak prawidłowa konfiguracja znacznie podniesie estetykę i czytelność tekstu. Wbrew wcześniejszym założeniom dokonałem drobnych zmian w kodzie, z czego wynika kilka znaczących usprawnień — POBIERZ wp-typography-pl.zip [1,1 MB].

Semantyka
Dość często obserwuję u osób, które są mistrzami kodowania (CSS, PHP, HTML itd.) braki w terminologii — posługują się kalkami językowymi i nazywają różne rzeczy bardzo śmiesznie. Załączam więc słowniczek kilku podstawowych pojęć, który — mam nadzieję — pomoże nam się lepiej rozumieć.

bękart widow
wiersz zawieszony, końcowy wiesz akapitu, który znalazł się na początku łamu bądź kolumny

czcionka type, fount
krotło; nośnik pisma wykonany najczęściej ze stopu drukarskiego, używany w druku typograficznym

dywiz hyphen
łącznik; znak wykorzystywany do łączenia lub dzielenia wyrazów; najczęściej ma kształt krótkiej poziomej kreski, ale może być również umieszczony pod innym kątem, posiadać nietypowy kształt, a nawet składać się z dwóch kreseczek

font font
cyfrowy nośnik pisma

firet em
względna jednostka miary, równa stopniowi pisma

fotoskład photo­type­setting, photo­compo­sit­ing
skład fotograficzny; metoda składu tekstu oparta o urządzenia fotograficzne, tzw. fotoskładarki; mimo przeróżnych konstrukcji, obowiązywała ta sama zasada działania: funkcję nośnika pisma pełniło światło przechodzące przez fotomatrycę

interlinia leading, line spacing, interline spacing
odstęp międzywierszowy; odstęp międzyakapitowy; przestrzeń między kolejnymi wierszami

justowanie justification
wypełnianie składu justunkiem, w praktyce komputerowej sprowadza się to do wyrównywania wiersza, łamu, lub kolumny jednostronnie (do lewej lub do prawej) albo obustronnie

kolumna 
obszar stronicy pokryty tekstem

korytarz river
widoczna przestrzeń w składzie, utworzona przez zbyt szerokie spacje, powtarzające się w kolejnych wierszach

krój pisma typeface
a) jeden z atrybutów pisma drukarskiego, decydujący o kształcie liter; b) pismo drukarskie

linia line
a) długa kreska, pełniąca w składzie rolę kompozycyjną (np. rozdzielenie łamów czy ozdobnik); b) jeden z kilku parametrów pisma drukarskiego, wyznaczający podstawę (linia bazowa), granicę wydłużeń górnych (linia wydłużeń górnych), dolnych (linia wydłużeń dolnych) itp.; c) długa linijka

linijka [typograficzna] ruler, typometer, type gauge
przyrząd do pomiarów, kreślenia, makietowania etc., wyposażony w podziałki z miarami metryczną i typograficznymi bądź tylko typograficznymi

linotyp linotype, Linotype typesetting machine
urządzenie do składu gorącego, w którym linotypista przy użyciu klawiatury wprowadzał tekst, a maszyna odlewała ze stopu drukarskiego gotowe wiersze [linotypowe], które układane jeden za drugim tworzyły szpaltę

łam column
połamana szpalta; blok tekstu, składający się najczęściej z kolejnych akapitów, stanowiący część kolumny lub (w szczególnym przypadku) z nią tożsamy

monotyp monotype, Monotype typesetting machine
zespół urządzeń do składu gorącego — tastra, na którym monotypista składał przy użyciu klawiatury, i odlewarki, która zakodowany na taśmie perforowanej skład odlewała w postaci pojedynczych czcionek zestawionych w szpalty; po rozmontowaniu składu, czcionek monotypowych można było używać w składzie ręcznym

pauza em dash
kreska o długości firetu, używana najczęściej w funkcji myślnika, współcześnie rzadziej niż półpauza

pismo drukarskie type, typeface
graficzna postać języka przewidziana do masowego powielania i zachowująca powtarzalność, w przeciwieństwie do np. pisma ręcznego (script ); pisma używane na stronach www również uważa się za drukarskie, ale zostały one poddane specjalnemu zabiegowi hintingu — dostosowania do wyświetlania na ekranie

podcięcie hanging indent
wpuszczenie wgłąb łamu wszystkich wierszy akapitu, poza pierwszym [jak w niniejszym słowniczku]

półfiret en
względna jednostka miary, równa połowie stopnia pisma

półpauza en dash
kreska o długości półfiretu, używana najczęściej w funkcji myślnika

skład typesetting, compo­sit­ing, compo­sit­ion
a) tworzenie szpalt; czynność polegająca na układaniu tekstu z czcionek bądź wprowadzaniu go za pomocą klawiatury; b) połamany (przygotowany do publikacji lub opublikowany) tekst

skład gorący hot-metal typesetting, hot-metal compo­sit­ing
technologia składu w metalu, polegająca na maszynowym odlewaniu przygotowanych wcześniej szpalt lub wierszy, w składzie ręcznym kolejność jest odwrotna

skład ręczny typesetting, compo­sit­ing
technologia składu przy użyciu odlanych wcześniej (bądź wyprodukowanych inną metodą) czcionek

spacja space
odstęp międzywyrazowy, typowa spacja ma szerokość od 1/4 do 1/3 firetu, specyfikacja UNICODE przewiduje również spacje specjalne, które można wprowadzać wprost lub za pomocą encji

spacjowanie tracking, letter-spacing
powiększanie odstępów międzyliterowych w całych słowach, koniecznie należy je stosować w wyrazach złożonych wersalikami bądź kapitalikami — dla podwyższenia ich czytelności — czasami używa się go jako wyróżnienia

stereotyp stereotype
forma drukowa w całości odlana z żeliwa lub stali, będąca kopią (formą wtórną) przygotowanej w składzie ręcznym bądź gorącym formy pierwotnej

szewc orphan
pierwszy wiersz akapitu, który pozostał na końcu łamu bądź kolumny

wersalik capital letter (plur.: all caps, all capitalized ), majuscule
majuskuła, wielka litera

wcięcie [akapitowe] [paragraph] indent, [first line] indent
wpuszczenie pierwszego wiersza akapitu wgłąb łamu, najczęściej o 1/2 do 1 1/2 firetu

wiersz line
a) fragment składu (tekstu), mieszczący się na jednej linii, w obrębie jednego łamu; b) w składzie gorącym, odlew zawierający pojedynczy ciąg znaków; wiersz linotypowy (slug )

zawieszone słowo 
jednoliterowe słowo — spójnik lub przyimek — na końcu wiersza, w bardziej cyzelowanym składzie uważa się niekiedy za takie również słowa dwu- lub trzyliterowe

Podczas wykładu padła kilkakrotnie sugestia przygotowania jakichś wskazówek dotyczących typografii. Oto garść dobrych rad. Chcesz swoim projektom lub internetowym publikacjom dodać nieco blasku? Praktykuj. Pamiętaj, że w uzasadnionych przypadkach możesz odstąpić od ścisłego przestrzegania reguł.

Ustalaj właściwą szerokość łamu
Średnia maksymalna długość wiersza powinna wynosić 68–72 znaków. Jeśli z jakichkolwiek powodów potrzebujesz szerszego łamu, powiększ również interlinię. W przeciwnym razie czytelnik dostanie oczopląsu.

Dobieraj odpowiednią interlinię
Weź pod uwagę przede wszystkim: krój i stopień pisma, szerokość łamu. Znaczenie ma też kolor tła czy samych liter. Jeśli któryś z tych parametrów się zmienia, musisz zmienić interlinię. Nie może być zbyt mała, ani zbyt duża. Poeksperymentuj.

Wyrównuj do lewej
Łamanie tekstu w chorągiewkę zaoszczędzi wielu kłopotów tobie i twoim czytelnikom. Przede wszystkim spacje będą mieć tę samą szerokość. Oczywiście — jeśli bardzo chcesz — możesz wyrównywać tekst obustronnie, ale miej świadomość, że może to utrudnić jego odbiór.

Zawsze dziel wyrazy
Dzielenie wyrazów pozwoli uniknąć korytarzy w tekście wyrównanym obustronnie, a w tekście wyrównanym do lewej uporządkuje trochę chorągiewkę. Dzielenie wyrazów w języku polskim podlega zasadom morfologii, a nie fonetyki — chodzi o przenoszenie wyrazów nie w miejscu podziałów sylabowych, lecz zgodnie z cząstkami znaczeniowymi (morfemami). Prawidłowe miejsca podziału podaje słownik ortograficzny PWN.

Szanuj ortografię
— myślnik oznacza zatrzymanie wypowiedzi, zastanowienie, nie powinno być myślników zbyt wiele, aby tekst nie stracił ciągłego charakteru, przedstawiaj go za pomocą półpauzy (względnie pauzy) otoczonej spacjami;
— nie stawiaj wielu kropek — czterech, pięciu, ani nawet trzech — używaj wielokropka, w zależności od kontekstu powinien on przylegać do słowa poprzedzającego lub następującego;
— pozostałe znaki interpunkcyjne przyklejaj do poprzedzającego je słowa (bez spacji po lewej stronie);
— używaj pojedynczego wykrzyknika lub pytajnika, a jeśli chcesz podkreślić emocje — podwójnego, nie więcej, żeby nie uznali cię za psychopatę;
— możesz używać, w szczególnych przypadkach, zbiegów znaków interpunkcyjnych: «?!» i «!?», innych w języku polskim nie ma;
— jeśli nie dysponujesz wystarczającym słownictwem, możesz używać emotikonów :-P
— unikaj dzielenia wyrazów w miejscu ich łączenia;
— unikaj jednoliterówek na końcu wiersza, jeśli nie chcesz by twoi czytelnicy rzucali mięsem;
— żeby nie musieli się zastanawiać „co autor miał na myśli”, unikaj myślnika na początku wiersza;
— używaj prawidłowych cudzysłowów pierwszego stopnia: „…”, jako cudzysłowy drugiego stopnia (wewnętrzne) możesz stosować «…» lub »…«, ale konsekwentnie;
— stosuj indeksy i frakcje jeśli trzeba;

Uważaj, diabeł tkwi w szczegółach
— nie używaj podkreślenia;
— nie wyróżniaj dłuższych partii tekstu pochyleniem;
— unikaj podwójnych wyróżnień, np. pochylenie z pogrubieniem czy cudzysłowem, odstęp międzyakapitowy z wcięciem itd.
— akapity lepiej wyróżniać większą interlinią, ale nie większą niż jeden wiersz;
— koduj tekst w UTF-8;
— nie wariuj z kolorami, pamiętaj że najczytelniejszym zestawieniem jest czarny tekst na białym tle
— unikaj zdjęć w tle (pod tekstem);
— tam, gdzie zachodzi potrzeba, używaj encji;
— do projektowania układów typograficznych korzystaj z generatorów tekstu polskiego;
— ograniczaj ilość krojów na stronie do minimum;
— jeśli używasz pisma pochyłego w nawiasie prostym, sprawdź, czy przed nawiasem zamykającym nie potrzeba cienkiej spacji;
— nie oddzielaj jednostek od miar;
— stopień pisma nie powinien być zbyt mały, ani zbyt duży;

Ustawiamy wp-Typography
Wtyczkę udostępniono na licencji GPL, co ma swoje zalety i wady. Poniżej link do wtyczki w polskim tłumaczeniu. Zdecydowałem się wprowadzić drobne zmiany w kodzie wtyczki. Nie wykluczam, że w przyszłości dodam jakieś jeszcze ulepszenia.
 Należy ją zainstalować, tzn. rozpakować i folder o nazwie «wp‑typography» wraz z zawartością umieścić na serwerze w katalogu wyszczególnionym poniżej.

../wp-content/plugins/

Panel ustawień można odnaleźć w kokpicie: USTAWIENIA » WP‑TYPOGRAPHY (adres poniżej).

../wp-admin/options-general.php?page=wp-typography

POBIERZ wp-typography-pl.zip [1,1 MB], zainstaluj i przejdź do konfiguracji. Jeśli posiadasz już wp‑Typography w wersji angielskiej, nadpisz ją.
 Wraz z tłumaczeniem przygotowałem wstępne (domyślne) ustawienia, które różnią się od oryginalnych. Tak więc, jeśli miałeś już zainstalowaną wtyczkę, po wgraniu polskiej wersji włącz ustawienia domyślne. Obejrzyjmy jeszcze raz panel administracyjny.

Źródła
Pierwszy moduł zawiera odsyłacze do stron autora. Ważne, że obowiązuje licencja GPL, oraz, że jest dostępny kod PHP, który można wdrożyć na dowolnej stronie www, nieopartej o WordPressa.

Ogólne ustawienia
W drugim module można zdefiniować elementy HTML, które nie będą podlegać przetwarzaniu. Zastosowanie praktyczne: jeśli jakieś słowo lub słowa nie powinny być dzielone, wystarczy je ująć w odpowiednie tagi.

<span class="noTypo">…</span>
<p class="noTypo">…</p>

Oczywiście, to tylko prosty przykład, możliwości jest dużo więcej.

Dzielenie wyrazów
Dzielenie wyrazów należy włączyć bez względu na to, czy tekst wyrównujemy obustronnie, czy tylko do lewej. W obu przypadkach poprawisz w ten sposób wygląd łamu. Jeśli obustronnie wyrównywane są też nagłówki, należy włączyć dzielenie również dla nich.
 W dolnej części modułu znajduje się pole, w którym można dołączyć listę słów z własnymi regułami dzielenia. Sensownie można je wykorzystywać wyłącznie w tekstach łamanych w chorągiewkę. Rygorystyczne dzielenie wyrazów na stronach www, w połączeniu z obustronnym wyrównaniem spowoduje problemy! Dziury i korytarze, których nie chcemy. Posługuj się więc zasadą mniejszego zła i jeśli nie wyrównujesz do lewej, nic nie zmieniaj.

Inteligentna podmiana znaków
Niestety, te opcje nie są tak inteligentne, jak by się chciało. Cudzysłowy co prawda prawidłowe, jednak oryginalny kod pozwalał na używanie w funkcji myślnika tylko pauzy. Zdecydowałem się wprowadzić zmianę. Wszystkie dywizy otoczone spacjami zostaną zamienione na półpauzy, podobnie podwójne dywizy [ -- ], jednak jeśli masz fantazję używać pauzy, możesz ją wstawiać za pomocą trzech dywizów [ --- ].
 Trzy kropki zamieniaj na wielokropek — rzecz oczywista. Podmiana diakrytyków w języku polskim raczej nie będzie miała zastosowania, chyba, że dla obcych słów. Jeśli masz dobrze opracowaną listę, możesz włączyć. Uproszczone znaki zastrzeżeń, to bardzo wygodna opcja, a więc domyślnie pozostaje włączona. Przyrostki liczebników porządkowych nas nie dotyczą.
 Matematyka. Wielka szkoda, że działa nieobliczalnie. Druga opcja z tej serii (ułamki) zadziała tylko, jeśli będziemy mieć włączone zawijanie po łączniku — absurd. Mimo to zalecam korzystanie z tej opcji. Wprowadzanie unikodowych znaków ułamków na www, szczególnie w małych stopniach, nie wchodzi w grę ze względu na totalny brak czytelności. Popatrz.

⅜ —— 3/8

Na www należy posługiwać się w tym wypadku nie frakcjami, lecz indeksami, dodatkowo cyfry w licznikach i mianownikach powinny być tylko nieznacznie mniejsze od podstawowego stopnia pisma.

Kontrola tekstu przy użyciu niestandardowych spacji
Niestandardowe spacje to: nierozdzielna, cienka, zerowej szerokości itd. Po każdym jednoliterowym słowie zwykła spacja zostanie zamieniona na nierozdzielną — tak powinno być, ale nie jest. Wyjątkiem są dwie jednoliterówki obok siebie. Jeśli chcesz, aby żadna nie wisiała na końcu wiersza, po każdej z nich wstaw encję nierozdzielnej spacji zamiast zwykłej.

 

Cienkie spacje między myślnikiem, a słowem zamiast zwykłych, to anglosaski zwyczaj. Miałyby one sens gdybyśmy w funkcji myślnika stosowali pauzę, ale ważniejsze byłoby uniknięcie myślnika na początku wiersza. A więc, bez względu na to, czy myślnikiem jest pauza, czy półpauza, należy poprzedzić ją nierozdzielną spacją (encja powyżej). Ergo nie ma potrzeby korzystania z tej opcji.
 Kolejne trzy opcje, to oczywistość oczywista (sic ). Można dowolnie rozszerzyć listę miar. Natomiast unikanie pojedynczych słów na końcu akapitu w pewnej mierze pozostaje opcją uznaniową. Warto ją włączyć w szerokim łamie, w wąskim nie będzie konieczna.
 Zawijanie po łączniku — inaczej mówiąc, zezwolenie na dzielenie wyrazów w miejscu łączenia — nie powinno być dopuszczalne. Polska ortografia pozwala na podzielenie w tym miejscu, ale dywiz powinno się powtórzyć w następnym wierszu. Wp‑Typography tego nie umożliwia.
 Arcyprzedziwnym błędem jest uzależnienie poprawnego renderowania ułamków od włączenia właśnie tej opcji. Jeśli chcemy mieć ładne ułamki, musimy więc pozostawić ją włączoną, a zakaz dzielenia słów z łącznikiem realizować przez ręczną podmianę łącznika na twardy dywiz (encja poniżej), którego ani HTML, ani wp‑Typography nie rozpoznaje (jest renderowany, jak zwykły dywiz).

‑

 Zawijanie adresów email i URL-i jest realizowane przez dodanie spacji zerowej szerokości po każdej kropce i znaku at (@). Ostatnia opcja w tej sekcji pozwala wyłączyć zawijanie w Internet Explorerze 6 i również powinna zostać włączona.

Haki CSS
Ostatni moduł pozwala na zdefiniowanie wyjątków za pomocą tzw. haków. W czterech szczególnych sytuacjach możemy włączyć automatyczne oznaczanie fragmentów tekstu klasą, którą następnie opiszemy w arkuszu stylów. Ponadto można dołączyć własne fragmenty kodu CSS.

To chyba już wszystko o użyteczności wp‑Typography, ale jeszcze kilka uwag o błędach i ważniejszych problemach.

 1. Miękkie dywizy są wstawiane w całym tekście. Ujawniają się tylko wtedy, gdy zachodzi potrzeba przeniesienia słowa do kolejnego wiersza. Czasami jednak się zdarza, że cały tekst jest upstrzony dywizami. O co chodzi? Problem sprawiają fonty, które w zestawie znaków nie zawierają miękkich dywizów, w takim wypadku są one traktowane jak zwykłe. Innym źródłem nieprawidłowości może być brak obsługi bądź pełnej obsługi UNICODE przez przeglądarkę lub oprogramowanie serwera.

2. Zawieszone słowo nie zostanie wykryte, jeśli jest ich więcej pod rząd.

3. Myślniki będą się pojawiać na początku wiersza.

4. Matematyka działa nieobliczalnie.

5. Pochylone słowa stykają się z nawiasem zamykającym. Można temu zaradzić wstawiając cienką spację (encja poniżej).

 

6. Opcja zawijania po łączniku działa tylko ze zwykłym dywizem, nie będzie działać z twardym. To wynika raczej ze specyfikacji HTML i jest plusem, ponieważ możemy wprowadzić do tekstu dodatkowy dywiz, który będzie posiadał takie same atrybuty, jak zwykły (niepodzielność), ale przez wp‑Typography zostanie pominięty w przetwarzaniu (nie pojawi się po nim spacja zerowej szerokości).

7. Haki CSS mają polepszyć estetykę i czytelność, niemniej jednak nie w każdym projekcie będą się sprawdzać. Można i należy je samemu modyfikować. W niniejszej wersji dokonałem kilku istotnych zmian.

.caps — dodałem spacjowanie do klasy «caps» równocześnie zmieniając rozmiar wersalików na 95%; okazało się, że rozświetla ona spację po słowie, ale nie przed i bardzo źle to wygląda, dlatego dodałem również trochę światła przed spacjowanym słowem;
— uwaga: słowa na początku akapitu, złożone wersalikami będą potrzebować korekty o 20/100 firetu w lewo (-0,2 em);
— nie zostają wykryte ciągi wersalików zawarte w cudzysłowie, choć w nawiasie już tak;

.numbers — zmieniłem spacjowanie i stopień pisma dla cyfr; potrzebna korekta dla cyfr rozpoczynających akapit wynosi 10/100 firetu; jeśli w projektach lub na blogu korzystasz z krojów zawierających cyfry nautyczne (z wydłużeniami dolnymi i górnymi), wyłącz tę opcję, cyfr tego typu (jak w piśmie Georgia) nie należy różnicować od tekstu głównego;

.sup i .sub — zmieniłem stopień pisma na 80% tekstu głównego; poprawiłem światła pionowe i poziome.

Zanim podam linki do innych źródeł, chciałbym podsumować konferencję. Wydaje mi się, że WordPress to przyszłość www. Łódzki WordCamp, jako zgromadzenie specjalistów lub osób, które pragną stać się specjalistami, wpisuje się niebywałą dynamikę całej społeczności użytkowników. Nie trzeba chyba mocno podkreślać, że ma ona zarobkowy charakter. Paradoksalnie, dynamikę tę potęguje fakt, że system jest otwarty.
 Kilka wystąpień bardzo pasowało do moich potrzeb, wśród nich „Tworzenie użytecznych paneli zarządzania” Marcina Bieguna i „WordPress + organizacje studenckie = sukces” Adama Klimowskiego.

Ważne źródła
Penguin Composition Rules for web Adaptacja zasad opracowanych przez Jana Tchicholda dla Penguin Books do potrzeb www
The Elements of Typographic Style Applied to the Web Adaptacja „Elementarza stylu w typografii” Roberta Bringhursta do potrzeb www
typografia.info Serwis Roberta Chwałowskiego na temat typografii
taat.pl Zbiór tekstów Tomasza Pęszora o typografii internetowej

Morfologia i ortografia
Wielki słownik ortograficzny Ogólnodostępny słownik internetowy, który wskazuje również prawidłowe miejsca dzielenia wyrazów

Informacje i zakupy w d2d.pl

 Książka jest mała, tania i bardzo ważna. Mam nadzieję dostać ją w ręce w przyszłym tygodniu, wtedy napiszę o niej więcej.

O książce na stronach wydawnictwa