Flexibilní text

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.