Column-count
CSS vlastnost column-count určuje počet sloupců ve sloupcové sazbě.
| hodnoty | počet sloupců |
|---|---|
|
auto |
text nebude ve sloupcích, respektive bude jen v jednom sloupci, výchozí stav |
| 2 | text se zalomí do dvou sloupců |
| N | text se zalomí do N sloupců |
Sloupcová sazba si rozvrhne text prvku na sloupce a postupně je naplní. Pokud není zadáno jinak (přes column-width), rozpočítá dostupnou šířku mezi sloupce tak, aby byly stejně široké. Dále se snaží, aby sloupce byly i přibližně stejně vysoké.
Sloupcovou sazbu nelze bez této CSS vlastnosti udělat, protože CSS neobsahuje žádné možnosti, přelít obsah z jednoho obdélníku (sloupce) do druhého.
Použití na webu je sporné. Lidé si za desetiletí existence internetu zvykli na to, že text se na webu čte shora dolů v jednom širším sloupci. Napadají mě dvě vhodná použití sloupcové sazby:
- vyskládání odkazů v patičce do sloupečků
- tisková verze pro delší texty
Příklad nastavení dvou sloupců
<div class="sloupce">
delší text...
</div>
<style>
div.sloupce {
column-count: 2; /* budou 2
sloupce */
}
</style>
Příklad říká pouze to, že div s class="sloupce" se zalomí do dvou sloupců.
Na jaře 2019 už sloupcová sazba funguje bez prefixů. Dříve se musely používat prefixované vlastnosti -moz-column-count a -webkig-column-count. V prosinci 2015 podporoval zápis bez prefixů jenom Internet Explorer. Proto se už nyní (2022) s prefixy zapisovat nemusí.
Podpora
Internet Explorer podporuje column-count dobře od verze 10.
U ostatních prohlížečů
| Prohlížeč | Podpora ve verzích | co nepodporuje |
|---|---|---|
| Internet Explorer | od verze 10 | nevím, už to není podstatné |
| Mozilla (Firefox) | od verze 52 | |
| Chrome a Webkit | od verze 50 |
Další vlastnosti sloupcové sazby
| vlastnost sloupcové sazby | hodnoty | význam vlastnosti |
|---|---|---|
| column-count | číslo | počet sloupců - o tom je tato stránka |
| column-width | délka | doporučená šířka jednoho sloupce |
| columns | délka číslo | souhrnná vlastnost pro column-width a column-count, např. columns: 2rem 2; |
| column-gap | délka | mezera mezi sloupci - výchozí je 1em |
| column-rule | jako u border | vlastnosti oddělovací čáry, souhrnně, např. 1px solid blue |
| column-rule-color | barva | barva oddělovací čáry (některé světlé barvy zapsané #rrggbb mi nefungují a zobrazují se jako černá) |
| column-rule-style | styl čáry | styl čáry oddělující sloupce - výchozí je none, tedy bez čáry |
| column-rule-width | délka | tloušťka oddělovací čáry |
| column-span | 1, all, inherit | určuje, přes kolik sloupců se vykreslí stylovaný zanořený prvek. Například odkaz h2 {column-span: all;} ukončí sloupce a vykreslí se na celou šířku stránky. Po prvku budou pokračovat sloupce. |
Všechny výše uvedené vlastnosti se dříve musely zapsat třikrát a z toho dvakrát opatřit prefixy. V roce 2019 už prefix potřebují jenom staré Samsungy.
Web není stránkované médium, takže jsem ve zdejších návodech zatím ignoroval CSS vlastnosti break-before, break-after a break-inside (s výjimkou stránky o tisku s CSS). To jsou vlastnosti, které určují, který text nebo obsah se nesmí (případně musí) rozdělit na více stránek. Dělení do stránek je důležité jenom v tiskových verzích. V případě sloupcové sazby je už ale občas na něco takového potřeba myslet už na webu.
Teoreticky by tedy vlastnosti break-* měly mít i hodnoty avoid-column, column a avoid, ale prohlížeče je ještě nepodporují. Na jaře 2019 mi funguje jenom break-inside.
Break-inside: avoid
Hezká vlastnost, která zaručí, že se objekt (typicky tabulka) nerozdělí mezi více sloupců.
table {break-inside: avoid;}
případně nověji (nejistá funkčnost):
table {break-inside: avoid-column}
Break-before: always
Před prvkem s tímto nastavením skončí sloupec a začne nový. Prvek je vždy na začátku sloupce.
h3 {break-before: always;}
případně nověji (nejistá funkčnost):
h3 {break-before: column;}
Break-after mi nefunguje
Nedokázal jsem rozběhat, aby nadpis držel ve stejné sloupci jako následující text. Měla by na to být vlastnost break-after, ale nefunguje mi. Kdybyste to rozběhali, dejte vědět a pošlete příklad.
Orphans a widows
Sbírka CSS vlastností pomáhající vylepšit tok textu ve sloupcové sazbě. Vlastnosti fungují velmi podobně nebo stejně ve stránkovaných médiích, tedy typicky při tisku.
Orphans a widows určují, kolik minimálně řádků smí zůstat na konci starého slupce (orphans) nebo na začátku nového sloupce (widows).
p {orphans: 2;}
brání tomu, aby na konci sloupce vznikl parchant s jedním řádkem. Minimální počet řádků je nastaven na 2. Pokud by hrozilo, že jednořádkový parchant vznikne, místo na konec sloupce se posune na začátek nového. (Samozřejmě odstavec musí mít aspoň 2 řádky.) Správný překlad slova orphan by byl sirotek, ale v české typografické praxi se jim odnepaměti říká parchant.
p {widows: 2;}
brání tomu, aby na začátku sloupce vznikla jednořádková vdova. Minimálně tam musejí být dva řádky. Pokud by se sloupce bez nastavení widows vykreslily tak, že na začátku sloupce by vycházela jednořádková vdova, vezme se poslední řádek z předchozího sloupce a strčí se před vdovu. Tak budou v novém sloupci aspoň dva řádky.
V praxi se vyplatí ve sloupcích i v tisku nastavit
p {orphan: 2; widow: 2;}
Reklama
