Lekce 7 - Text a písmo - Směr, šíře, varianty, závěsná interpunkce

V minulé lekci, Text a písmo - Zarovnání, stínování, tučnost písma, mezery , jsme pokračovali v problematice textu a písma. Dodělali jsme náš článek za pomocí dalších CSS vlastností.

Vítejte u další lekce ohledně nastavení v CSS3. Ukážeme si, jak pracovat s vlastními fonty, měnit směr písma a napsat text velkými písmeny tak, aby zůstala malá:

Nastavení @font-face

V tomto případě se nejedná o vlastnost, ale o pravidlo, pomocí něhož definujeme na stránkách fonty pro text. Použití je jednoduché, jediné co potřebujeme, je odkaz na uložený font. Ten poté uložíme pod proměnnou, kterou budeme v našich třídách na stránce používat. U adresy fontu je potřeba specifikovat ještě formát používaného fontu, ten se shoduje s příponou fontu. Podporované formáty fontů jsou soubory s příponou tft/oft, woff, woff2, svg a eot. Některé však fungují pouze na určitých prohlížečích.

@font-face {
   font-family: "Název proměnné";
   src: url("") format("");
}

V názvu proměnné lze použít cokoliv, pro přehled ale doporučujeme používat názvy fontů. Ukážeme si jak to v praxi vypadá. Vytvoříme si v HTML dokumentu element s třídou font1. V CSS souboru přidáme pravidlo @font-face, ve kterém budeme definovat nejdříve název fontu, a poté odkaz na umístění souboru se znaky. V našem případě to bude tedy font s názvem PrvniFont. K adrese umístění se přidává i formát fontu (.ttf = truetype), což slouží jako informace pro prohlížeče. Doplníme tedy ještě format("truetype").

<div class="font1">
    První font.
</div>

@font-face {
   font-family: "PrvniFont";
   src: url("Roboto.ttf") format("truetype");
}

.font1 {
   font-family: "PrvniFont";
}

Nyní by měl být náš nový font vidět:

V těle pravidla můžeme dále specifikovat:

• font-stretch - Jak blízko u sebe bude písmo (nepodporuje ji žádný prohlížeč).
• font-style - Styl písma fontu.
• font-weight - Tučnost písma fontu.

Velká většina volně dostupných fontů se však dnes již vydává s předdefinovanými styly a tloušťkou, to znamená že další úpravy nejsou potřeba, a je daleko lepší stáhnout si font se vzhledem podle potřeby.

Direction

Pomocí CSS3 vlastnosti direction nastavujeme směr textu v HTML elementu. Vlastnost se dědí a používá se zejména pro text v jazycích, ve kterých se píše zprava doleva. Narozdíl od vlastnosti writing-mode však umí tato vlastnost měnit směr pouze zprava doleva a naopak. Při definici můžeme zadat tyto hodnoty:

• ltr (výchozí) - Směr textu zleva doprava.
• rtl - Směr textu zprava doleva.
• inherit - Směr textu se zdědí od rodičovského elementu.

Nyní změníme směr textu u našeho elementu s třídou font1:

.font1 {
   font-family: "PrvniFont";
   direction: rtl;
}

Pořadí slov ve větě se nijak nezmění, pouze text se zarovná na pravou stranu a tečka je dána před větou. Nejčastěji tuto vlastnost využívá arabština.

font-size-adjust

Pomocí vlastnosti font-size-adjust nastavujeme velikost písma. Pokud je nedostupný náš nastavený font, dává tato vlastnost větší kontrolu nad nastavením stejné velikosti rozdílných rodin písma. Použití bylo především u textů, které byly psány malým písmem, kvůli čitelnosti. Tuto vlastnost dnes již podporuje pouze prohlížeč Mozilla Firefox, a nemá širší reálné využití.

Jako hodnoty se nastavuje:

• none (výchozí) - Vlastnost font-size-adjust se nepoužívá.
• číslo - Hodnota poměru k použití.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
• inherit - Hodnota se zdědí z rodičovského elementu.

Při použití nějaké číselné hodnoty se potom velikost malých písmen ve větě počítá ze zadané velikosti fontu, a hodnoty, která ji upravuje (20 x 0.5 = 10px):

.font1 {
   font-family: "PrvniFont";
   font-size: 20px;
   font-size-adjust: 0.5;
}

font-stretch

Pomocí CSS3 vlastnosti font-stretch nastavujeme zda budou písmena v textu užší nebo širší. Tuto vlastnost musí podporovat jak prohlížeč, tak vybraný font! Dnes se již bohužel také v podstatě nikde nepoužívá. Pokud chceme na stránkách užší, nebo širší písmo, nejjednodušší je podle potřeby zvolit vhodný font. Dále je možné tyto parametry uměle změnit pomocí funkce scale(). Pro zajímavost, hodnoty, které vlastnost používá a její zápis:

• ultra-condensed - Udělá text co nejužší.
• extra-condensed - Udělá text užší než hodnota condensed ale méně jak ultra-condensed.
• condensed - Udělá text užší než hodnota semi-condensed ale méně jak extra-condensed.
• semi-condensed - Udělá text jenom trochu úzký.
• normal (výchozí) - Vykreslí text normálně.
• semi-expanded - Udělá text jenom trochu široký.
• expanded - Udělá text širší než hodnota semi-expended ale méně jak extra-expanded.
• extra-expanded - Udělá text širší než hodnota expanded ale méně jak ultra-expanded.
• ultra-expanded - Udělá text co nejširším.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na normal).
• inherit - Hodnota se zdědí z rodičovského elementu.

Později se všechny hodnoty daly jednoduše přepočítávat a definovat pomocí procent.

.font1 {
   font-family: "PrvniFont";
   font-stretch: 50%;
}

font-variant

Pomocí CSS3 vlastnosti font-variant nastavujeme variantu písma v HTML elementu. Vlastnost se používá pro nastavení kapitálek a dědí se. Text kapitálkami je napsán celý velkými písmeny, kde velká písmena z původního textu mají normální velikost a malá o něco menší.

• normal (výchozí) - Normální písmo.
• small-caps - Kapitálky.
• inherit - Zdědíme vlastnost font-variant od rodičovského elementu.

Ukážeme si to na našem příkladu:

.font1 {
   font-family: "PrvniFont";
   font-variant: small-caps;
}

Při pokročilejším použití se pomocí této vlastnosti dají specifikovat i podrobnější vzhledy, stále je ale výhodnější používat font, který už ze základu vypadá podle našich představ. Více o této vlastnosti si můžete přečíst například zde.

hanging-punctuation

Poslední vlastnost, kterou zde zmíníme, je vlastnost hanging-punctuation. Tou nastavujeme jak bude umístěné interpunkční znaménko. To znamená, že při použití se například uvozovky před, nebo za větou daly posouvat. Tuto vlastnost podporuje pouze prohlížeč Safari, a to jen v některých verzích. V praxi se tedy s touto vlastností také nesetkáme. Hodnoty které lze této funkci nastavit:

• none (výchozí) - Interpunkční znaménko může být umístěno kdekoliv v elementu (podle textu).
• first - Znaménko může být mimo začátek prvního řádku.
• end - Znaménko může být mimo konec posledního řádku.
• allow-end - Interpunkční znaménko je vždy mimo element.
• force-end - Interpunkční znaménko je mimo element, pokud je nedostatek místa na řádku.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
• inherit - Hodnota se zdědí z rodičovského elementu.

Chcete-li si o této vlastnosti přečíst více, můžete zde .

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 následujícím kvízu, Kvíz - Text a písmo v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

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