CSS řešení: Elastická typografie počítaná v procentech z výšky komponenty

Pojďme si rozebrat jedno z řešení, které jsem ukazoval v přednášce na WebExpo 2016.

Typografické hlavičky se na webu dělají docela často. Jenže když chcete, aby na různě velkých displejích vypadaly hezky, musíte pro jednotlivé breakpointy dělat ruční zásahy pomocí Media Queries:

Responzivní typografie

Shodou okolností jem před čtyřmi lety na WebExpu mluvil o téměř vektorovém webu. Tam jsem se u některých komponent snažil dosáhnout pružnosti, kterou známe z PDF. Tehdy jsem ale ještě neznal jednotky viewportu.

Téměř elastická typografie pomocí vw

Nejčastěji se pro elastickou typografii používají právě nové jednotky viewportu: vw, vh, vmin a vmax. Nejzajímavější je „volkswagen“ – vw.

.box__heading { 
  font-size: 7vw; /* 7 % šířky okna */
}

Téměř elastická typografie pomocí vw

Jenže nastavení typografie a tedy svislého rozměru v procentech ze šířky okna, tedy vodorovného rozměru, samo o sobě nestačí. Nezohledňuje totiž vnitřní ani vnější okraje. Text se tedy v určitých velikostech okna zalomí. Podívejte se na demo: cdpn.io/e/bZzmGg.

Elastická typografie v procentech z výšky komponenty

Způsobů jak elastickou typografii vytvořit je více. Já jsem nedávno přemýšlel nad variantou nastavení svislých rozměrů v procentech z výšky okna:

.box__heading { 
  font-size: 10bh; /* 10 % z výšky boxu  */
}

Jenže nic jako 10bh v CSS nemáme, že? Můžeme to ale spočítat, pokud známe poměr stran komponenty. Ten je v našem případě 16:9. Výšku pak vypočteme ze šířky a poměru stran:

((šířka okna) - (vodorovný padding)) / 16 * 9)

Jedno procento výšky okna tedy vypočteme:

((šířka okna) - (vodorovný padding)) / 16 * 9 / 100)

V CSS pak využijeme funkci calc() a zápis pak vypadá takto:

calc( (100vw - 2em) / 16 * 9 / 100 )

Elastická typografie - výpočet

Těch deset procent z výšky komponenty pak zapíšeme takto:

.box__heading { 
  font-size: calc( 10 * ( (100vw - 2em) / 100 / 16 * 9 ) );
}

V preprocesoru bychom to pak moli napsat elegantněji. Používám SCSS:

$boxHeightPercent: "( (100vw - 2em) / 100 / 16 * 9 )";

.box__heading { 
  font-size: calc( 10 * #{$boxHeightPercent} );
}

Hotovo. Tohle řešení funguje ve všech prohlížečích, které podporují jednotky vw – tedy všech moderních.

Je dobré ještě pomyslet na náhradní řešení v IE verze 9 a starších:

.box__heading { 
  font-size: 2em;
  font-size: calc( 10 * #{$boxHeightPercent} );
}

Výsledek pak v různých zařízeních vypadá takto:

Elastická typografie v různých prohlížečích

Samozřejmě. Měli bychom pak ale ještě myslet na nějaká minima a případně i maxima. Znovu tady pro zájemce odkážu na článek na Smashing Magazine.

Živé demo i s fallbackem je tady: cdpn.io/e/bZzmGg.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Responzivní design, CSS.

Element Queries: proč je chceme a proč je jen tak nedostaneme

6. 3. 2017 v příručce

Element Queries (nebo Container Queries) jsou vlastně stejné typy dotazů jako Media Queries. Jen se neptáte na parametry okna prohlížeče, ale na parametry samotného elementu.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Veřejná školení

Bootstrap pro pokročilé

Bootstrap pro pokročilé

Využijte naplno nejpopulárnější framework pro tvorbu uživatelských rozhraní bez hlubokých znalostí CSS. Příští termín: 20. dubna.

11. května Principy Javascriptu
26. září Dnešní webová kodéřina
5. října Optimalizace rychlosti načítání
19. října SVG

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč