Najlepiej raz, a dobrze.
(ludowe)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.
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.
Temperatura | Gęstość |
---|---|
T [°C] | γ [kg/m3] |
0 | 999.8 |
4 | 1000.0 |
10 | 999.7 |
20 | 998.2 |
30 | 995.6 |
40 | 992.2 |
50 | 988.0 |
60 | 983.2 |
70 | 977.8 |
80 | 971.8 |
90 | 965.3 |
100 | 958.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.
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.
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.
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.
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:
h1, h2, h3, h4, h5, h6 { font-family: sans-serif }
,table, table caption { font-size: small }
,table caption { font-family: sans-serif }
,.tabela caption:before, .rysunek caption:before { font-weigth: bold }
,h2+p:first-letter { font-size: 300% }
,address { font-size: 8pt }
.Pozostałe szczegóły związane z fontami zależą od domyślnych parametrów przyjętych podczas formatowania (np. przez przeglądarkę).
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ć.
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.
⇑ | ||
← | → | |
↓ |
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.
północ North северь | ||
zachód West запад | wschód East восток | |
południe South юг |
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.
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.
Liczba | Liczebniki | |||
---|---|---|---|---|
polskie | angielskie | francuskie | rosyjskie | |
0 | zero | zero | zéro | нуль |
100 | jeden | one | une | один |
101 | dziesięć | ten | dix | десять |
102 | sto | hundred | cent | сто |
103 | tysiąc | thousand | mille | тысяч |
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.
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, 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.
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ą.
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 | porządkowe | ||
polskie | angielskie | polskie | angielskie |
jeden | one | pierwszy | first |
dwa | two | drugi | second |
trzy | three | trzeci | third |
cztery | four | czwarty | fourth |
pięć | five | piąty | fifth |
sześć | six | szósty | sixth |
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.
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.
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.
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!
Nie dziękuj, wyznam ci szczerze.
Adam MickiewiczWszystkim ludziom dobrej woli, z którymi wymieniałem opinie.