Flexibilné text

V dnešnom prvom diele série Flexibilné WebDesign si ukážeme tvorbu flexibilného textu. Tento diel je relatívne dlhý, pretože to preberám veľa podrobne.

Bez slov sa vrhneme do toho!

Veľkosť textu deklarovaná pomocou kľúčových slov a percent umožňuje užívateľovi kontrolu nad textom a jeho maximálnu flexibilitu.

Len málo z tém webového dizajnu je tak preberanej a kontroverzný ako práve určenie veľkosti písma na webe. Z historického hľadiska túto tému miatlo začiatočníkov, bolo nabité argumenty na oboch stránkach a rozdeľovalo národmi. Možno túto problematiku trochu zveličuje, ale pre mnoho tvorcov webu ide v mnohých ohľadoch o nerozhodný predmet debaty.

Hoci nie som v pozícii, z ktorej by som mohol zbaviť svet vojny o definovanie veľkosti písma, v tomto článku sa s vami podelím o jednoduchú stratégiu definovanie veľkosti písma na webe, ktorá je flexibilná, tak jednoducho realizovaná, a taktiež umožňuje udržiavať nad dizajnom stránok maximálne možnú kontrolu.

Prínos flexibility pre definovanie veľkosti písma je jedným z kľúčových bodov, ktoré prestupuje príklady vo článkoch, tým, že dáte používateľovi možnosť kontrolovať veľkosť písma na stránke, zvyšuje jej prístupnosť v smere čítania pre všetky skupiny užívateľov Internetu. Skutočnou výzvou leží v umožnenie takejto flexibility pri zachovaní duchaplnosti a zaujímavého dizajnu. Na konci tejto série budete na dobrej ceste, aby ste dosiahli vytúžený cieľ, navyše sa solídne znalosťou príkladov, ktorými vás urobím.

Aby ste pochopili, ako najlepšie definovať flexibilné veľkosť písma, pozrime sa najprv na bežný príklad toho, čo nie je flexibilné.

Bežný prístup

K ilustráciu bežných metód definície veľkosti písma sa pozrite na stránky EyeGlasses.com -Jistěže by návštevníci sa slabším zrakom profitovali z toho, keby bola zvýšená čitateľnosť stránok a kontrola zo strany užívateľov webu.

Tvorcovia webu EyeGlasses.com vylepšili stránky o kaskádové štýly pre všetky detaily dizajnu, aké má množstvo webov s pekným dizajnom. Web používa vlastnosti Font-Size u elementu

k deklarácii základnej veľkosti písma pre celú stránku. Použitými jednotkami sú obrázkové body (pixely):

body {
  font-size: 11px;
}

Nastavením veľkosti (v tomto prípade 11px) pre text u elementu dizajnéri zaisťujú, aby sa text na celej stránke (aj keď je toto nastavenie prepíše následným pravidlom) zobrazil o veľkosti 11px. Výhodou použitia pixelov pre deklarácii velikosit písma je, že ľahšie dosiahnete, aby bol text vždy rovnako veľký, a to bez ohľadu na použitý prehliadač alebo zariadenia čítajúcu text. To vďaka zhodné, predpovedateľné veľkosti, ktorá sa stala použitím pixelov ako jednotiek veľmi populárny pri výbere stratégie pre deklaráciu veľkosti textu. Kto túži po precíznosti, ktorú ponúka použitie pixelov nad veľkosťou písmen zobrazujúcich sa na webovej stránke, volí pixely, aj keď sa nám ponúka iné možnosti. Tu je však jeden malý problém

Prečo to nie je nezničiteľné?

Deklarácia veľkosti písma pomocou pixelov dáva dizajnérom do ruky kontrolu nad veľkosťou písma, ale pre mnohých používateľov najpopulárnejšie (pred pár rokmi bol) Internet Explorer (IE / Win) to znamená problém.

Prehliadač typicky poskytuje užívateľovi možnosť kontrolovať veľkosti textu na stránke, a to prepísaním nastavenej veľkosti písma, ktorú deklaruje tvorca webu. Toto je výborný a veľmi používaný prístup zvlášť pre niekoho, kto horšie vidí. K zvýšeniu čitateľnosti si tak môže užívateľ so slabým zrakom zvoliť príslušné ponuky v prehliadači.

Aké sú naše možnosti?

Okrem pixelov ponúka CSS mnoho spôsobov, ako meniť veľkosti písma. Takže sa najskôr pozrime na to, aké možnosti sa nám ponúkajú.

Možné hodnoty vlastností Font-Size v CSS možno rozdeliť do troch skupín:

• jednotky dĺžky
• kľúčové slová relatívnej veľkosti
• percentá

Jednotky dĺžky

Jednotky dĺžky môžu byť buď relatívne alebo absolútne. Nasledujúci výpočet uvádza relatívna jednotky dĺžky:

• em - relatívna veľkosť k veľkosti písma nadradeného elementu.
• ex - relatívna veľkosť k výške písmena x špecifického typu písma.
• px - relatívna veľkosti k rozlíšenia použitého špecifického zariadenia (napr. obrazovky) Ide o najbežnejšie používaná jednotku

Absolútna jednotky dĺžky sú v prvom rade použiteľné pre tlač alebo keď sú známe fyzické rozmery a vlastnosti prehliadača a / alebo použitého zobrazovacieho zariadenia:

• in - palce,
• cm - centimetre,
• mm - milimetre,
• pt - body,
• pc - pika.

Kľúčové slová relatívnej veľkosti

Iba dve hodnoty je možné si vybrať pri použití kľúčových slov relatívnej veľkosti:

• larger,
• smaller.

Tieto hodnoty sú relatívne k aktuálnej veľkosti nastavenej u nadradeného elementu. World Wide Web Consortium (W3C), organizácia stanovujúci webové štandarty, to vysvetľuje tak, že keď priradíme nadradenému elementu vlastnosť Font-Size s hodnotou medium, použitím kľúčového slova larger zväčšíme veľkosť písma nadradeného elementu na hodnotu large.

Percentá

Použitím percent priradíme veľkosť, ktorá je relatívna k veľkosti nastavenej u obsahového elementu (nadradenom) .Specifikováním nastavenie 120% pridáme 20% k akejkoľvek jednotke, ktorá bola špecifikovaná skôr (ak bola). Percentá popisujeme (v ich kombinácii s kľúčovými slovami) ako súčasť nášho prístupu k nezničiteľnému webovému dizajnu, ktorého opis bude nasledovať.

Nabudúce sa pozrieme na kľúčové slová absolútnej veľkosti, ako sa dostať k nezničiteľnosti, ako fungujú kľúčové slová.