9. diel - Text a písmo - Stĺpce, tabulátory, odsadenie, zalamovanie

Vitajte pri ďalšej lekcii ohľadom nastavenia v CSS3, v ktorej si ukážeme, ako členiť text do stĺpcov, nastaviť veľkosť tabulátora, odsadiť riadok a zalamovať text:

Vlastnosti stĺpcov

Pomocou týchto vlastností členíme text do stĺpcov tak, ako napríklad v novinových článkoch. Z logiky veci vyplýva, že niektoré vlastnosti musíme definovať, aby sa prejavil efekt iných. Napríklad, ak by sme nastavili iba vlastnosť ovplyvňujúcu farbu medzi stĺpcami, musíme najskôr text do týchto stĺpcov rozdeliť. Jednotlivé vlastnosti sú teda:

• column-count - Určuje počet stĺpcov, do ktorých bude text rozdelený
• column-fill - Ako bude vyvážený stĺpec
• column-gap - Medzera medzi stĺpcami
• column-rule - Nastaví, čo bude medzi stĺpcami (možno rozdeliť na color, style, width)
• column-rule-color - Nastaví farbu medzery medzi stĺpcami
• column-rule-style - Nastaví štýl medzery medzi stĺpcami
• column-rule-width - Nastaví šírku medzery medzi stĺpcami
• column-span - Určuje danému elementu, či má byť roztiahnutý cez celú šírku rodičovského elementu alebo len cez 1 stĺpec
• column-width - Nastavuje šírku každého stĺpca

Hodnoty, ktoré je možné týmto vlastnostiam nastaviť, vychádzajú z jednotlivých popisov. Pokiaľ ide o počty a veľkosti, môže byť nastavená ľubovoľná číselná hodnota. Pozrieme sa teda najprv na tieto jednoduché. Vytvoríme si HTML dokument s elementom <div>, ktorému pridáme triedu .sloupce. Do neho potom vpíšeme ľubovoľný 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 súboru pridáme triede .sloupce vlastnosť 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;
}

Keď si HTML dokument otvoríme, dostaneme tento výsledok:

Pokiaľ sa teraz dobre pozrieme, máme síce text rozdelený do troch stĺpcov, ale rozhodne nemajú šírku 100px. Pri vytváraní stĺpcov z jednotného textu sa totiž používa iba jedna vlastnosť. Buď si zvolíme pevnú šírku a prehliadač potom text automaticky rozdelí do niekoľkých stĺpcov alebo si vyberieme počet stĺpcov. Tým je potom automaticky nastavená šírka rovnomerne podľa šírky elementu. K vlastnosti column-rule môžeme pridať ešte style a color.

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

Medzi jednotlivými stĺpcami sa teraz objavia modré bodky:

Vlastnosť column-gap

Šírku medzi stĺpcami nastavíme pomocou našej ďalšej vlastnosti a to je column-gap. Tá má opäť pomerne jednoduché použitie, stačí nastaviť hodnotu šírky. Doplníme si teda našu triedu .sloupce:

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

Medzi stĺpcami bude teraz teda 200px.

Vlastnosť column-fill

Ďalšou vlastnosťou, pomocou ktorej nastavujeme vzhľady stĺpcov, je vlastnosť column-fill. Tá môže mať nastavené dve hodnoty:

• auto - Ak sa text vlezie do prvého stĺpca, ostatní zostanú prázdne.
• balance - Text bude rovnomerne rozdelený do všetkých stĺpcov.

Teraz záleží, aký používate prehliadač. Mozilla Firefox túto vlastnosť spracuje automaticky, ale pokiaľ používame napríklad Chrome, je potrebné pre viditeľnosť efektu nastaviť v CSS triede nášmu elementu ešte výšku. Pridáme teda ešte vlastnosť width: 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;
}

Vďaka tomu, že je element dostatočne vysoký, text sa vypíše iba do prvého stĺpca.

Vlastnosť column-span

Poslednou vlastnosťou ohľadom stĺpcov, ktorú si tu ukážeme, je vlastnosť column-span. Tá špecifikuje, či sa element má vygenerovať cez všetky stĺpce alebo iba v jednom. Opäť je možné nastaviť iba dve hodnoty a to:

• none - Predvolená hodnota, element sa vygeneruje v rámci jedného stĺpca.
• all - Element sa vygeneruje cez všetky stĺpce.

Pre ukážku si najskôr musíme vytvoriť HTML element v našom už vytvorenom. Tomu potom pridáme triedu nadpis s vlastnosťou column-span: all; a background-color: red;. Nakoniec z predošlej triedy stĺpca zmažeme vlastnosť column-fill, aby bol efekt čo najviac vidieť.

<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 nadpisom teda aj napriek tomu, že sa nachádza v elemente čo sa člení do stĺpcov, rozdelený nie je.

Vlastnosť tab-size

Vďaka vlastnosti tab-size môžeme nastaviť veľkosť znaku tabulátora. Funguje iba pre elementy textarea a pre (ostatné elementy prevedú tabulátor na jednu medzeru)! Je dôležité si uvedomiť, že pri písaní HTML kódu nám editor pri stlačení tabulátora iba doplní určitý počet medzier. Ich veľkosť alebo počet sa potom tiež mení podľa toho, aký prehliadač, editor a font používame. Najprv si ukážeme hodnoty, ktoré je možné vlastnosti nastaviť:

• číslo - Predvolená hodnota je číslo 8. Číslo znamená počet daných medzier pre jeden znak tabulátora.
• číslo jednotka - Číslo môže byť ľubovoľné a jednotka taky (teda taká, ktorá existuje v CSS3 - cm, mm, px, em, % atď). Túto hodnotu nepodporuje žiadny webový prehliadač!
• initial - Nastaví vlastnosť na predvolenú hodnotu.
• inherit - Hodnota sa zdedí z rodičovského elementu.

Pre porovnanie si tu vytvoríme HTML element, ktorý bude mať zakaždým dva obsahovo rovnaké riadky, ale raz s použitím tabulátora zapísaného pomocou kódu, a druhýkrát s použitím tabulátora v editore. Jediné čo sa zmení, bude teda zápis a následný efekt na stránke. Vytvoríme si teda obyčajný div element s triedou pre. Do nej potom napíšeme prvý riadok, kde nebude použité nič. Druhý a tretí riadok budú mať použitý jeden tabulátor. Štvrtý a piaty budú mať opäť použitý jeden tabulátor, ale ten bude upravený pomocou CSS vlastnosti tab-size. Nakoniec šiesty a siedmy riadok bude mať na porovnanie s vlastnosťou použité tri medzery pred textom. Ešte pre upresnenie, 	 prehliadače chápu ako znak tabulátor a   ako znak medzery.

<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 súbore už teraz iba nastavíme triede pre vlastnosť white-space: pre;, pretože bez nej by nám táto vlastnosť nefungovala. Potom nastavíme triede tab vlastnosť tab-size: 3;. To znamená, že znaky tabulátora budú mať veľkosť rovnakú ako 3 medzery za sebou.

.pre {
   white-space: pre;
}

.tab {
   tab-size: 3;
}

Na prvý pohľad môžeme vidieť, že miesta kde začína druhý a tretí riadok sa líšia. Ostatné riadky začínajú kvôli našej vlastnosti na rovnakom mieste. Všimnime si tiež, že keď sa snažíme myšou vybrať miesto pred druhým riadkom, vyberie sa nám celý kus. Ale ak to isté skúsime pred tretím riadkom, vyberú sa jednotlivé medzery. Rozhodne odporúčame vyskúšať si túto vlastnosť v priložených súboroch.

Vlastnosť text-indent

V tejto vlastnosti môžeme nastaviť odsadenie prvého riadku odseku. Môžeme tak v texte používať slovenské odseky. Odsadenie môže byť buď kladné alebo záporné, čo nám odsadí text doprava alebo doľava. Vlastnosť sa dedí a hodnoty ktoré je možné nastaviť sú:

• dĺžka - Dĺžka odsadenia v px, em, pt, % alebo iných jednotkách. Predvolená hodnota je 0. Odsadenie môže byť vyjadrené aj ako percento veľkosti rodičovského elementu.
• inherit - Vlastnosť text-indent sa zdedí od rodičovského elementu.

Použitie je teda skutočne jednoduché. Stačí si v CSS triede pre daný element nastaviť veľkosť (naprí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;
}

Šírka elementu síce nie je nutná, ale pre lepšiu viditeľnosť efektu ju nastavíme tiež.

Teraz ako môžeme vidieť, prvý riadok je o 20 pixelů odsadený doprava.

Vlastnosť text-overflow

V tejto poslednej vlastnosti text-overflow nastavujeme chovanie vytekania textu z HTML elementu. Pokiaľ sa text nezmestí do elementu, v ktorom je obsiahnutý a je nastavené, že nemá vytekať, môže byť skrátený alebo nahradený iným textom. Vlastnosti je možné nastaviť nasledujúce hodnoty:

• clip (predvolené) - Text je skrátený na najvyššiu možnú dĺžku, ktorá sa do elementu zmestí.
• ellipsis - Text je skrátený na najvyššiu možnú dĺžku, ktorá sa do elementu zmestí a je zakončený trojbodkou.
• "zástupný text" - Môžeme uviesť zástupný text, ktorý sa zobrazí namiesto pôvodného textu v prípade, že sa do elementu celý nezmestí.

Vytvoríme si teda ešte posledný HTML element, s triedou overflow a textom vo vnútri. Aby bola táto vlastnosť funkčná, musíme v CSS triede nášho elementu nastaviť ešte 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;
}

Pretože sme tejto vlastnosti nastavili hodnotu ellipsis, bude text, ktorý sa nezmestí do šírky elementu nahradený tromi bodkami.

Pokiaľ niečomu nerozumiete, odporúčame stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.