Układ wielokolumnowy

W tym rozdziale dowiesz się...

• Czym różni się układ wielokolumnowy od tradycyjnych tabel?
• Jak ustalić szerokość kolumny tekstu?
• W jaki sposób podzielić tekst na kilka kolumn?
• Jak za jednym razem ustalić szerokość kolumny i liczbę kolumn?
• W jaki sposób ustalić odstęp pomiędzy dwiema kolumnami tekstu?
• W jaki sposób dodać pionową linię rozdzielającą kolumny tekstu?
• Jak zapewnić estetyczne przełamania kolumn tekstu na stronie?
• W jaki sposób wstawić element rozciąjący się ponad kilkoma kolumnami tekstu?
• Jak określić wypełnienie elementu kolumnami tekstu?

Wstęp

W zasadzie wszystkie popularne papierowe czasopisma przyzwyczaiły czytelników do układu wielokolumnowego. Tekst artykułów jest w nich ułożony w wielu wąskich, sąsiadujących ze sobą kolumnach. Dzięki temu zwykle staje się on łatwiejszy w czytaniu, gdyż przenosząc wzrok z końca jednej linijki na początek kolejnej, oko nie musi pokonywać długiej drogi. Wiele nowoczesnych serwisów internetowych również składa się z kilku kolumn, ale najczęściej inaczej niż w gazecie właściwa treść artykułu znajduje się w pojedynczej kolumnie, a pozostałe kolumny są przeznaczone na menu lub inne elementy kontekstowe (popularne odnośniki, inne podobne artykuły czy reklamę). Jest to zatem sytuacja zupełnie inna, choć w wielu przypadkach całkowicie pożądana.

Gazetowy układ wielokolumnowy teoretycznie można próbować symulować za pomocą tabel. Ma to jednak spore wady, które praktycznie dyskwalifikują takie rozwiązanie:

• Inaczej niż w prawdziwym, gazetowym układzie strony, tekst z końca jednej kolumny tabeli nie przechodzi automatycznie na początek kolejnej, umieszczonej po jej prawej stronie. Po zmianie wielkości lub rodzaju czcionki, tekst w kolumnie tabeli ułoży się w zupełnie inny sposób - najprawdopodobniej wysokość przestrzeni zajmowanej przez tekst w kolumnach nie będzie identyczna.
• Na niewielkich ekranach - np. telefonów komórkowych - ustalona zbyt duża liczba kolumn w tabeli może sprawić, że będą one zdecydowanie zbyt wąskie. W arkuszu CSS dla urządzeń mobilnych nie można zmniejszyć liczby kolumn w wierszu tabeli.
• Na wydruku kolumna tabeli może zostać podzielona między dwie strony.

Dopiero prawdziwy układ wielokolumnowy (ang. multi-column layout) - wprowadzony w CSS 3 - pozwala pozbyć się wszystkich tych wad. W uproszczeniu można przyjąć, że treść na każdej stronie WWW jest rozplanowana w układzie wielokolumnowym, ale tylko z jedną kolumną. Jednak w odróżnieniu od układu standardowego, zawartość szersza od kolumny (np. długi, niełamliwy wyraz) zostanie przycięta.

Nie oznacza to raczej jednak, że od dzisiaj wszystkie serwisy internetowe powinny zacząć wszędzie stosować nowy sposób rozplanowanie tekstu. Zwróćmy uwagę, że w papierowych gazetach zwykle nie występują wspomniane już wcześniej elementy kontekstowe, menu, obiekty multimedialne, a reklamy najczęściej są umieszczane na osobnych stronach. Układ wielokolumnowy może jednak być przydatny w pewnych elementach serwisów WWW - np. sam wstęp do obszerniejszego artykułu, który nie jest długi i nie zawiera bardziej skomplikowanego formatowania tekstu ani multimediów. Nadaje się oczywiście również bardzo dobrze na internetowe wydania papierowych czasopism lub podobnych magazynów, ukazujących się w formie elektronicznej.

Szerokość kolumny

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { column-width: szerokość }

Ustalając szerokość kolumn pozwalamy przeglądarce automatycznie wyświetlić tyle kolumn, ile będzie konieczne, aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony.

Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym przypadku kolumna może być również węższa niż podano - jeżeli cały blok jest węższy, aby mógł pomieścić przynajmniej jedną kolumnę.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej szerokości kolumn tego samego elementu.

Przykład:

Liczba kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { column-count: liczba }

Polecenie jest przydatne, jeżeli ważniejsze jest dla nas, aby tekst zawsze znajdował się w ściśle określonej liczbie kolumn, a przeglądarka sama zajęła się automatycznym dopasowaniem ich szerokości.

Przykład:

Atrybuty mieszane

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { columns: wartości atrybutów }

Polecenie jest przydatne, jeżeli chcemy skrócić zapis. Możemy też dzięki niemu szybko usunąć podział na kolumny, poprzez wpisanie "columns: auto".

Odstęp kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { column-gap: szerokość }

Sąsiadujące kolumny z tekstem nie powinny do siebie bezpośrednio przylegać, gdyż wywołałoby to zlewanie się tekstu na krawędzi kolumn. Temu nieprzyjemnemu efektowi może skutecznie zapobiegać przerwa między kolumnami. Warto mieć na uwadze, że wartość domyślna tego odstępu (normal) zależy od konkretnej przeglądarki i wcale nie musi być równa zero.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnego odstępu kolumn tego samego elementu.

Przykład:

Linia rozdzielająca

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

1. Kolor:

   selektor { column-rule-color: kolor }

   gdzie "kolor" jest definicją koloru
2. Styl:

   selektor { column-rule-style: styl }

   gdzie "styl" określa się identycznie jak w przypadku obramowania
3. Szerokość:

   selektor { column-rule-width: szerokość }

   gdzie "szerkość" określa się identycznie jak w przypadku obramowania
4. Atrybuty mieszane:

   selektor { column-rule: wartości atrybutów }

   Jako "wartości atrybutów" podaje się rozdzielone spacjami wartości szerokości, stylu i koloru linii rozdzielającej.

Czasami samo oddzielenie kolumn odstępem nie jest wystarczające, aby czytelnik mógł wygodnie przeczytać cały tekst oraz już na pierwszy rzut oka widział, że treść w ogóle jest podzielona na kolumny. Wtedy możemy pomiędzy sąsiednimi kolumnami wstawić dodatkowo pionową linię rozdzielającą. Jest ona wyświetlana zawsze na środku przestrzeni między kolumnami. Sama linia rozdzielająca nie zabiera miejsca z szerokość elementu wielokolumnowego. Jeśli jej grubość będzie większa niż szerokość odstępu kolumn, wyświetli się pod tekstem znajdującym się w kolumnach.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej linii rozdzielającej kolumny tego samego elementu.

Przykład:

Przełamanie kolumny

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

1. Przełamanie kolumny przed elementem:

   selektor { break-before: column }

2. Przełamanie kolumny po elemencie:

   selektor { break-after: column }

3. Blokada przełamania kolumny przed elementem:

   selektor { break-before: avoid-column }

4. Blokada przełamania kolumny po elemencie:

   selektor { break-after: avoid-column }

5. Blokada przełamania kolumny wewnątrz elemenu:

   selektor { break-inside: avoid-column }

Tekst nie zawsze musi przełamywać się między kolumnami tak, jak byśmy sobie tego życzyli. Możemy np. nie chcieć, aby tytuł znalazł się na końcu kolumny. W takim przypadku estetyczniej będzie wyglądało, jeśli kolumna przełamie się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu:

h1 { break-after: avoid-column }

Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii:

hr { break-after: column }

Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny:

p { break-inside: avoid-column }

Przykład:

Łączenie kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { column-span: all }

Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość rozciągnięcia tytułu na szerokość wszystkich kolumn. Wcześniejsze kolumny tekstu będą się kończyć ponad tytułem, a następne zaczynać poniżej niego. Zatem nie mamy tutaj do czynienia z sytuacją spotykaną czasem w gazetach, kiedy tekst w kolumnach czytamy z góry do dołu przeskakując przez tytuł lub zdjęcie umieszczone w środku.

W obecnej wersji specyfikacja CSS nie pozwala określać liczby łączonych kolumn.

Przykład:

Wypełnienie kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12, Chrome 50)

selektor { column-fill: wypełnienie }

Przeglądarka stara się zawsze zrównoważyć kolumny tekstu w taki sposób, aby możliwie wszystkie (oprócz ostatniej) miały taką samą wysokość i nie było żadnej wolnej przestrzeni z prawej strony elementu. Oznacza to, że nawet jeśli ustalimy wysokość elementu, kolumny mogą być od niej niższe, jeśli treści nie będzie wystarczająco dużo, aby wypełnić cały element nie tylko na szerokość, ale i na wysokość.

W pewnych sytuacjach może nam jednak zależeć, aby wysokość kolumn miała dokładnie tyle, ile określimy, nawet jeśli z prawej strony niektóre kolumny miałyby być zupełnie puste. Służy to tego deklaracja: "column-fill: auto".

Przykład:

• Filtry
• Układ elastyczny

• Do góry
• Strona główna