Spis treści Skorowidz Poziom główny Poziom nadrzędny Wstecz Dalej

Jak wymusić jednolity wygląd
całego dokumentu

Najlepiej raz, a dobrze.

(ludowe)

Zamiast wstępu

Niniejszy przykład ma za zadanie wskazać, jak umiejętne użycie zestawu znaczników wyrażających związek tekstu z elementami formatowania oraz zestawu stylów wiążących elementy formatowania z wyglądem pozwala kontrolować jednolity wygląd całego dokumentu. W przykładzie zastosowano elementy znakowania z zestawu XHTML-1.1 i opis stylów zgodny z CSS-2, lecz przedstawione idee są całkowicie ogólne i dają się zastosować także w innych środowiskach tworzenia dokumentów, nie wyłączając procesorów dokumentacji typu WYSIWYG.

Zacząć trzeba od porządnego projektu budowy dokumentu, wyrażającego się przez dobór zestawu nazw elementów i stylów przeznaczonych do użycia oraz zasad ich używania. Stosujemy tylko znakowanie logiczne. Nie wolno ręcznie wymuszać odstępów, wcięć i wyrównań, numeracji ani postaci czcionki.

Wszystkie parametry graficzne mające obowiązywać domyślnie definiujemy w stylach domyślnych. Wszystkie inne parametry definiujemy wewnątrz opisu klas stylów.

Jak zwykle, kiedy omawiamy budowę konkretnego dokumentu, warto mieć przed oczami jego tekst źródłowy.

Znaczniki definiują sens

Analizę zaczniemy od przedyskutowania poszczególnych elementów naszego dokumentu. Jak łatwo zauważyć, składa się on z rozdziałów i podrozdziałów. Nieco trudniej dostrzec, że dzieli się on też na partie wyższego poziomu: część wstępną, część główną i aneks (wyrażone za pomocą ogólnego elementu blokowego div z atrybutem klasy stylu).

Podobnie jak w większości typowych dokumentów, tekst ciągły składa się z akapitów. Wszystkie akapity są sformatowane podobnie, i jest to sposób zaprojektowany specjalnie dla tego dokumentu. Mimo to żaden akapit nie zawiera informacji o sposobie jego przedstawienia.

W tekście pojawiają się równania i inne wyrażenia matematyczne, z których każde jest przedstawiane w podobny sposób. Na przykład poniższe równanie: x2 + y2 = R2, podobnie jak wszystkie inne równania w tym tekście, jest objęte znacznikiem stwierdzającym: to jest równanie, bez wskazywania jak równanie ma wyglądać. W szczególności znaczniki nic nie mówią o sposobie ani wyglądzie numeracji.

Dodatkowym elementem ułatwiającym analizę treści tekstu są tabele i rysunki.

Gęstość wody w zależności od temperatury
TemperaturaGęstość
T [°C]γ [kg/m3]
 0999.8
41000.0
10999.7
20998.2
30995.6
40992.2
50988.0
60983.2
70977.8
80971.8
90965.3
100958.3

Każda tabelka i obrazek są oznaczone znacznikami, stwierdzającymi: to jest tabela, to jest rysunek, to jest podpis (tabeli czy rysunku — to wynika z kontekstu), bez żadnych uwag szczegółowych o ich wyglądzie i rozmieszczeniu.

Księżyc o poranku
Księżyc o poranku

Domyślny sposób wyrównywania każdego z wymienionych elementów jest zdefiniowany w stylach. Tekst dokumentu nie zależy od sposobu jego zaprezentowania; jest to rzecz oczywista. Jednak w tym dokumencie żaden znacznik nie odnosi się do sposobu prezentacji.

Style wymuszają jednolitość

Domyślny sposób wyrównywania każdego z wymienionych elementów jest zdefiniowany w stylach. Tekst dokumentu nie zależy od sposobu jego zaprezentowania; jest to rzecz oczywista. W tym dokumencie żaden znacznik nie odnosi się do sposobu prezentacji.

Podział na części

Nietrudno zauważyć, że traktowanie nagłówków rozdziałów jest inne w części wstępnej, inne w części głównej i inne w aneksie. Różnice są widoczne w sposobie numerowania i w nazwach jednostek podziału.

Także zwykły tekst jest traktowany strukturalnie: jest on po prostu ujęty w znaczniki następujących po sobie akapitów. I nic więcej! A przecież czytając ten tekst widzimy, że wszystkie akapity, z wyjątkiem tych po nagłówkach rozdziałów i podrozdziałów, mają lekko wcięty pierwszy wiersz. Z kolei pierwszy akapit każdego rozdziału zaczyna się inicjałem. Wreszcie, tekst jest justowany, a odstępy międzyakapitowe są równe odstępom między wierszami, tzn. nie ma żadnego dodatkowego odstępu. Wszystko to widać podczas lektury tekstu sformatowanego, ale lektura pliku źródłowego nie wskazuje, by informacje te były rozsiane po tekście w postaci znaczników.

Fonty

Parametry pisma użytego do prezentacji tekstu nie są dla bieżącego dokumentu szczegółowo określone. W zestawie stylów wymuszono jedynie następujące zachowania:

Pozostałe szczegóły związane z fontami zależą od domyślnych parametrów przyjętych podczas formatowania (np. przez przeglądarkę).

Wyrównywanie

Zwykły tekst jest w bieżącym dokumencie justowany. Sprawdźmy, jakim sposobem osiągnięto ten efekt i jaki wysiłek jest potrzebny, by cały zwykły tekst wyrównać w chorągiewkę. Oto jest: wystarczy zmiana jednego wpisu w definicji stylu z p {text-align: justify} na p {text-align: left}.

W tej chwili nagłówki są centrowane. Do zmiany ich układu potrzebny jest wysiłek porównywalny z omawianym powyżej.

W zasadzie każdy akapit rozpoczyna się wcięciem ustalonej głębokości. Za taki układ odpowiada wpis p {text-indent: 1em} (em jest stosowaną w typografii jednostką odległości zależną od czcionki; można posłużyć się centymetrami, lecz wtedy głębokość wcięcia trzeba będzie jawnie dopasować do wielkości czcionki). Jednak pierwszy akapit w podrozdziale ma wcięcie zerowej głębokości: h3+p {text-indent: 0cm}. Jednak pierwszy akapit w rozdziale dodatkowo rozpoczyna się inicjałem, czyli literą nieco większą niż domyślna: h2+p {text-indent: 0cm} h2+p:first-letter {font-size: 200%}.

Równania są centrowane. Umieszczenie równania w tekście nie zaburza układu akapitów. Jeśli więc równanie przerywa ciągłość bloku akapitowego, to jego część znajdująca się poniżej równania nie stanowi początku nowego akapitu, chyba że… x2 + y2 = 25

… zażyczymy sobie tego, jawnie kończąc bieżący akapit i rozpoczynając nowy. Ale w typowych sytuacjach, zwłaszcza kiedy równanie umieszczamy wewnątrz zdania, nie powinniśmy tego robić.

Marginesy i odstępy

Odstępy pionowe nad tytułami różnych poziomów mają wysokość 2ex, a pod tytułami — wysokość 1ex. Ponieważ jednostka ex jest związana z wielkością czcionki, efektywny odstęp pionowy wokół tytułu zależy od poziomu jednostki: nagłówki rozdziałów są składane (domyślnie) większą czcionką, więc i odstępy są większe.

Wartości odstępów nad i pod akapitami są wyzerowane. Odstępy nad i pod równaniami mają wysokość 1ex.

Wszystkie wymienione przypisania są umieszczone w opisach stylów.

Tabele i rysunki są odsunięte o pewną wielkość od lewego marginesu. Numeracja równań jest odsunięta o pewną wielkość od prawego marginesu. Sposoby uzyskania tych efektów są standardowe: definicje szerokości marginesu w odpowiednim stylu.

Księżyc w południe
Księżyc na dobranoc
Strony świata
JA

Tło

Kolory tła tekstu głównego, tabel i rysunków zostały określone jako parametry ich stylów. Tym samym każda tabela, o ile nie zostanie zażądane inaczej, będzie przedstawiona w barwach opisanych w stylu.

Nazwy stron świata
północ
North
северь
zachód
West
запад
JAwschód
East
восток
południe
South
юг

Numeracja

Licz, licz! byleś się nie przeliczył.

(ludowe)

Od profesjonalnych środowisk formatowania dokumentów oczekuje się prowadzenia automatycznej numeracji rozdziałów, podobnie jak równań, rysunków i tabel. Formalizm, którym posługujemy się w bieżącym przykładzie, jest wyposażony w takie środki. Ich interpretacja we współczesnych środowiskach prezentacji dokumentów jest coeraz bardziej powszechna. Właściwy efekt zabserwujemy na pewno w przeglądarkach: Opera, Konqueror, Safari, Firefox i SeaMonkey; w innych przeglądarkach i edytorach formatujących możemy nie widzieć automatycznie generowanych numerów, albo nawet wszystkich automatycznie generowanych fragmentów.

W bieżącym dokumencie zastosowano automatyczną numerację rozdziałów i podrozdziałów. Nagłówki niższych poziomów nie są numerowane, ale w razie potrzeby ich numerowanie da się wymusić analogicznym sposobem.

Na przykład poniższe równanie: x2 + y2 = 2, podobnie jak wszystkie inne równania w tym tekście, jest objęte znacznikiem stwierdzającym: to jest równanie, bez wskazywania jak równanie ma wyglądać. W szczególności znaczniki nic nie mówią o sposobie wyrównywania, właściwościach użytej czcionki ani o ewentualnym sposobie prowadzenia numeracji.

Każda tabelka i obrazek są opatrzone podpisami, zawierającymi nazwy Tabela i Rysunek, uzupełnione bieżącym numerem, osobnym dla każdego typu ilustracji. Zarówno magiczne słowa, jak i numery są obecne tylko w prezentowanym dokumencie po sformatowaniu. W tekście źródłowym nie ma ich w ogóle. Wstawienie lub usunięcie jednej tabelki zmieni numery następnych tabel, lecz nie naruszy ciągłości ich numeracji.

Szczegóły numeracji

Nietrudno zauważyć, że numeracja rozdziałów nie występuje w części wstępnej, jest prowadzona od 1 w części głównej (przy czym rozdziały noszą nazwę Rozdział), zaś w aneksie znów rozpoczyna się od 1 (lecz rozdziały noszą nazwę Dodatek, zaś numery mają postać dużych liter łacińskich).

Podrozdziały mają numerację podwójną, rozpoczynającą się od 1 w każdym rozdziale. Nagłówek podrozdziału zawiera tylko numer i tytuł.

Tabele i rysunki mają ciągłą pojedynczą numerację w całym dokumencie.

Liczebniki główne odnoszące się do rzędów wielkości
LiczbaLiczebniki
polskieangielskiefrancuskierosyjskie
 0zerozerozéroнуль
100jedenoneuneодин
101dziesięćtendixдесять
102stohundredcentсто
103tysiącthousandmilleтысяч

Równania mają numerację podwójną, ciągłą w obrębie rozdziału: x2 + y2 = 4. Numery równań, ujęte w nawiasy okrągłe, są umieszczone z prawej strony, lecz nieco odsunięte od prawego marginesu.

Powyższy opis jest zgodny ze stanem bieżącym. Przedefiniowanie stylów spowoduje zmianę wyglądu całego dokumentu bez konieczności zmiany znakowania.

Style odpowiedzialne za numerację

Rozdziały

Skorzystaliśmy z określenia stylów dla nagłówków rozdziałów (element h2) i podrozdziałów (element h3) oraz dla ich pseudoelementów before.

Wystąpienie nagłówka rozdziału powoduje zwiększenie wartości licznika rozdzial i wyzerowanie licznika podrozdzial. Następnie wstawiana jest zawartość pseudoelementu h2:before, która (w części głównej) składa się z ciągu znaków Rozdział , wartości licznika rozdzial, kropki i spacji. Później będzie wstawiony tekst zawarty między znacznikami elementu h2 (czyli nagłówek bieżącego rodziału).

Równania

Równania, takie jak to: x2 + y2 = 17, ujęliśmy w znaczniki ogólnego elementu span z atrybutem klasy rownanie, której styl trzeba było zaprojektować. Do prowadzenia numeracji służą w nim liczniki o nazwach rownanie i rozdzial. Licznik rownanie jest zerowany na początku każdego rozdziału i zwiększany o 1 przy każdym użyciu znacznika otwierającego z atrybutem class="rownanie". Numerację udostępnia pseudoelement rownanie:after, związany z klasą rownanie.

Element span domyślnie jest traktowany jako element wierszowy, a równanie ma być blokiem. Da się to zrobić: span {display: block}. Zabieg ten ma na celu ominięcie ograniczeń wynikających z reguł zagnieżdżania elementów XHTML. Dzieki niemu stało się możliwe umieszczenie bloku równania wewnątrz bloku akapitowego.

Rysunki

Tabele i rysunki są wyposażone w swoje liczniki. Zwiększenie stanu licznika jest związane z elementem caption, będącego standardowym sposobem oznaczenia podpisu wewnątrz elementu table. O tym, czy chodzi o rysunek, czy o tabelę, decyduje klasa stylu (rysunek lub tabela) zastosowana do elementu table. Reguły stylów związane z tymi klasami decydują też o przedstawianiu podpisów: podczas formatowania są one umieszczane automatycznie nad tabelami, lecz pod rysunkami — zgodnie z tradycją.

Księżyc na dobranoc
Księżyc w południe

Co jest ważne, a co mniej ważne

Najważniejsza jest równowaga.

(autor nieznany)

Przedstawienie tego przykładu ma na celu omówienie zasad nadawania struktury i wyglądu dokumentowi. Nadawanie struktury jest związane z autorstwem tekstu. Nadawanie wyglądu jest związane z redagowaniem tekstu. Autor ma prawo nie znać się na zasadach prezentacji i nie pownien na siłę w nie ingerować.

Każdy sensowny układ graficzny powinien dać się opisać w kategoriach: zawartości, zestawu znaczników i odpowiadających im stylów. Bieżący przykład ilustruje tę tezę.

Liczebniki główne i porządkowe
Liczebniki
główneporządkowe
polskieangielskiepolskieangielskie
jedenonepierwszyfirst
dwatwodrugisecond
trzythreetrzecithird
czteryfourczwartyfourth
pięćfivepiątyfifth
sześćsixszóstysixth

Absolutnie nie twierdzę, że przedstawiony tutaj gotowy układ graficzny jest lepszy od jakiegokolwiek innego rozwiązania graficznego. Jest to sprawa wyboru, w dużej części zależna od gustu, a także od tradycji.

Nie twierdzę również, że zademonstrowany gotowy zestaw pojęć, którymi posługiwał się autor i redaktor tego tekstu, stanowi absolutny kanon, którego należy się trzymać. Przeciwnie wprost: każdy sensowny powód wprowadzenia nowego elementu jest warty rozpatrzenia. Ale raz podjętych ustaleń należy ściśle przestrzegać, zwłaszcza w pracy grupowej.

Proces tworzenia dokumentu

Autor powinien przede wszystkim napisać sensowny tekst, a powstały logiczny ciąg zdań opatrzyć minimalną ilością znaczników gwarantujących opis budowy logicznej tekstu.

Jeżeli znacznik znajdzie się w tekście tylko po to, by opisać wybrany efekt graficzny (np. centrowanie), to znaczy, że jest niepotrzebny. Jeżeli znaczniki opisują efekt graficzny (np. centrowanie bloku), lecz zamiarem autora jest opisanie budowy (np. centrowanie bloku dlatego, że zawiera równanie), to należy zastąpić je znacznikami opisującymi powód (tzn. np. równanie). Decyzje dotyczące prezentacji (np. centrowanie wszystkich równań) należałoby umieścić w opisach stylów — lecz to jest już zadanie redaktora, a nie autora.

Proces redagowania

Podczas redakcji trzeba nadać gotowemu tekstowi sensowny wygląd zgodny z wymaganiami zewnętrznymi, nie zmieniając ani jednej litery tekstu i ani jednego znacznika.

Jeżeli podczas redakcji okaże się, że bloki o identycznych funkcjach są opatrzone znacznikami zupełnie różnych elementów, to znaczy, że źle przeprowadzono znakowanie. Wtedy nie ma rady: trzeba je poprawić.

Jeżeli podczas redakcji prawidłowo oznakowanego tekstu osoba redagująca zmienia układ znaczników (np. zaznacza bloki tekstu i nadaje im właściwości), to znaczy, że nie rozróżnia procesów znakowania i definiowania stylów. Nie ufałbym w jej kompetencje redakcyjne; sprawność manualna nie ma tu nic do rzeczy.

Zamiast zakończenia

Kto nie ma w głowie, ten musi mieć w nogach.

(ludowe)

Odpowiedź na pytanie postawione w tytule brzmi: tak prosto, jak tylko się da, i ani trochę prościej. Na początku trzeba trochę pomyśleć, a później już tylko postępować konsekwentnie. Żadnego rzeźbienia odstępów, wcięć i wyrównań. Zero ręcznego sterowania. Stosujemy tylko znakowanie logiczne. Wszystkie parametry graficzne mające obowiązywać domyślnie definiujemy w stylach standardowych elementów. Wszystkie inne parametry definiujemy wewnątrz stylów dla wprowadzonych przez nas klas. Ruszmy głową — oszczędzajmy nogi!

Podziękowania

Nie dziękuj, wyznam ci szczerze.

Adam Mickiewicz

Wszystkim ludziom dobrej woli, z którymi wymieniałem opinie.

© Copyright 2002–2004, 2006, 2008, 2009 by Jan Jełowicki, Katedra Matematyki Uniwersytetu Przyrodniczego we Wrocławiu
janj@aqua.ar.wroc.pl
http://karnet.up.wroc.pl/~jasj