Lekce 9 - Text a písmo - Sloupce, tabulátory, odsazení, zalamování

V minulé lekci, Text a písmo - Zrcadlení, zalamování, rozestupy, jsme si shrnuli, jak v CSS3 vykreslovat text zrcadlově, jak pracovat se zalomením textu, mezerami a nastavením uvozovek.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak členit text do sloupců, nastavit velikost tabulátoru, odsadit řádek a zalamovat text:

Vlastnosti sloupců

Pomocí těchto vlastností členíme text do sloupců tak, jako například v novinových článcích. Z logiky věci vyplývá, že některé vlastnosti musíme definovat, aby se projevil efekt jiných. Například, pokud bychom nastavili pouze vlastnost ovlivňující barvu mezi sloupci, musíme nejdříve text do těchto sloupců rozdělit. Jednotlivé vlastnosti jsou tedy:

• column-count - Určuje počet sloupců, do kterých bude text rozdělen
• column-fill - Jak bude vyvážen sloupec
• column-gap - Mezera mezi sloupci
• column-rule - Nastaví, co bude mezi sloupci (lze rozdělit na color, style, width)
• column-rule-color - Nastaví barvu mezery mezi sloupci
• column-rule-style - Nastaví styl mezery mezi sloupci
• column-rule-width - Nastaví šířku mezery mezi sloupci
• column-span - Určuje danému elementu, zda má být roztažený přes celou šířku rodičovského elementu nebo jen přes 1 sloupec
• column-width - Nastavuje šířku každého sloupce

Hodnoty, které těmto vlastnostem lze nastavit, vycházejí z jednotlivých popisů. Pokud se jedná o počty a velikosti, může být nastavena libovolná číselná hodnota. Podíváme se tedy nejprve na tyto jednoduché. Vytvoříme si HTML dokument s elementem <div>, kterému přidáme třídu .sloupce. Do něj pak vepíšeme libovolný text:

<div class="sloupce">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Repudiandae explicabo incidunt exercitationem, aspernatur quasi voluptatem
    corrupti provident soluta labore placeat quae cumque necessitatibus repellendus,
    tenetur optio eaque saepe recusandae. Cumque deserunt fuga, labore ducimus
    distinctio natus voluptate, obcaecati id molestias nisi rerum amet voluptas expedita?
    Nihil temporibus molestias eligendi eos.
</div>

Do CSS souboru přidáme třídě .sloupce vlastnost column-count s hodnotou 3, column-width s hodnotou 100px a column-rule-width s hodnotou 10px:

.sloupce {
   column-count: 3;
   column-width: 100px;
   column-rule-width: 10px;
}

Když si HTML dokument otevřeme, dostaneme tento výsledek:

Pokud se nyní dobře podíváme, máme sice text rozdělený do tří sloupců, ale rozhodně nemají šířku 100px. Při vytváření sloupců z jednotného textu se totiž používá pouze jedna vlastnost. Buď si zvolíme pevnou šířku a prohlížeč poté text automaticky rozdělí do několika sloupců anebo si vybereme počet sloupců. Těm je potom automaticky nastavena šířka rovnoměrně podle šířky elementu. K vlastnosti column-rule můžeme přidat ještě style a color.

.sloupce {
   column-count: 3;
   column-width: 100px;
   column-rule-width: 10px;
   column-rule-style: dotted;
   column-rule-color: blue;
}

Mezi jednotlivými sloupci se nyní objeví modré tečky:

Vlastnost column-gap

Šířku mezi sloupci nastavíme pomocí naší další vlastnosti a to je column-gap. Ta má opět poměrně jednoduché použití, stačí nastavit hodnotu šířky. Doplníme si tedy naši třídu .sloupce:

.sloupce {
   column-count: 3;
   column-width: 100px;
   column-rule-width: 10px;
   column-rule-style: dotted;
   column-rule-color: blue;
   column-gap: 200px;
}

Mezi sloupci bude teď tedy 200px.

Vlastnost column-fill

Další vlastností, pomocí které nastavujeme vzhledy sloupců, je vlastnost column-fill. Ta může mít nastavena dvě hodnoty:

• auto - Pokud se text vleze do prvního sloupce, ostatní zůstanou prázdné.
• balance - Text bude rovnoměrně rozdělen do všech sloupců.

Nyní záleží, jaký používáte prohlížeč. Mozilla Firefox tuto vlastnost zpracuje automaticky, ale pokud používáme například Chrome, je potřeba pro viditelnost efektu nastavit v CSS třídě našemu elementu ještě výšku. Přidáme tedy ještě vlastnost height: 500px;.

.sloupce {
   column-count: 3;
   column-width: 100px;
   column-rule-width: 10px;
   column-rule-style: dotted;
   column-rule-color: blue;
   column-gap: 200px;
   column-fill: auto;
   height: 500px;
}

Díky tomu, že je element dostatečně vysoký, text se vypíše pouze do prvního sloupce.

Vlastnost column-span

Poslední vlastností ohledně sloupců, kterou si zde ukážeme, je vlastnost column-span. Ta specifikuje, jestli se element má vygenerovat přes všechny sloupce anebo pouze v jednom. Opět lze nastavit pouze dvě hodnoty a to:

• none - Výchozí hodnota, element se vygeneruje v rámci jednoho sloupce.
• all - Element se vygeneruje přes všechny sloupce.

Pro ukázku si nejprve musíme vytvořit HTML element v našem už vytvořeném. Tomu pak přidáme třídu nadpis s vlastností column-span: all; a background-color: red;. Nakonec z předešlé třídy sloupce smažeme vlastnost column-fill, aby byl efekt co nejvíc vidět.

<div class="sloupce">
   <div class="nadpis">Nadpis přes všechny sloupce</div>
   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae explicabo incidunt exercitationem, aspernatur quasi voluptatem
   corrupti provident soluta labore placeat quae cumque necessitatibus repellendus, tenetur optio eaque saepe recusandae. Cumque deserunt
   fuga, labore ducimus distinctio natus voluptate, obcaecati id molestias nisi rerum amet voluptas expedita? Nihil temporibus molestias
   eligendi eos.
</div>

.nadpis {
   column-span: all;
   background-color: red;
}

Element s nadpisem tedy i přesto, že se nachází v elementu co se člení do sloupců, rozdělen není.

Vlastnost tab-size

Díky vlastnosti tab-size můžeme nastavit velikost znaku tabulátoru. Funguje pouze pro elementy textarea a pre (ostatní elementy převedou tabulátor na jednu mezeru)! Je důležité si uvědomit, že při psaní HTML kódu nám editor při stisknutí tabulátoru pouze doplní určitý počet mezer. Jejich velikost anebo počet se poté také mění podle toho, jaký prohlížeč, editor a font používáme. Nejprve si ukážeme hodnoty, které lze vlastnosti nastavit:

• číslo - Výchozí hodnota je číslo 8. Číslo znamená počet daných mezer pro jeden znak tabulátoru.
• číslo jednotka - Číslo může být libovolné a jednotka taky (tedy taková, která existuje v CSS3 - cm, mm, px, em, % atd.). Tuto hodnotu nepodporuje žádný webový prohlížeč!
• initial - Nastaví vlastnost na výchozí hodnotu.
• inherit - Hodnota se zdědí z rodičovského elementu.

Pro porovnání si zde vytvoříme HTML element, který bude mít pokaždé dva obsahově stejné řádky, ale jednou s použitím tabulátoru zapsaného pomocí kódu, a podruhé s použitím tabulátoru v editoru. Jediné co se změní, bude tedy zápis a následný efekt na stránce. Vytvoříme si tedy obyčejný div element s třídou pre. Do ní poté napíšeme první řádek, kde nebude použito nic. Druhý a třetí řádek budou mít použit jeden tabulátor. Čtvrtý a pátý budou mít opět použit jeden tabulátor, ale ten bude upraven pomocí CSS vlastnosti tab-size. Nakonec šestý a sedmý řádek bude mít pro porovnání s vlastností použity tři mezery před textem. Ještě pro upřesnění, 	 prohlížeče chápou jako znak tabulátor a   jako znak mezery.

<div class="pre">
   žádný tab
   &#0009;velikost tabulátoru napsaná pomocí kódu.
       velikost tabulátoru určené editorem.
   <div class="tab">&#0009;velikost tabulátoru napsaná pomocí kódu a upravená v CSS</div>
   <div class="tab">   velikost tabulátoru určené editorem upravená v CSS</div>
   &nbsp;&nbsp;&nbsp;velikost 3 mezer napsaných pomocí kódu což je stejné jako naše nastavení v CSS
      velikost 3 mezer napsaných v editoru což je stejné jako naše nastavení v CSS
</div>

V CSS souboru už nyní pouze nastavíme třídě pre vlastnost white-space: pre;, protože bez ní by nám tato vlastnost nefungovala. Poté nastavíme třídě tab vlastnost tab-size: 3;. To znamená, že znaky tabulátoru budou mít velikost stejnou jako 3 mezery za sebou.

.pre {
   white-space: pre;
}

.tab {
   tab-size: 3;
}

Na první pohled můžeme vidět, že místa kde začíná druhý a třetí řádek se liší. Ostatní řádky začínají kvůli naší vlastnosti na stejném místě. Všimněme si také, že když se snažíme myší vybrat místo před druhým řádkem, vybere se nám celý kus. Ale pokud to samé zkusíme před třetím řádkem, vyberou se jednotlivé mezery. Rozhodně doporučujeme vyzkoušet si tuto vlastnost v přiložených souborech.

Vlastnost text-indent

V této vlastnosti můžeme nastavit odsazení prvního řádku odstavce. Můžeme tak v textu používat české odstavce. Odsazení může být buď kladné anebo záporné, což nám odsadí text doprava anebo doleva. Vlastnost se dědí a hodnoty které jí lze nastavit jsou:

• délka - Délka odsazení v px, em, pt, % nebo jiných jednotkách. Výchozí hodnota je 0. Odsazení může být vyjádřeno i jako procento velikosti rodičovského elementu.
• inherit - Vlastnost text-indent se zdědí od rodičovského elementu.

Použití je tedy opravdu jednoduché. Stačí si v CSS třídě pro daný element nastavit velikost (například text-indent: 20px).

<div class="indent">
   Lorem ipsum dolor sit amet consectetur adipisicing elit.
   Maxime tempore rickroll inventore, vitae, reprehenderit explicabo praesentium vel minima,
   atque facere accusamus error? Doloremque
   facilis laborum sapiente illo sunt deleniti autem!
</div>

.indent {
    text-indent: 20px;
    width: 200px;
}

Šířka elementu sice není nutná, ale pro lepší viditelnost efektu ji nastavíme také.

Nyní jak můžeme vidět, první řádek je o 20 pixelů odsazen doprava.

Vlastnost text-overflow

V této poslední vlastnosti text-overflow nastavujeme chování vytékání textu z HTML elementu. Pokud se text nevejde do elementu, ve kterém je obsažen a je nastaveno, že nemá vytékat, může být zkrácen nebo nahrazen jiným textem. Vlastnosti lze nastavit následující hodnoty:

• clip (výchozí) - Text je zkrácen na nejvyšší možnou délku, která se do elementu vejde.
• ellipsis - Text je zkrácen na nejvyšší možnou délku, která se do elementu vejde a je zakončen trojtečkou.
• "zástupný text" - Můžeme uvést zástupný text, který se zobrazí místo původního textu v případě, že se do elementu celý nevejde.

Vytvoříme si tedy ještě poslední HTML element, s třídou overflow a textem uvnitř. Aby byla tato vlastnost funkční, musíme v CSS třídě našeho elementu nastavit ještě vlastnosti white-space: nowrap;, overflow: hidden; a width:200px.

<div class="overflow">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odit vitae quae blanditiis dolore maiores dolorem.
</div>

.overflow {
   white-space: nowrap;
   overflow: hidden;
   width: 200px;
   text-overflow: ellipsis;
}

Protože jsme této vlastnosti nastavili hodnotu ellipsis, bude text, který se nevejde do šířky elementu nahrazen třemi tečkami.

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet

V další lekci, Seznamy v CSS3, si ukážeme, jak nastavit vlastní vzhledy seznamů a jak pracovat s jejich vlastnostmi.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.