9 Model formatowania wizualnego

9.1 Wprowadzenie do modelu formatowania wizualnego

W tym i następnym rozdziale został opisany model formatowania wizualnego: sposób przetwarzania przez aplikacje klienckie drzewa dokumentu dla mediów wizualnych.

Zgodnie z modelem polowym w modelu formatowania wizualnego każdy element znajdujący się w drzewie dokumentu generuje zero lub więcej pól. Rozmieszczenie tych pól zależy od kilku czynników:

• rozmiar i typ pola;
• system pozycjonowania (układ normalny, pływający oraz pozycjonowanie bezwzględne);
• relacje między elementami w drzewie dokumentu;
• informacje zewnętrzne (np. rozmiar obszaru widoku, wymiary wewnętrzne obrazów itp.).

Własności zdefiniowane w tym i następnym rozdziale mają zastosowanie zarówno do mediów ciągłych jak i stronicowanych. Działanie własności marginesów w mediach stronicowanych jest inne (zobacz model stronicowania).

Model formatowania wizualnego nie określa wszystkich aspektów formatowania (np. nie definiuje algorytmu obliczania odstępu między literami). Zachowanie zgodnych aplikacji klienckich może się różnić w tych przypadkach, które nie zostały uwzględnione w niniejszej specyfikacji.

9.1.1 Obszar widoku

Aplikacje klienckie przeznaczone dla mediów ciągłych zwykle udostępniają obszar widoku (okno lub inny obszar na ekranie), przez który można uzyskać dostęp do dokumentu. Aplikacje klienckie mogą zmieniać rozmieszczenie elementów w odpowiedzi na zmianę rozmiaru obszaru widoku (zobacz pierwotny blok zawierający).

Jeśli obszar widoku jest mniejszy od kanwy, na której prezentowany jest dokument, aplikacja kliencka powinna umożliwiać jego przewijanie. W kanwie może być maksymalnie jeden obszar widoku. Natomiast liczba kanw może być większa (np. w celu zaprezentowania różnych widoków tego samego dokumentu).

9.1.2 Bloki zawierające

W CSS 2.1 położenie i rozmiar wielu pól wyznaczane są względem krawędzi prostokątnego pola o nazwie pole zawierające. Ogólnie rzecz biorąc, pola generowane są blokami zawierającymi swoich pól potomnych. Mówi się, że dane pole ustanawia kontener dla swoich potomków. Wyrażenie "blok zawierający pola" oznacza "blok zawierający, w którym znajduje się dane pole".

Położenie każdego pola jest obliczane względem jego bloku zawierającego. Jednak żadne pole nie musi zawierać się w całości w swoim kontenerze — może "się wylewać".

Sposób obliczania wymiarów bloku zawierającego został szczegółowo opisany w następnym rozdziale.

9.2 Kontrolowanie generowania pól

W poniższych podrozdziałach zostały opisane rodzaje pól, które mogą zostać wygenerowane w CSS 2.1. Typ pola częściowo wpływa na jego zachowanie w modelu formatowania wizualnego. Do określania typu pól służy własność ‚display’ (opis poniżej).

9.2.1 Elementy blokowe i pola blokowe

Elementy blokowe to te elementy w źródle dokumentu, które w formatowaniu wizualnym mają postać bloków (np. akapity). Utworzenie elementu blokowego umożliwia kilka wartości własności ‚display’: ‚Block’, ‚list-item’, ‚run-in’ (czasami — zobacz Pola typu ‚run-in’) oraz ‚table’.

Elementy blokowe (z wyjątkiem elementów typu ‚table’, których opis znajduje się w jednym z dalszych rozdziałów) generują pierwotne pole bloku zawierające tylko pola blokowe lub tylko pola śródliniowe. Pierwotne pole blokowe stanowi blok zawierający pól potomnych i treści generowanej oraz jest brane pod uwagę przy pozycjonowaniu bloków. Pierwotne pola blokowe biorą udział w kontekście formatowania blokowego.

Niektóre elementy blokowe generują dodatkowe pola poza polem pierwotnym: elementy typu ‚list-item’. Położenie tych dodatkowych pól jest ustalane względem pola pierwotnego.

9.2.1.1 Anonimowe pola blokowe

Spójrzmy na poniższy fragment dokumentu:

<DIV>
  Jakiś tekst
  <P>Więcej tekstu
</DIV>

Przy założeniu, że elementy DIV i P mają własność ‚display: Block’, element DIV będzie miał zarówno treść śródliniową jak i blokową. Aby ułatwić sobie zdefiniowanie formatowania, przyjmiemy, że tekst "Jakiś tekst" znajduje się w anonimowym polu blokowym.

Innymi słowy, jeśli pole blokowe (jak to wygenerowane powyżej dla elementu DIV) zawiera inne pole blokowe lub pole typu ‚run-in’ (jak P w powyższym przykładzie), wymuszamy na nim, aby zawierało tylko pola blokowe i typu ‚run-in’.

Jeśli pole śródliniowe zawiera pole blokowe, pole to dzieli owe pole śródliniowe (i jego śródliniowych przodków znajdujących się w tym samym polu liniowym). Pola liniowe znajdujące się przed i za polem blokowym są umieszczane w anonimowych polach i blok ten staje się ich bratem. Jeśli taki śródliniowy blok jest pozycjonowany względnie, pozycjonowanie to ma także wpływ na pole blokowe.

body { display: inline }
p    { display: Block }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonimowy tekst przerwany przez blok</TITLE>
</HEAD>
<BODY>
To jest anonimowy tekst znajdujący się przed P.
<P>To jest zawartość elementu P.</P>
To jest anonimowy tekst znajdujący się za P.
</BODY>

Pola anonimowe dziedziczą własności po zawierających je nieanonimowych polach (np. we fragmencie dokumentu znajdującym się pod nagłówkiem tego podrozdziału byłoby to pole elementu DIV). Własnościom które nie są dziedziczone nadawane są wartości domyślne. Na przykład własności pisma anonimowe pole odziedziczy po elemencie DIV, ale marginesy będą miały wartość ’0′.

Własności ustawione dla elementów powodujących wygenerowanie anonimowych pól blokowych mają zastosowanie do tych pól i zawartości tych elementów. Jeśli na przykład dla elementu BODY w powyższym przykładzie zdefiniowanoby obramowanie, zostałoby ono narysowane wokół bloków F1 (otwarte na końcu linii) i F2 (otwarte na początku linii).

Niektóre aplikacje klienckie inaczej traktują obramowanie elementów śródliniowych zawierających bloki. Na przykład opakowują takie zagnieżdżone bloki w "anonimowe pola liniowe", dzięki czemu mogą rysować obramowania wokół takich pól. Ponieważ w CSS 1 i CSS 2 nie zdefiniowano zachowania w takich sytuacjach, aplikacje klienckie CSS 1 i CSS 2 mogą implementować ten alternatywny model i mimo to być zgodne z CSS 2.1 Nie dotyczy to aplikacji klienckich utworzonych po opublikowaniu tej specyfikacji.

9.2.2 Elementy śródliniowe i pola śródliniowe

Elementy śródliniowe to te elementy w źródle dokumentu, które nie tworzą nowych bloków treści. Ich zawartość jest dzielona na wiersze (np. wyróżnione fragmenty tekstu w akapicie, obrazy śródliniowe itp.). Do tworzenia elementów śródliniowych służy kilka wartości własności ‚display’: ‚inline’, ‚inline-table’, ‚inline-Block’ oraz ‚run-in’ (czasami — zobacz Pola typu ‚run-in’). Elementy śródliniowe generują pola śródliniowe.

9.2.2.1 Anonimowe pola śródliniowe

Przeanalizujemy poniższy fragment dokumentu HTML:

<p>Trochę <em>wyróżnionego</em> tekstu</p>

Element <p> w powyższym kodzie wygeneruje pole blokowe zawierające kilka pól śródliniowych. Pole śródliniowe dla tekstu wyróżnionego zostanie wygenerowane przez element śródliniowy (<em>). Natomiast pozostałe pola śródliniowe ("Jakiś" i "tekst") zostaną wygenerowane przez element blokowy (<p>). Te ostatnie nazywane są anonimowymi polami śródliniowymi, ponieważ nie jest z nimi związany żaden element śródliniowy.

Takie anonimowe pola śródliniowe dziedziczą po swoich rodzicach wszystkie własności, które są dziedziczne. Własnościom które nie są dziedziczone nadawane są wartości domyślne. W tym przykładzie anonimowe pola śródliniowe dziedziczą kolor po elemencie P, natomiast ich tło jest przezroczyste.

Białe znaki, które zostałyby scalone zgodnie z zasadami własności ‚white-space’ nie generują anonimowych pól śródliniowych.

Ponieważ z kontekstu jasno wynika o który typ anonimowego pola chodzi, w specyfikacji tej zarówno anonimowe pola śródliniowe jak i anonimowe pola blokowe są nazywane polami anonimowymi.

Przy formatowaniu tabeli pojawiają się jeszcze inne typy pól anonimowych.

9.2.3 Pola typu ‚run-in’

Pola typu ‚run-in’ zachowują się następująco:

1. Jeśli pole typu ‚run-in’ zawiera pole blokowe, staje się polem blokowym.
2. Jeśli za polem typu ‚run-in’ znajduje się brat blokowy (który nie jest pozycjonowany bezwzględnie i nie pływa), pole to staje się pierwszym polem śródliniowym tego pola blokowego. Blok typu ‚run-in’ nie może "wchodzić" do bloku, który zaczyna się od bloku tego samego typu lub sam jest typu ‚run-in’.
3. W pozostałych przypadkach pole typu ‚run-in’ staje się polem blokowym.

Pola typu ‚run-in’ są przydatne do tworzenia nagłówków śródliniowych, np.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Przykład pola typu 'run-in'</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Nagłówek liniowy.</H3>
    <P>I akapit, który się za tym nagłówkiem
       znajduje.
  </BODY>
</HTML>

Dokument ten może zostać sformatowany następująco:

  Nagłówek liniowy. i akapit
  który się za tym nagłówkiem
  znajduje.

Mimo że wizualnie został umieszczony w znajdującym się za nim polu blokowym, element typu ‚run-in’ dziedziczy własności po swoim rodzicu wg drzewa dokumentu.

Informacje na temat interakcji pól typu ‚run-in’ z treścią generowaną znajdują się w podrozdziale o treści generowanej.

9.2.4 Własność ‚display’

Opis wartości:

Block

Powoduje wygenerowanie przez element pola blokowego.

inline-Block

Powoduje wygenerowanie przez element pola blokowego, które jest w układzie traktowane jako pojedynczy blok śródliniowy, podobny do elementu zastępowanego. Wnętrze bloku śródliniowego jest formatowane jako pole blokowe, natomiast sam element jest formatowany jako śródliniowy element zastępowany.

inline

Powoduje wygenerowanie przez element jednego lub większej liczby bloków śródliniowych.

list-item

Powoduje wygenerowanie przez element (np. element LI języka HTML) pierwotnego pola blokowego i śródliniowego pola elementu listy. Informacje na temat list i przykłady ich formatowania znajdują się w podrozdziale o listach.

none

Ta wartość powoduje, że element nie zostanie umieszczony w strukturze formatującej (tzn. w mediach wizualnych element taki nie generuje żadnych bloków i nie ma wpływu na układ). Elementy potomne również nie generują żadnych pól. Element wraz z zawartością zostaje całkowicie usunięte ze struktury formatującej. Zachowania tego nie można zmienić poprzez ustawienie własności ‚display’ potomków.

Należy zauważyć, że wartość ‚none’ własności ‚display’ nie powoduje utworzenia niewidocznego pola. Zapobiega ona utworzeniu jakiegokolwiek pola. W CSS dostępne są także mechanizmy pozwalające elementom generować pola w strukturze formatującej wpływające na formatowanie, pozostając przy tym niewidoczne. Szczegółowe informacje na ten temat można znaleźć w podrozdziale o widzialności.

run-in

Powoduje utworzenie pola blokowego lub śródliniowego w zależności od kontekstu. Inne własności tego rodzaju pól typu ‚run-in’ są stosowane na rzecz ich ostatecznej formy (śródliniowej lub blokowej).

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell oraz table-caption

Wszystkie te wartości powodują, że element zachowuje się jak element tabeli (zgodnie z ograniczeniami opisanymi w rozdziale o tabelach).

Wartość obliczona odpowiada wartości określonej. Nie dotyczy to tylko elementów pozycjonowanych i pływających (zobacz Zależności między własnościami ‚display’, ‚position’ i ‚float’) oraz elementu głównego. W przypadku elementu głównego wartość obliczona zostaje zmieniona zgodnie z zasadami opisanymi w podrozdziale Zależności między własnościami ‚display’, ‚position’ i ‚float’.

Należy zauważyć, że mimo iż wartość domyślna własności ‚display’ to ‚inline’, reguły znajdujące się w domyślnym arkuszu stylów aplikacji klienckiej mogą ją zastępować. Zobacz przykładowy arkusz stylów dla języka HTML 4 w odpowiednim dodatku.

p   { display: block }
em  { display: inline }
li  { display: list-item }
img { display: none }      /* Nie wyświetla obrazów */

9.3 Systemy pozycjonowania

W CSS 2.1 pola można rozmieszczać według trzech systemów pozycjonowania:

1. Układ normalny. W CSS 2.1 do układu normalnego zalicza się formatowanie blokowe pól blokowych, formatowanie śródliniowe pól śródliniowych, pozycjonowanie względne pól blokowych i śródliniowych oraz pozycjonowanie pól typu ‚run-in’.
2. Elementy pływające. W modelu pól pływających, położenie pola najpierw zostaje określone według układu normalnego, a następnie wyjęte z niego i przesunięte maksymalnie w lewo lub w prawo. Element pływający może być opływany przez treść po wolnej stronie.
3. Pozycjonowanie bezwzględne. W modelu pozycjonowania bezwzględnego pole zostaje całkowicie wyjęte z układu normalnego (nie ma wpływu na znajdujące się dalej elementy) i pozycjonowane względem bloku zawierającego.

9.3.1 Wybieranie systemu pozycjonowania: własność ‚position’

Własności CSS 2.1 ‚position’ i ‚float’ służą do określania algorytmu pozycjonowania, który ma zostać użyty do wyznaczenia położenia pola.

Opis wartości:

static

Pole pozostaje normalnym polem, którego położenie jest wyznaczane według układu normalnego. Własności ‚top’, ‚right’, ‚bottom’ i ‚left’ nie mają zastosowania.

relative

Położenie pola jest obliczane w odniesieniu do układu normalnego (jest to tzw. położenie w układzie normalnym). Następnie pole to zostaje przesunięte względem swojego normalnego położenia. Gdy pole B jest pozycjonowane względnie, położenie pola znajdującego się za nim jest obliczane w taki sposób, jakby pole B nie zostało przesunięte. Efekt zastosowania deklaracji ‚position:relative’ na rzecz elementów typu ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-row’, ‚table-column-group’, ‚table-column’, ‚table-cell’ oraz ‚table-caption’ jest niezdefiniowany.

absolute

Położenie pola (i ewentualnie jego rozmiar) jest określane za pomocą własności ‚top’, ‚right’, ‚bottom’ oraz ‚left’. Własności te określają przesunięcie względem bloku zawierającego pole. Pola pozycjonowane bezwzględnie są wyjmowane z układu normalnego. Oznacza to, że nie mają one wpływu na rozmieszczenie swoich dalszych braci. Ponadto marginesy pól pozycjonowanych bezwzględnie nie są scalane z marginesami żadnych innych pól.

fixed

Położenie pola jest wyznaczane według modelu pozycjonowania bezwzględnego, ale dodatkowo pole to zostaje przymocowane na stałe względem jakiegoś punktu. Podobnie jak w przypadku modelu pozycjonowania bezwzględnego, marginesy takiego pola nie są scalane z marginesami żadnych innych pól. W urządzeniach kieszonkowych, projekcyjnych, ekranowych, telegraficznych i telewizorach położenie pola o stałym położeniu jest ustalane względem obszaru widoku i pole takie nie porusza się podczas przewijania. W mediach drukowanych pole takie zostaje wydrukowane na każdej stronie i jego położenie jest ustalane względem pola strony, nawet jeśli strona ta jest oglądana poprzez obszar widoku (na przykład w podglądzie wydruku). Dla innych typów mediów sposób prezentacji jest niezdefiniowany. Autorzy mogą mieć różne wymagania jeśli chodzi o pozycjonowanie pól o stałym położeniu w różnych mediach. Można na przykład wymagać, aby pole pozostawało zawsze w górnej części obszaru widoku na ekranie, ale by go nie było na każdej stronie wydruku. Aby spełnić te dwa warunki, można użyć reguły @media:

Przykłady:

@media screen {
  h1#first { position: fixed }
}
@media print {
  h1#first { position: static }
}

Aplikacje klienckie nie mogą dzielić zawartości pól o stałym położeniu na strony.

Należy zauważyć, że niewidoczna część treści może zostać przez aplikacją kliencką wydrukowana w inny sposób. Zobacz "Treść poza polem strony" w rozdziale 13.

Położenie elementu głównego może być przez aplikacje klienckie traktowane jako statyczne (‚static’).

9.3.2 Przesuwanie pól: ‚top’, ‚right’, ‚bottom’, ‚left’

Element nazywa się elementem pozycjonowanym, jeśli jego własność ‚position’ ma wartość inną niż ‚static’. Elementy pozycjonowane generują pozycjonowane pola, o których położeniu decydują cztery własności:

Własność ta określa odległość krawędzi górnego marginesu pola pozycjonowanego bezwzględnie od górnej krawędzi bloku zawierającego to pole. W przypadku pól pozycjonowanych względnie przesunięcie jest ustalane względem górnych krawędzi samego pola (tzn. pole jest umieszczane w układzie normalnym, a następnie przesuwane zgodnie z wartościami tych własności).

Zastosowanie tej własności jest bardzo podobne do własności ‚top’. Różnica polega na tym, że ta własność określa odległość krawędzi prawego marginesu pola od prawej krawędzi bloku zawierającego to pole. W przypadku pól pozycjonowanych względnie przesunięcie jest obliczane w odniesieniu do prawej krawędzi pozycjonowanego pola.

Zastosowanie tej własności jest bardzo podobne do własności ‚top’. Różnica polega na tym, że ta własność określa odległość krawędzi dolnego marginesu pola od dolnej krawędzi bloku zawierającego to pole. W przypadku pól pozycjonowanych względnie przesunięcie jest obliczane w odniesieniu do dolnej krawędzi pozycjonowanego pola.

Zastosowanie tej własności jest bardzo podobne do własności ‚top’. Różnica polega na tym, że ta własność określa odległość krawędzi lewego marginesu pola od lewej krawędzi bloku zawierającego to pole. W przypadku pól pozycjonowanych względnie przesunięcie jest obliczane w odniesieniu do lewej krawędzi pozycjonowanego pola.

Opis wartości tych czterech własności:

<length>

Przesunięcie względem krawędzi odniesienia ma wartość stałą. Dozwolone są wartości ujemne.

<percentage>

Wartość przesunięcia wynosi określony procent szerokości bloku zawierającego (dotyczy własności ‚left’ i ‚right’) lub wysokości bloku zawierającego (dotyczy własności ‚top’ i ‚bottom’). Dozwolone są wartości ujemne.

auto

W przypadku elementów niezastępowanych efekt tej wartości zależy od tego, która z powiązanych własności również ma wartość ‚auto’. Aby uzyskać szczegółowe informacje, zobacz podrozdziały o szerokości i wysokości bezwzględnie pozycjonowanych niezastępowanych elementów. W przypadku elementów zastępowanych efekt tej wartości zależy tylko od wewnętrznych wymiarów zastępowanej treści. Aby uzyskać szczegółowe informacje, zobacz podrozdziały o szerokości i wysokości bezwzględnie pozycjonowanych zastępowanych elementów.

9.4 Układ normalny

Pola znajdujące się w układzie normalnym należą do kontekstu formatowania, który może być blokowy lub śródliniowy (ale nie taki i taki jednocześnie). Pola blokowe uczestniczą w kontekście formatowania blokowego. Pola śródliniowe uczestniczą w kontekście formatowania śródliniowego.

9.4.1 Konteksty formatowania blokowego

Elementy pływające i pozycjonowane bezwzględnie, bloki śródliniowe, komórki i podpisy tabeli oraz elementy, których własność ‚overflow’ jest ustawiona na wartość inną niż ‚visible’ (z wyjątkiem sytuacji, w której wartość ta została przesłana do obszaru widoku) ustanawiają nowe konteksty formatowania blokowego.

W kontekście formatowania blokowego pola są rozmieszczane jedno pod drugim, zaczynając od góry bloku zawierającego. Odstęp pionowy między dwoma polami braćmi określają własności ‚margin’. Marginesy pionowe znajdujące się między przylegającymi polami blokowymi w kontekście formatowania blokowego zostają scalone.

W kontekście formatowania blokowego lewa zewnętrzna krawędź każdego pola styka się z lewą krawędzią bloku zawierającego (w przypadku formatowania "od prawej do lewej" stykają się krawędzie prawe). Zasada ta obowiązuje także w obecności elementów pływających (chociaż pola liniowe pól mogą zostać skrócone), jeśli pole nie ustanawia nowego kontekstu formatowania (wówczas pole samo może zostać zwężone z powodu obecności elementów pływających).

Aby uzyskać informacje na temat łamania stron w mediach stronicowanych, zobacz Dozwolone złamania stron.

9.4.2 Śródliniowy kontekst formatowania

W kontekście formatowania śródliniowego pola są rozmieszczane poziomo jeden obok drugiego, zaczynając od góry bloku zawierającego. Znajdujące się między tak rozmieszczonymi polami poziome marginesy, obramowanie i dopełnienie są respektowane. Pola mogą być wyrównane w pionie na różne sposoby: mogą zostać wyrównane według górnej lub dolnej krawędzi albo według znajdujących się w nich podstawowych linii pisma. Prostokątny obszar zawierający pola składające się na jeden wiersz (jedną linię) nazywa się polem liniowym.

O szerokości pola liniowego decydują dwa czynniki: blok zawierający i obecność lub brak elementów pływających. Wysokość pola liniowego jest określana wg zasad opisanych w podrozdziale o obliczaniu wysokości linii.

Minimalna wysokość pola liniowego zawsze odpowiada wszystkim zawartym w nim polom. Pole liniowe może także być wyższe od najwyższego znajdującego się w nim pola (jeśli np. pola zostaną tak ustawione, że ich linie podstawowe znajdują się w szeregu). Jeśli pole B jest niższe od zawierającego je pola liniowego, o wyrównaniu w pionie pola B wewnątrz tego pola liniowego decyduje własność ‚vertical-align’. Jeśli kilka pól śródliniowych nie mieści się poziomo w jednym polu liniowym, są one rozdzielane na kilka pól liniowych ułożonych jedno nad drugim. Zatem akapit jest stosem takich pól liniowych. Między polami liniowymi nie ma żadnych odstępów i nigdy one na siebie nie nachodzą.

Ogólnie rzecz biorąc, lewa krawędź pola liniowego styka się z lewą krawędzią zawierającego je bloku, a prawa krawędź — z prawą krawędzią zawierającego bloku. Między krawędzią bloku zawierającego a krawędzią pola liniowego mogą znajdować się elementy pływające. Zatem, mimo że ogólnie pola liniowe znajdujące się w tym samym śródliniowym kontekście formatowania mają taką samą szerokość (taką samą, jak blok zawierający), elementy pływające mogą zająć część miejsca i spowodować, że niektóre takie pola liniowe będą miały mniejszą szerokość. Pola liniowe znajdujące się w tym samym śródliniowym kontekście formatowania zwykle mają różne wysokości (np. jedno może zawierać wysoki obraz a inne — tylko tekst).

Jeśli suma szerokości wszystkich pól śródliniowych w linii jest mniejsza niż szerokość zawierającego je pola liniowego, ich wyrównanie poziome w tym polu jest ustalane przez własność ‚text-align’. Jeśli własność ta ma wartość ‚justify’, aplikacja kliencka może rozciągnąć spacje i słowa w polach śródliniowych (z wyjątkiem tabel śródliniowych i śródliniowych pól blokowych).

Jeśli szerokość pola śródliniowego przekracza szerokość pola liniowego, zostaje ono podzielone na kilka pól, które zostaną rozmieszczone w kilku polach liniowych. Jeśli pola śródliniowego nie da się podzielić (np. zawiera jeden znak, uniemożliwiają to językowe zasady dzielenia słów lub pole to ma np. wyłączone zawijanie), wówczas "wylewa się" ono z pola liniowego.

Gdy pole śródliniowe zostaje podzielone, marginesy, obramowanie i dopełnienie nie są stosowane w miejscu złamania (lub złamań).

Pola śródliniowe mogą również być dzielone na kilka pól w tym samym polu liniowym w przypadku dwukierunkowego przetwarzania tekstu.

Pola liniowe nie zawierające tekstu, białych znaków, które muszą zostać zachowane, elementów śródliniowych o niezerowym marginesie, dopełnieniu lub obramowaniu ani żadnej innej treści śródliniowej (jak obrazy, bloki śródliniowe czy tabele śródliniowe) oraz nie nie są zakończone znakiem nowego wiersza, są traktowane jako pola liniowe o zerowej wysokości. Pola takie muszą być ignorowana ze względu na scalanie marginesów.

<P>Kilka <EM>wyróżnionych słów</EM> w zdaniu
<STRONG>tym ma</STRONG> niebanalne znaczenie.</P>

 Kilka wyróżnionych słów w zdaniu tym ma niebanalne znaczenie.

Kilka wyróżnionych słów w zdaniu
tym ma niebanalne znaczenie.

Kilka wyróżnionych
słów w zdaniu tym ma
niebanalne znaczenie.

W powyższym przykładzie pole EM zostało podzielone na dwa pola EM (nazwiemy je "część 1" i "część 2"). Za częścią 1 i przed częścią 2 marginesy, obramowanie, dopełnienie i ozdobniki tekstu nie wywołują żadnego widocznego efektu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Przykład układu śródliniowego podzielonego na kilka linii</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px;
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Kilka <EM>wyróżnionych słów</EM> tu jest.</P>
  </BODY>
</HTML>

9.4.3 Pozycjonowanie względne

Po ustaleniu położenia pola w układzie normalnym lub jako elementu pływającego, można go przesunąć względem tego miejsca. Czynność taka nazywa się pozycjonowaniem względnym. Przesunięcie pola (B1) w taki sposób nie ma wpływu na pole znajdujące się za nim (B2): Położenie pola B2 jest ustalane tak, jakby pole B1 nie zostało przesunięte i położenie pola B2 nie zostanie zmienione w wyniku przesunięcia pola B1. Oznacza to, że pozycjonowanie względne może powodować nakładanie się pól. Jeśli jednak pozycjonowanie względne spowoduje, że pole z własnością ‚overflow:auto’ lub ‚overflow:scroll’ zostanie przepełnione, aplikacja kliencka musi umożliwić użytkownikowi dostęp do tej treści (w miejscu, w które zostanie przesunięta), która, z powodu wyświetlenia pasków przewijania, może wpłynąć na układ.

Względnie pozycjonowane pole zachowuje swój normalny rozmiar układowy, włącznie ze złamaniami wiersza i przestrzenią, która została dla niego zarezerwowana. W podrozdziale o blokach zawierających objaśniono kiedy względnie pozycjonowane pole ustanawia nowy blok zawierający.

Własności ‚left’ i ‚right’ elementów pozycjonowanych względnie przesuwają je w poziomie, nie zmieniając ich rozmiaru. Własność ‚left’ przesuwa pole w prawo, a ‚right’ — w lewo. Ponieważ zastosowanie własności ‚left’ i ‚right’ nie powoduje podzielenia lub rozciągnięcia pól, wartości obliczone zawsze wynoszą: left = -right.

Jeśli zarówno własność ‚left’ jak i ‚right’ mają wartość ‚auto’ (ich wartość domyślna), wartości obliczone wynoszą ’0′ (tzn. pola pozostają w swoim pierwotnym położeniu).

Jeśli własność ‚left’ ma wartość ‚auto’, jego wartość obliczona wynosi odwrotność wartości własności ‚right’ (tzn. pole zostaje przesunięte w lewo o wartość własności ‚right’).

Jeśli własność ‚right’ ma wartość ‚auto’, jego wartość obliczona wynosi odwrotność wartości własności ‚left’.

Jeśli ani własność ‚left’, ani ‚right’ nie mają wartości ‚auto’, położenia nie da się ustalić i jedną z tych wartości należy zignorować. Jeśli własność ‚direction’ bloku zawierającego ma wartość ‚ltr’, zastosowana zostanie wartość własności ‚left’ i wartość ‚right’ wyniesie -’left’. Jeśli własność ‚direction’ bloku zawierającego ma wartość ‚rtl’, zastosowana zostanie wartość własności ‚right’, a ‚left’ zostanie zignorowana.

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

Własności ‚top’ i ‚bottom’ przesuwają względnie pozycjonowane elementy w górę i do dołu, nie zmieniając ich rozmiaru. Własność ‚top’ przesuwa pola do dołu, a własność ‚bottom’ — do góry. Ponieważ zastosowanie własności ‚top’ i ‚bottom’ nie powoduje podzielenia lub rozciągnięcia pól, wartości obliczone zawsze wynoszą: top = -bottom. Jeśli obie własności mają wartość ‚auto’, ich wartości obliczone wynoszą ’0′. Jeśli jedna z nich ma wartość ‚auto’, jej wartość wynosi odwrotność wartości drugiej. Jeśli żadna z tych własności nie ma wartości ‚auto’, zignorowana zostanie wartość własności ‚bottom’ (tzn. wartość własności ‚bottom’ wyniesie odwrotność wartości własności ‚top’).

Uwaga: Za pomocą skryptów i dynamicznego poruszania względnie pozycjonowanych elementów można uzyskać efekt animacji (zobacz także własność ‚visibility’). Mimo że pozycjonowanie względne można wykorzystać do uzyskania efektu indeksu górnego lub dolnego, wysokość linii nie jest automatycznie dostosowywana, aby uwzględnić to pozycjonowanie. Aby uzyskać więcej informacji, zobacz opis sposobu obliczania wysokości linii.

Przykłady pozycjonowania względnego znajdują się w podrozdziale Porównanie normalnego układu, układu elementów pływających oraz pozycjonowania bezwzględnego.

9.5 Elementy pływające

Pole pływające to pole dosunięte do lewej lub prawej krawędzi linii. Najciekawszą cechą pól pływających jest to, że obok nich może znajdować się jakaś treść (chyba że zostanie to zabronione za pomocą własności ‚clear’). Pola spływające do lewej krawędzi pozwalają na występowanie treści po prawej stronie, a pola spływające do prawej — po lewej stronie. Poniższy tekst stanowi wprowadzenie do pozycjonowania elementów pływających i kontrolowania układu treści. Szczegółowe zasady zachowywania się elementów pływających zostały przedstawione w opisie własności ‚float’.

Pole pływające przesuwa się w lewo lub prawo aż jego zewnętrzna krawędź dotknie krawędzi bloku zawierającego lub krawędzi zewnętrznej innego pola pływającego. Jeśli jest pole liniowe, górna krawędź pola pływającego zostanie wyrównana z górną krawędzią bieżącego pola liniowego.

Jeśli pole pływające jest za szerokie, zostaje przeniesione w dół aż będzie wystarczająco dla niego miejsca lub nie będzie żadnych innych pól pływających.

Ponieważ elementy pływające nie należą do układu, niepozycjonowane pola blokowe utworzone przed i za nimi są rozmieszczane w pionie tak, jakby tych elementów pływających nie było. Jednak pola liniowe utworzone obok elementów pływających zostają skrócone, aby zrobić miejsce dla pola marginesu elementu pływającego. Jeśli skrócone pole liniowe jest za małe, aby cokolwiek jeszcze w nim zmieścić, zostaje przesunięte w dół aż będzie wystarczająco dużo miejsca lub nie będzie żadnych elementów pływających. Treść znajdująca się w bieżącej linii przed polem pływającym zostaje przeniesiona do pierwszej dostępnej linii po drugiej stronie tego pola pływającego. Innymi słowy, jeśli w polu liniowym przed napotkaniem mieszczącego się w nim pola spływającego do lewej zostaną umieszczone pola śródliniowe, to pole pływające zostanie umieszczone w tej linii i wyrównane z górną krawędzią tego pola liniowego. Następnie pola śródliniowe, które się już tam znajdowały zostaną przesunięte odpowiednio na prawą stronę pola pływającego (drugą stroną pola spływającego do lewej jest — prawa) i odwrotnie w przypadku kierunku ‚rtl’ i bloków spływających do prawej.

Pole obramowania tabeli, blokowe elementy zastępowane oraz elementy znajdujące się w układzie normalnym ustanawiające nowe konteksty formatowania blokowego (np. elementy z własnością ‚overflow’ o wartości innej niż ‚visible’) nie mogą nakładać się na elementy pływające znajdujące się w tym samym kontekście formatowania blokowego, co one. W razie potrzeby implementacje powinny takie elementy umieszczając pod znajdującymi się przed nimi elementami pływającymi. Jeśli jest wystarczająco dużo miejsca, mogą je umieszczać obok. Mogą nawet pole obramowania tych elementów zwężać bardziej niż wynika z definicji w podrozdziale 10.3.3. Specyfikacja CSS 2 nie określa kiedy aplikacja kliencka może umieścić dany element obok elementu pływającego ani o ile taki element może zostać zwężony.

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }

...

<p>
  <span> </span>
  Supercalifragilisticexpialidocious
</p>

Ten fragment może wyglądać następująco: