Lekce 8 - Text a písmo - Zrcadlení, zalamování, rozestupy

V předchozím kvízu, Kvíz - Text a písmo v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak vykreslovat text zrcadlově, a jak pracovat se zalomením textu, mezerami a nastavením uvozovek. Výsledek dnešní práce bude takový:

Vlastnost unicode-bidi

V předchozí lekci jsme si ukázali vlastnost direction. Ta v kombinaci s vlastností unicode-bidi řekne prohlížeči, aby se text vygeneroval úplně zrcadlově převrácený. Můžeme jí nastavit tyto hodnoty:

• normal (výchozí) - Text se vykresluje stejně jako před použitím této hodnoty.
• embed - Vytvoří další úroveň vkládání.
• bidi-override - Vykreslí text zrcadlově převrácený (u hodnoty rtl k vlastnosti direction). Hodí se pro vypsání textu v cizím jazyce, ve kterém se píše zprava doleva.
• isolate - Element se vykreslí podle vlastnosti direction, ale jeho obsah nikoliv. Zároveň je separován od ostatní sourozeneckých elementů.
• isolate-override - Vykreslí jak element, tak jeho obsah zrcadlově převrácený.
• plaintext - Text se vykreslí s ohledem na nastavení rodičovského elementu, směr textu je určen za použití pravidel p2 a p3 obousměrného algoritmu Unicode.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na normal).
• inherit - Hodnota se zdědí z rodičovského elementu.

Pro ukázku si vytvoříme HTML element s třídou bidi. Do elementu musíme pro viditelnost doplnit nějaký text:

<div class="bidi">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis, fugiat ad vitae architecto aliquam eligendi
    neque alias ratione excepturi tempore laboriosam mollitia unde labore sed quibusdam laudantium explicabo modi fuga.
</div>

Této třídě nastavíme v CSS souboru vlastnost unicode-bidi na hodnotu bidi-override a vlastnost direction na hodnotu rtl:

.bidi {
    unicode-bidi: bidi-override;
    direction: rtl;
}

Text se v našem elementu nyní vypíše zrcadlově zprava doleva. Nicméně orientace písmen v našem jazyce zůstává stejná:

Vlastnost word-wrap

Pomocí CSS3 vlastnosti word-wrap nastavujeme zalamování slov v textu. Text se může zalamovat jako celá slova nebo můžeme povolit rozdělování slov i tam, kde to není povoleno. To znamená, že u elementů, které mají fixní šířku, se text zalomí po určitém počtu znaků bez ohledu na to, jestli to náhodou nerozdělí nějaké slovo uprostřed. Vlastnost se dědí. Můžeme nastavit tyto hodnoty:

• normal (výchozí) - Zalamuje pouze celá nebo dělitelná slova.
• break-word - Zalamuje slova vždy, když je to potřeba. Pokud to jde, udržují se celá slova. Příliš dlouhá slova jsou však roztržena.
• inherit - Zdědí vlastnost word-wrap z rodičovského elementu.
• initial - Nastaví vlastnost na výchozí.

Vytvoříme si tedy nový HTML element s novou třídou wrap. Do něj vepíšeme větu s použitím podtržítek místo mezer:

<div class="wrap">
    Tento_řádek_bude_zalomen_bez_ohledu_na_soudružnost_slov.
</div>

Naší nové třídě nastavíme vlastnost word-wrap na hodnotu break-word. Dále, pro lepší viditelnost efektu, nastavíme šířku width na hodnotu 100px a okraj border na hodnotu 1px solid blue:

.wrap {
    word-wrap: break-word;
    width: 100px;
    border: 1px solid blue;
}

Výsledek v prohlížeči:

Vlastnost word-break

Pomocí CSS3 vlastnosti word-break nastavujeme rozdělování slov v textu. Vlastnost je podobná vlastnosti word-wrap, až na to, že se zde mluví o tzv. CJK textu (Čínských, Japonských a Korejských znacích) a je špatně zdokumentovaná. Vlastnost se dědí. Hodnoty, které lze vlastnosti nastavit:

• normal (výchozí) - Zalamuje slova podle standardních pravidel.
• break-all - Zalamuje slova na kterémkoli znaku.
• keep-all - Nezalamuje v CJK textech, pro ostatní texty se chová jako hodnota normal.
• break-world - Stejná pravidla jako výchozí, pouze s tím rozdílem, že při zalomení nerozděluje slova.
• initial - Zalamuje slova podle standardních pravidel (stejně jako u výchozí hodnoty).
• inherit - Hodnota se zdědí z rodičovského elementu.

Pro ukázku si vytvoříme nový HTML element s třídou break:

<div class="break">
    Náhodný text
    TatoLekceJeSkvělá.TěšímSeNaDalšíLekceADalšíKurzy.
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</div>

Této třídě v CSS nastavíme vlastnost word-break na hodnotu keep-all, což způsobí, že jakýkoliv text, který bude přesahovat přes šířku našeho elementu, se nezalomí. Opět, pro lepší viditelnost efektu, nastavíme šířku width na hodnotu 100px a okraj border na hodnotu 1px solid blue:

.break {
  border: 1px solid blue;
  width: 100px;
  word-break: keep-all;
}

Výsledek potom vypadá takto:

Vlastnost word-spacing

Tato vlastnost je poměrně jednoduchá - pomocí ní nastavujeme rozestupy mezi jednotlivými slovy v textu. Vlastnost se dědí a hodnoty, které lze nastavit, jsou:

• normal (výchozí) - Výchozí mezera mezi slovy.
• hodnota - Délka specifikovaná libovolnou jednotkou, např. px, em, pt atd. Můžeme uvést i záporné hodnoty.
• inherit - Zdědí vlastnost word-spacing z rodičovského elementu.

Pro ukázku si vytvoříme další HTML element s třídou spacing:

<div class="spacing">
    Mezery mezi slovy budou 50px.
</div>

Třídě spacing nastavíme vlastnost word-spacing s hodnotou 50px:

.spacing {
    word-spacing: 50px;
}

Jak vyplývá z teorie, mezery mezi slovy ve větě napsané v elementu budou 50px:

Vlastnost white-space

Pomocí CSS3 vlastnosti white-space nastavujeme chování mezer v textu. Můžeme docílit toho, aby bylo ponecháno několik mezer vedle sebe, nebo aby se text podle nich nezalamoval. Dále ovlivníme i zalamování řádků. Vlastnosti můžeme nastavit následující hodnoty:

• normal (výchozí) - Více mezer za sebou se nahradí jedinou mezerou. Text se zalamuje pouze pokud je to potřeba a konce řádků jsou ignorovány.
• nowrap - Více mezer za sebou se nahradí jedinou mezerou. Text se zalomí pouze explicitně značkou <br>.
• pre - Text se zobrazí přesně tak, jak je zapsán (chová se jako tag <pre>).
• pre-line - Více mezer za sebou se nahradí jedinou mezerou. Text se zalomí podle zalomení v původním textu a také, když je to potřeba.
• pre-wrap - Text se zobrazí tak, jak je zapsán. Zalomí se podle zalomení v původním textu a také, když je to potřeba.
• inherit - Zdědí vlastnost white-space z rodičovského elementu.

Efekt si ukážeme na dalším HTML elementu, ve kterém bude text s vícero mezerami:

<div class="white">
        Text    se  zalomí   a     více     mezer      v      textu     bude      nahrazeno.
</div>

Třídě white nastavíme vlastnost white-space s hodnotou pre-line, která nahradí více mezer za sebou pouze jednou mezerou:

.white {
    white-space: pre-line;
}

Vlastnost quotes

Poslední vlastnost, kterou si zde ukážeme, je vlastnost quotes, která definuje, jakým způsobem budou zobrazené uvozovky okolo tagu <q></q>. Jako hodnotu vždy definujeme pár v pořadí začínající uvozovky a uzavírající uvozovky. V případě, že zadáme více párů, budou ovlivňovat vnořené citace. Můžeme nastavit tyto hodnoty:

• text text ("!" "!") - Výchozí hodnota jsou anglické uvozovky ("). Jako uvozovky můžeme dosadit cokoliv - klidně i nějaký řetězec textu (pro řetězce textu doporučuji radši vlastnost content). Pro zapsání platí výše uvedená pravidla.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na anglické uvozovky).
• inherit - Hodnota se zdědí z rodičovského elementu.

Vytvoříme nový HTML element s třídou quotes, do kterého vložíme 2 vnořené tagy <q>:

<div class="quotes">
        <q>Uvozovky v této větě budou vykřičníky</q>
</div>

Před ní a za ní se nám potom zobrazí námi nastavené uvozovky:

.quotes {
    quotes: "!" "!!!";
}

Nastavit můžeme libovolné znaky a jejich počet. Pokud chceme, nemusí se ani shodovat:

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, Text a písmo - Sloupce, tabulátory, odsazení, zalamování, si ukážeme jak členit text do sloupců, nastavit velikost tabulátoru, odsadit řádek a zalamovat text.

 

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š.