Sleva na školení Naučit se HTML & CSS, JS a Bootstrap
Získej 500 Kč na naše školení. Více zde
Probíhá výprodej HTML & CSS, JavaScript a Bootstrap

Flexibilní text

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V dnešním prvním díle série Flexibilní WebDesign si ukážeme tvorbu flexibilního textu. Tento díl je relativně dlouhý,jelikož to probírám hodně podrobně.

Beze slov se vrhneme do toho!

Velikost textu deklarovaná pomocí klíčových slov a procent umožňuje uživateli kontrolu nad textem a jeho maximální flexibilitu.

Jen málo z témat webového designu je tak probírané a kontroverzní jako právě určení velikosti písma na webu. Z historického hlediska toto téma mátlo začátečníky, bylo nabité argumenty na obou stránkách a rozdělovalo národy. Možná tuto problematiku trochu zveličujeme, ale pro mnoho tvůrců webu jde v mnoha ohledech o nerozhodný předmět debaty.

Ačkoli nejsem v pozici, ze které bych mohl zbavit svět války o definování velikosti písma, v tomto článku se s vámi podělím o jednoduchou strategii definování velikosti písma na webu, která je flexibilní, tak jednoduše realizovaná, a taktéž umožňuje udržovat nad designem stránek maximálně možnou kontrolu.

Přínos flexibility pro definování velikosti písma je jedním z klíčových bodů, které prostupuje příklady ve článcích, tím, že dáte uživateli možnost kontrolovat velikost písma na stránce, zvyšuje její přístupnost v ohledu čtení pro všechny skupiny uživatelů Internetu. Skutečnou výzvou leží v umožnění takové flexibility při zachování duchaplnosti a zajímavého designu. Na konci této série budete na dobré cestě, abyste dosáhli kýženého cíle, navíc se solidní znalostí příkladů,kterými vás provedu.

Abyste pochopily,jak nejlépe definovat flexibilní velikost písma,podívejme se nejdřív na běžný příklad toho,co není flexibilní.

Běžný přístup

K ilustraci běžných metod definice velikosti písma se podívejte na stránky EyeGlasses.com -Jistěže by návštěvníci se slabším zrakem profitovali z toho, kdyby byla zvýšená čitelnost stránek a kontrola ze strany uživatelů webu.

Tvůrci webu EyeGlasses.com vylepšily stránky o kaskádové styly pro všechny detaily designu, jaké má množství webů s hezkým designem. Web používá vlastnosti Font-Size u elementu k deklaraci základní velikosti písma pro celou stránku. Použitými jednotkami jsou obrázkové body (pixely):
body {
  font-size: 11px;
}
Nastavením velikosti (v tomto případě 11px) pro text u elementu designéři zajišťují, aby se text na celé stránce( i když je toto nastavení přepsáno následným pravidlem) zobrazil o velikosti 11px. Výhodou použití pixelů pro deklaraci velikosit písma je,že snáze dosáhnete,aby byl text vždy stejně velký,a to bez ohledu na použitý prohlížeč nebo zařízení čtoucí text. To díky shodné, předpověditelné velikosti, která se stala použitím pixelů jako jednotek velmi populární při výběru strategie pro deklaraci velikosti textu. Kdo touží po preciznosti, kterou nabízí použití pixelů nad velikostí písmen zobrazujících se na webové stránce, volí pixely, i když se nám nabízí jiné možnosti. Zde je však jeden malý problém

Proč to není nezničitelné?

Deklarace velikosti písma pomocí pixelů dává designérům do ruky kontrolu nad velikostí písma, ale pro mnohé uživatele nejpopulárněj­ší(před pár lety byl) Internet Explorer (IE/Win) to znamená problém.

Prohlížeč typicky poskytuje uživateli možnost kontrolovat velikosti textu na stránce, a to přepsáním nastavené velikosti písma, kterou deklaruje tvůrce webu. Tohle je výborný a velmi používaný přístup zvláště pro někoho, kdo hůře vidí. Ke zvýšení čitelnosti si tak může uživatel se slabým zrakem zvolit příslušné nabídky v prohlížeči.

Jaké jsou naše možnosti?

Kromě pixelů nabízí CSS mnoho způsobů, jak měnit velikosti písma. Takže se nejdříve podívejme na to, jaké možnosti se nám nabízejí.

Možné hodnoty vlastností Font-Size v CSS lze rozdělit do tří skupin:

  • jednotky délky
  • klíčová slova relativní velikosti
  • procenta

Jednotky délky

Jednotky délky mohou být buď relativní nebo absolutní. Následující výčet uvádí relativní jednotky délky:

  • em - relativní velikost k velikosti písma nadřazeného elementu.
  • ex - relativní velikost k výšce písmene x specifického typu písma.
  • px - relativní velikosti k rozlišení použitého specifického zařízení(např. obrazovky)Jde o nejběžněji používanou jednotku

Absolutní jednotky délky jsou v první řadě použitelné pro tisk nebo když jsou známy fyzické rozměry a vlastnosti prohlížeče a/nebo použitého zobrazovacího zařízení:

  • in - palce,
  • cm - centimetry,
  • mm - milimetry,
  • pt - body,
  • pc - pika.

Klíčová slova relativní velikosti

Pouze dvě hodnoty je možné si vybrat při použití klíčových slov relativní velikosti:

  • larger,
  • smaller.

Tyto hodnoty jsou relativní k aktuální velikosti nastavené u nadřazeného elementu. World Wide Web Consortium (W3C), organizace stanovující webové standarty, to vysvětluje tak, že když přiřadíme nadřazenému elementu vlastnost Font-Size s hodnotou medium, použitím klíčového slova larger zvětšíme velikost písma nadřazeného elementu na hodnotu large.

Procenta

Použitím procent přiřadíme velikost,která je relativní k velikosti nastavené u obsahového elementu (nadřazeném).Spe­cifikováním nastavení 120% přidáme 20% k jakékoliv jednotce, jež byla specifikována dříve (pokud byla). Procenta popisujeme (v jejich kombinaci s klíčovými slovy) jako součást našeho přístupu k nezničitelnému webovému designu,jehož popis bude následovat.

Příště se podíváme na klíčová slova absolutní velikosti,jak se dostat k nezničitelnosti,jak fungují klíčová slova.


 

 

Článek pro vás napsal jakub
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje programování v HTML,CSS a nově i v jazyce LabView
Předchozí článek
Návrh webu v programu GIMP
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Otáčecí carousel s 3D efektem v čistém CSS
Aktivity (1)

 

 

Komentáře

Avatar
Michal Žůrek - misaz:24.3.2013 21:18

Já jsem se těšil že se dozvím, která velikost se na co hodí...

No nic, snad to bude příště lepší.

 
Odpovědět  +1 24.3.2013 21:18
Avatar
jakub
Redaktor
Avatar
jakub:25.3.2013 22:13

děkuju za radu,v příštím díle to určitě zmíním :-)

Odpovědět 25.3.2013 22:13
Uvnitř jsou všichni stejní...
Avatar
michalsip
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
michalsip:30.3.2013 10:17

Kdyby Jakub opsal celou kapitolu té knihy "Flexibilní webdesign" tak se určitě dozvíš na co jaká velikost je. Jakube pochybuju o tom, že máš výslovný souhlas vydavatele ke kopírování textů z jeho knihy.

Odpovědět 30.3.2013 10:17
Učíme se každý den, proto nasávejme vědomosti jak to jen jde a proměňujme je ve znalosti.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na jakub
David Čápka:12.6.2013 18:13

Ocenili bychom tvé vyjádření k příspěvku od michalsip.

Odpovědět 12.6.2013 18:13
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
vojtanosek
Člen
Avatar
vojtanosek:24.6.2015 16:32

Aspoň vím tu jednotku délky "ex" :D .

 
Odpovědět 24.6.2015 16:32
Avatar
Odpovídá na michalsip
Niesomtu Hraskova:28. dubna 18:16

Ja síce neviem kolko z danej knihy (kedze tu som zatial necitala) je v tomto clanku skopirovane - teda to by malo znamenat asi od slova do slova skopirovany text podla mna teda..Preto ze tento pomer nepozném si nemozem dovolit zastat sa autora tohoto tu publikovaneho clanku. Co by som ale chcela povedat je taka moja dedukcia...Mali by sme si uvedomit a to hlavne v literature IT ze fakty su a ostavaju faktami ktore uz len preto ze su to fakty by nemali podliehat autorskym pravam, Vo vyssie napisanom clanku ja osobne nevidim ani moc priestoru pre originalitu ci freestyle. odhliadnuc od toho, ze uz na nete existuje takmer kazde slovo vo vsetkych moznych vetnych spojeniach a variantach teda nutne kazda jedna nasledujuca veta je kopirovanie.... Kníh je vela (s touto tematikou). V knihkupectve sa ale tazko zhanaju. Ked som sa zacinala sama ucit programovat a kupovala som si svoje prve knihy ktore som nasla nahodou v knihkupectve tesila som sa jak male decko kym dojdem domov a dozviem sa z knihy vsetko to co mi v hlave viselo jak priepast k vedomostiam k danemu jazyku ci frameworku..O to vacsie bolo moje sklamanie ked som dosla na to ze kniha je uz viac ako z polovice TOTALNE neaktualna..za tu knizku som si samozrejme zaplatila nie malo penazi..A kupila som si ju v NAJVACSOM knihkupectve (retazci) u nas a u vas v cz..Vsetko sa velmi rychlo mení preto si myslim ze mimo originalnych opisnych textov ci napadov je prinosom KOPIROVAT FAKTY a neustale sa s nimi delit s co najviac ludmi ktori sa zobudili zo sna v kt. doteraz zili ze technologie neovplyvnuju nas zivot a nasu buducnost a ze staci byt len "uzivatelom", nasli si cas a snazia sa vzdelavat v tomto smere..A byt dana kniha mojim dielom s autorskymi pravami tak by som pod tento clanok do komentaru iba pridala odkaz k zakupeniu knihy a oslovila autora s tym ze mu dakujem za sirenie mojho mena s pripomenutim aby ho v textoch vyrazne spominal pripadne by som mozno napisala tuto a tuto kapitolu ti publikovat zakazujem lebo nespada pod fakty ale je to moj napad..

Odpovědět 28. dubna 18:16
Víte, jaké adresy jsou nejvíce zadávány v prohlížeči MS Internet Explorer? https://www.mozilla.com/firefox/ https://w...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.