8. diel - Text a písmo 5. časť

V minulej lekcii, Text a písmo 4. časť , sme si ukázali, ako pracovať s vlastnými fonty, meniť smer písma a napísať text veľkými písmenami tak, aby zostala malá.

Vitajte pri ďalšej lekcii ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako v CSS3 vykresľovať text zrkadlovo, a ako pracovať so zalomením textu, medzerami a nastavením úvodzoviek. Výsledok dnešnej práce bude taký:

Vlastnosť unicode-bidi

V predchádzajúcej lekcii sme si ukázali vlastnosť direction. Tá v kombinácii s vlastnosťou unicode-bidi povie prehliadaču, aby sa text vygeneroval úplne zrkadlovo prevrátený. Môžeme jej nastaviť tieto hodnoty:

• normal (predvolené) - Text sa vykresľuje rovnako ako pred použitím tejto hodnoty.
• embed - Vytvorí ďalšiu úroveň vkladania.
• bidi-override - Vykreslí text zrkadlovo prevrátený (pri hodnote rtl k vlastnosti display). Hodí sa na vypísanie textu v cudzom jazyku, v ktorom sa píše sprava doľava.
• isolate - Element sa vykreslí podľa vlastnosti display, ale jeho obsah nie. Zároveň je separovaný od ostatných súrodeneckých elementov.
• isolate-override - Vykreslí ako element tak jeho obsah zrkadlovo prevrátený.
• plaintext - Text sa vykreslí s ohľadom na nastavenie rodičovského elementu, smer textu je určený za použitia pravidiel p2 a p3 obojsmerného algoritmu Unicode ( viac info tu).
• initial - Nastaví vlastnosť na východiskovú hodnotu (teda na normal).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Pre ukážku si vytvoríme HTML element s triedou bidi a tej v CSS súbore nastavíme vlastnosť unicode-bidi: bidi-override a direction: rtl. Do elementu musíme pre viditeľnosť doplniť nejaký 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>

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

Text sa v našom elemente teraz vypíše zrkadlovo sprava doľava. Avšak orientácia písmen v našom jazyku zostáva rovnaká:

Vlastnosť word-wrap

Pomocou CSS 3 vlastnosti word-wrap nastavujeme zalamovanie slov v texte. Text sa môže zalamovať ako celé slová, alebo môžeme povoliť rozdeľovanie slov aj tam, kde to nie je povolené. To znamená že pri elementoch, ktoré majú fixnú šírku sa text zalomí po určitom počte znakov, bez ohľadu na to, či to náhodou nerozdelí nejaké slovo uprostred. Vlastnosť sa dedí. Môžeme nastaviť tieto hodnoty:

• normal (predvolené) - Zalamuje iba celé slová alebo deliteľné slová.
• break-word - Zalamuje vždy, keď je to potrebné. Pokiaľ to ide, udržujú sa celé slová. Príliš dlhé slová sú však roztrhnuté.
• inherit - zdedí vlastnosť word-wrap z rodičovského elementu.
• initial - Nastaví vlastnosť na východiskovú.

Vytvoríme si teda nový HTML element s novou triedou wrap. Do neho vpíšeme vetu s použitím podčiarkovníkov namiesto medzier. Našej novej triede nastavíme vlastnosť word-wrap: break-word;. Ďalej pre lepšiu viditeľnosť efektu pridáme ešte šírku width: 100px; a okraj border: solid 1px blue;:

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

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

Výsledok v prehliadači:

Vlastnosť word-break

Pomocou CSS 3 vlastnosti word-break nastavujeme rozdeľovanie slov v texte. Vlastnosť je podobná vlastnosti word-wrap, až na to, že sa tu hovorí o tzv. CJK texte (Čínskych, Japonských a Kórejských znakoch) a je zle zdokumentovaná. Vlastnosť sa dedí. Hodnoty, ktoré je možné vlastnosti nastaviť:

• normal (predvolené) - Zalamuje podľa štandardných pravidiel.
• break-all - Zalamuje na ktoromkoľvek znaku.
• keep-all - Nezalamuje v CJK textoch, pre ostatné texty sa chová ako hodnota normal.
• break-world - Rovnaké pravidlá ako predvolené, iba s tým rozdielom, že pri zalomení nerozdeľuje slová.
• initial - Zalamuje podľa štandardných pravidiel (rovnako ako pri východiskovej hodnote).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Pre ukážku si vytvoríme nový HTML element s triedou break:

<div class="break">
    Náhodný text
    Fsdkjafnaksjdfnkjasndfkjgmk mnbasdfukzbaudfbkjghjfdbkjhad
    Qweertzuioplkjhfgfasdyxcmncvnmbpoiukljhasdfuizgwernmhvsdjkhgasdfnmbvsdafjkhgasdfjkhgsd
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</div>

Tejto triede v CSS nastavíme okraj a šírku obmedzenú na 500px. Ďalej pridáme vlastnosť word-break: keep-all, čo spôsobí, že akýkoľvek text, ktorý bude presahovať cez šírku nášho elementu, sa nezalomí:

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

Výsledok potom vyzerá takto:

Vlastnosť word-spacing

Táto vlastnosť je pomerne jednoduchá, pomocou nej nastavujeme rozostupy medzi jednotlivými slovami v texte. Vlastnosť sa dedí a hodnoty, ktoré je možné nastaviť sú:

• normal (predvolené) - Predvolená medzera medzi slovami.
• dĺžka - Dĺžka špecifikovaná ľubovoľnou jednotkou, napr. px, em, pt atď. Môžeme uviesť aj záporné hodnoty.
• inherit - zdedí vlastnosť word-spacing z rodičovského elementu.

Pre ukážku si vytvoríme ďalší HTML element s triedou spacing, ktoré nastavíme vlastnosť word-spacing s hodnotou 50px:

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

.spacing{
    word-spacing: 50px;
}

Ako vyplieva z teórie, medzery medzi slovami vo vete napísané v elemente budú 50px:

Vlastnosť white-space

Pomocou CSS 3 vlastnosti white-space nastavujeme správanie medzier v texte. Môžeme docieliť to, aby sa ponechávalo niekoľko medzier vedľa seba, alebo aby sa text podľa nich nezalamoval. Ďalej ovplyvníme aj zalamovanie riadkov. Vlastnosti môžeme nastaviť nasledujúce hodnoty:

• normal (predvolené) - Viac medzier za sebou sa nahradí jedinou medzerou. Text sa zalamuje iba keď je to potrebné a konce riadkov sú ignorované.
• nowrap - Viac medzier za sebou sa nahradí jedinou medzerou. Text sa zalomí iba explicitne značkou <br>.
• pre - Text sa zobrazí presne tak, ako je zapísaný (chová sa ako tag <pre>).
• pre-line - Viac medzier za sebou sa nahradí jedinou medzerou. Text sa zalomí podľa zalomenia v pôvodnom texte, a tiež keď je to potrebné.
• pre-wrap - Text sa zobrazí tak, ako je zapísaný. Zalomí sa podľa zalomenia v pôvodnom texte, a tiež keď je to potrebné.
• inherit - zdedí vlastnosť white-space z rodičovského elementu.

Efekt si ukážeme na ďalšom HTML elemente, v ktorom bude text s viacerými medzerami. Podľa nastavenia CSS sa viac medzier za sebou nahradí iba raz:

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

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

Vlastnosť quotes

Posledná vlastnosť, ktorú si tu ukážeme, je vlastnosť quotes, ktorá pomáha definovať úvodzovky. Tú môžeme definovať niekoľkými spôsobmi. Vždy však musíme definovať počet reťazcov textu deliteľný dvoma, kvôli začínajúcim a uzatváracím úvodzovkám, ktoré sa píšu hneď za seba. Ďalšie spôsoby sa píšu hneď za tie minulé úvodzovky, bez žiadnej čiarky či niečoho iného. Ak by sme chceli v citácii urobiť ďalšiu vnorenú citáciu so špicatými zátvorkami, zápis by vyzeral nasledovne:

• text text ("!" "!") - Predvolená hodnota sú anglické úvodzovky ("). Ako úvodzovky môžeme dosadiť čokoľvek - pokojne aj nejaký reťazec textu (pre reťazce textu odporúčam radšej vlastnosť content). Pre zapísanie platia vyššie uvedené pravidlá.
• initial - Nastaví vlastnosť na východiskovú hodnotu (teda na anglické úvodzovky).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Pokiaľ chceme, aby nami nastavené úvodzovky boli vidieť, musíme pri vytváraní použiť tagy <q></q>. V novom elemente teda vpíšeme vetu do nich. Pred ňou a za ňou sa nám potom zobrazia nami nastavené úvodzovky:

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

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

Nastaviť môžeme ľubovoľné znaky a ich počet. Ak chceme, nemusí sa ani zhodovať:

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

V ďalšej lekcii, Animácie efektov pri interakcii s elementmi (tooltip) , si ukážeme, ako sa dajú meniť elementy, keď je používateľ napríklad prekryje kurzorom myši.

 

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