Pudełka w CSS i ich właściwości

Tłumacząc specyfikacje CSS (1 i 2.1) napotkałem wiele rozmaitych problemów, zarówno terminologicznych jak i związanych ze zrozumieniem tekstu. Każdy, kto interesuje się tą technologią wie, że zwłaszcza specyfikacja CSS 2.1 jest bardzo zawiła i trudna w odbiorze nawet dla dobrze przygotowanego czytelnika. W tym artykule chciałbym zaproponować rozwiązanie chyba najbardziej rozpowszechnionego problemu związanego z tłumaczeniem terminologii CSS. Chodzi o bardzo często popełniany błąd tłumaczenia pojęcia „box model” jako „model pudełkowy” lub „model blokowy”. Aby dobrze przetłumaczyć ten termin, należy dokładnie zrozumieć specyfikację CSS 2.1, co nie jest łatwe. Zanim przejdę do własnej propozycji tłumaczenia tego terminu, przedstawię teoretyczne podstawy swojego rozumowania. Przedtem jednak dwie uwagi:

  • Dokumenty formatowane za pomocą CSS można prezentować na wiele różnych sposobów, np. na ekranie monitora, na kartce wydruku itd. Dla uproszczenia będę używał słowa „wyświetlać”, ale należy pamiętać, że dotyczy to w tym samym stopniu wszystkich pozostałych mediów obsługiwanych przez CSS (oprócz słuchowych).
  • We wszystkich przedstawionych w tekście rozważaniach posługuję się przykładami z języka HTML. Należy jednak pamiętać, że w równym stopniu wszystkie te uwagi dotyczą innych języków znaczników, jak XHTML czy XML (chociaż w przypadku tego języka nie ma standardowego zestawu elementów blokowych i śródliniowych — wszystko trzeba zdefiniować samodzielnie).

Zacznę od przedstawienia podstawowych pojęć języków CSS i HTML. Aby móc zaproponować poprawne tłumaczenie terminu „box model” należy dobrze zrozumieć następujące pojęcia języków HTML i CSS:

HTML

  1. element,
  2. znacznik (ang. tag),
  3. element blokowy (ang. block-level element) — w skrócie block element,
  4. element śródliniowy (ang. inline element).

CSS

  1. pole (ang. box),
  2. pole blokowe (ang. block box),
  3. pole śródliniowe (inline box),
  4. pole liniowe (ang. line box).

Elementem w języku HTML nazywana jest para dopełniających się znaczników (otwierającego i zamykającego) z ewentualną treścią między nimi (zawartością) oraz opcjonalnymi lub obowiązkowymi atrybutami. Przykładem takiego elementu jest p — <p>Treść akapitu</p>. Znacznikiem natomiast nazywa się otwierającą lub zamykającą część elementu, tzn. w przykładzie z poprzedniego zdania znacznikami są <p> i </p> (http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.1). Świadomie pomijam różne rodzaje elementów, takie jak elementy puste (ang. empty element) czy elementy nie wymagające znacznika zamykającego (w języku XHTML prawie nie ma takich elementów), ponieważ nie mają one w tym przypadku znaczenia.

Elementem blokowym (ang. block-level element) w języku HTML nazywa się taki element, który, w układzie normalnym (ang. normal flow), stanowi odrębny blok, a więc w wyświetlonym dokumencie zostaje umieszczony w nowym wierszu, niezależnie od tego, gdzie go wpisano w kodzie źródłowym dokumentu. Przykładem takiego elementu jest wspomniany już element p. Natomiast element śródliniowy to taki, który, w układzie normalnym, ogólnie rzecz biorąc jest wyświetlany w tym samym miejscu, w którym został wpisany w źródle dokumentu. Przykładem takiego elementu w języku HTML jest a. Warto już w tym miejscu zaznaczyć, że nie ma czegoś takiego jak element liniowy, ale uzasadnienie tego twierdzenia przedstawię nieco dalej.

W technologii CSS jednym z najważniejszych pojęć jest pole (ang. box) często tłumaczone jako pudełko (najgorszy wybór) lub blok (lepszy wybór, który w specyfikacji CSS 1 nie sprawia żadnych problemów). Pola w CSS to „prostokątne pola generowane dla elementów znajdujących się w drzewie dokumentu” (http://www.w3.org/TR/2009/CR-CSS2-20090908/box.html). Z tego wynika, że w rzeczywistości arkusze stylów nie formatują samych elementów HTML umieszczonych w specjalnej hierarchicznej strukturze nazywanej drzewem dokumentu, lecz ich odpowiedniki w postaci prostokątnych pól. Podążając za tą logiką, dla elementów blokowych w drzewie dokumentu generowane są pola blokowe (ang. block box) — nie pudełka blokowe, ani tym bardziej bloki blokowe — a dla elementów śródliniowych generowane są pola śródliniowe (ang. inline box) — nie pudełka śródliniowe, ani bloki śródliniowe. Gdyby dopuścić możliwość tłumaczenia pojęcia inline box jako blok śródliniowy, trzeba by było zmierzyć się z kolejnym problemem terminologicznym, a mianowicie czymś, co w terminologii CSS nazywa się elementem blokowo-śródliniowym (ang. inline-block element). Mielibyśmy wówczas zarówno bloki śródliniowe jak i elementy blokowo-śródlinowe, a jak wiadomo element blokowy często w skrócie nazywa się blokiem, a więc element blokowo-śródliniowy według tej zasady to blok śródliniowy. Z tego powodu proponuję tłumaczenie box model jako modelu polowego — w strukturze dokumentu tworzonej przez CSS znajdują się pola, nie bloki. Dlaczego proponuję akurat słowo „pole” zamiast jakiegoś innego? Ma ono kilka zalet: jest łatwo zrozumiałe, oddaje sens angielskiego odpowiednika, tzn. w języku polskim pole również może oznaczać prostokątny dwuwymiarowy obszar oraz nie powoduje problemów z powstawaniem niezręcznych wyrażeń typu blokowy blok.

Pozostaje jeszcze kwestia słów „liniowy” i śródliniowy”. Nie byłoby nic złego w stosowaniu określenia element liniowy, gdyby nie fakt, że w CSS istnieje wyraźny podział pól na liniowe i śródliniowe. Pole śródliniowe (ang. inline box) to odpowiednik elementu śródliniowego z HTML (ang. inline element). Natomiast pole liniowe (ang. line box) z CSS nie ma bezpośredniego odpowiednika w HTML. Jest to pole generowane dla każdego wiersza tekstu znajdującego się w jakimkolwiek elemencie (blokowym lub śródliniowym). Zatem pisząc „element liniowy” wprowadza się czytelnika w błąd, sugerując, że jego odpowiednikiem w drzewie dokumentu CSS jest „pole liniowe” — to nie jest prawdą.

Na zakończenie odniosę się jeszcze do tłumaczenia słowa property. Spotyka się dwie wersje: własność i właściwość. Z punktu widzenia języka polskiego wybór jednego z nich nie ma wielkiego znaczenia. Oba tłumaczenia wydają się poprawne, ale warto by było zdecydować się na konsekwentne stosowanie jednego z nich. Z tego powodu we własnej praktyce przyjąłem następujące arbitralne definicje słów własność i właściwość, których zawsze się trzymam:

  1. Własność — konstrukcja programistyczna definiująca pewną cechę czy właściwość jakiegoś obiektu, np. własności CSS definiują właściwości elementów HTML, takie jak kolor tekstu, rozmiar pisma itd.
  2. Właściwość — ogólnie cecha czegoś, np. kolor tekstu.

Glosariusz

element — element
tag — znacznik
block-level element — element blokowy
inline element — element śródliniowy
box — pole
block box — pole blokowe
inline box — pole śródliniowe
line box — pole liniowe
property — własność (jako konstrukcja programistyczna)
property — właściwość (inaczej cecha)