Fonty - praxe, obecné rodiny

Transkript

1 Fonty - praxe, obecné rodiny Windows, fonty, internet? Většina profesionálních webových tvůrců operuje nejvýše s těmito základními řezy: Arial, Courier New, Georgia, Lucida Console, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS a Verdana. Mnohé z uvedených řezů se vyskytují i na zbývajících dvou hlavních platformách (Mac a Linux), ty však mají i další specifická písma. Platí, že po definici řezu pro Windows by měla následovat definice pro Mac OS následována Linuxem a zakončena definicí obecné rodiny písem. Následující tabulka představuje všechny obecné rodiny písma.

2 Fonty - řezy, definice Definice řezu písma v CSS Definovat kvalitně font v dnešní době znamená operovat s CSS. Pokud jste se prokousali až sem, předpokládám, že si s kaskádovými styly alespoň trochu rozumíte. K definici řezu písma (jinak též rodiny fontů) slouží v CSS vlastnost font-family. Malá ukázka: p { font-family: Tahoma, sans-serif; } Takový zápis v definici CSS způsobí, že každý odstavec v dokumentu bude vysázen Tahomou. Pakliže se taková rodina fontů v systému nevyskytuje, použije se bezpatkový zástupce obecné rodiny písem. Na předchozím snímku byly vyjmenovány používané rodiny písem pro Windows. Teď nastal čas se na ně podívat blížeji a rozebrat si jejich definici.

3 Arial Arial je na většině systémů základním bezpatkovým písmem. Poskytuje dobrou čitelnost i přes poměrně úzké litery. Na internetu se ho používá hojně, ačkoliv v posledních pár letech lze pozorovat pozvolný trend používání sofistikovanějších a čitelnějších písem. Vzhledem k faktu, že se povětšinou jedná o základní bezpatkové písmo, není třeba ho definovat jeho názvem. Mnohem lépe poslouží definice obecné rodiny bezpatkových písem..p { font-family: sans-serif; } Font Arial/48pt

4 Courier (New) Courier/Courier New je základním neproporcionálním písmem. Jedná se o tradiční, dobou ověřený, skvěle čitelný a excelentně zpracovaný řez. Této mé lavině superlativů nahrává fakt, že na rozdíl např. od Arialu, který časem začal nedostačovat, se Courier neokoukal a stále se hojně používá (a používat bude) pro sazbu neproporciálního textu. Stejně jako v případě Arialu není třeba definovat Courier přímo jeho jménem. Stačí obecná rodina neproporcionálních písem..p { font-family: monospace; } Font Courier/48pt

5 Georgia Georgia je pokročilejším patkovým řezem. Je to elegantní písmo, které však již začíná zavánět typografickým kýčem. Využití nalezne nejčastěji v nadpisech, tedy ve větších velikostech písma. Geogria se v systému Windows poprvé objevila ve verzi 2000, je tedy dosti pravděpodobné, že mnoho uživatelů ji nemá ve svém systému nainstalovánu. V tom případě musíme jistit vykreslení patkovým písmem alespoň obecnou rodinou fontů. Na Mac OS se sice Geogria občas vyskytuje, ale je výhodné použít tamější podobně zpracované písmo New York CE. Pro linux je zase charakteristický font utopia..p { font-family: Georgia, "New York CE", utopia, serif; } Font Georgia/48pt Na výše uvedené definici si všimněte dvou detailů. Prvním z nich je přítomnost uvozovek kolem řezu New York CE. Tyto jsou v zápisu zcela nezbytné v tom případě, je-li název řezu tvořen několika slovy oddělenými mezerami. Druhým detailem je ono CE, které znamená Cental Europe.

6 Lucida Console Lucida Console je na pohled příjemné bezpatkové neproporcionální písmo. V praxi pak spíše opomíjené, neboť jeho místo stále sveřepě okupuje patkový Courier. Definice Lucidy musí být vždy jištěna obecnou rodinou neproporcionálních písem. V prostředí Mac OS spíše nalezneme font Monaco CE, v linuxu zase font fixed..p { font-family: "Lucida Console", "Monaco CE", fixed, monospace; } Font Lucida Console/48pt

7 Palatino Linotype Pro Palatino Linotype platí to stejné, co pro Georgii. Osobně preferuji spíše konzistentnější font Georgia..p { font-family: "Palatino Linotype", "New York CE", utopia, serif; } Font Palatino Linotype/48pt

8 Tahoma Tahoma je alternativním bezpatkovým řezem. Časem se bezpečně vypracovala mezi nejpoužívanější fonty na internetu. Ideální poměr výšky ku šířce jedné litery a rozumné mezery mezi jednotlivými znaky z ní dělají elegantní písmo, které je dobře čitelné i při malých velikostech. Mac OS Tahomu často zná, přesto je dobré pro jistotu definovat i podobné písmo Lucida Grande CE, pro linux pak existuje lucida..p { font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif; } Font Tahoma/48pt

9 Times New Roman / Times Times je základní rodinou patkových písem. Postupem času se tento řez dost okoukal a dá se řící, že uplatnění nalezne spíše v tištěné sazbě. Pro jeho definici platí to stejné co pro Arial a Courier. Je základním patkovým písmem na většině systémů..p { font-family: serif; } Font Times New Roman/48pt

10 Trebuchet MS Trebuchet MS je hladké, na pohled příjemné bezpatkové písmo, které je však na webu často alternováno výše zmíněnou Tahomou. Na Mac OS použijeme podobný řez Geneva CE, pro linux pak zůstaneme u lucidy..p { font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; } Font Trebuchet MS/48pt

11 Verdana Verdana je na webu velmi využívaným bezpatkovým písmem. Širší znaky umožňují snazší čtení na obrazovce monitoru. Dříve opomíjené, dnes už evokující klišé, toto písmo si stále drží svoji pozici toho druhého vedle Arialu. Verdana se před pár lety hodně rozšířila na všechny možné systémy, přesto je nezbytné definovat alternativy. Pro Mac OS Genevu, pro linux opět lucidu..p { font-family: Verdana, "Geneva CE", lucida, sans-serif; } Font Verdana/48pt

12 Fonty - sumář, časté chyby Stručný sumář Alfou a omegou internetové typografie jsou řezy Arial (či Helvetica), Courier a Times, které se vyskytují snad na všech platformách, mnohdy jako základní fonty. Jejich nadužíváním však nevyhnutelně došlo k tomu, že zejména Arial a Times působí dosti fádně. Z tohoto důvodu přichází ke slovu alternativní, elegantnější rodiny písem. Zde je malý přehled řezů a jejich definicí. Řez Definice Arial Courier Georgia Lucida Console Palatino Linotype Tahoma Times Trebuchet MS Verdana font-family: sans-serif; font-family: monospace; font-family: Georgia, "New York CE", utopia, sans-serif; font-family: "Lucida Console", "Monaco CE", fixed, monospace; font-family: "Palatino Linotype", "New York CE", utopia, serif; font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif; font-family: serif; font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; font-family: Verdana, "Geneva CE", lucida, sans-serif;

13 Nejčastější chyby Neúplná definice řezu písma Nadužívání různých řezů Používání netradičních fontů Chybějící uvozovky Neúplná definice řezu písma Prohlédněte si následující zápis: p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida; } Zdá se Vám zcela v pořádku? Neměl by. Tváří se sice poměrně nevinně, pro každý odstavec v dokumentu bude použit řez Trebuchet MS, není-li v systému přítomen, alternuje Tahoma, pro Mac OS definici jistíme Genevou a linux si přijde na své s lucidou. Chybí však to úplně nejpodstatnější obecná rodina fontů. Pamatujte si, že můžete klidně zapomenout na uživatele libovolného operačního systému, můžete je i cíleně ignorovat, ale nikdy si nemůžete odpustit zápis generické (obecné) rodiny toho kterého fontu. Správný zápis je tedy: p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida, sans-serif; }

14 Nadužívání různých řezů Podívejte se na toto: p { font-family: sans-serif; } span { font-family: "Palatino Linotype", serif; } h2 { font-family: monospace; } li { font-family: Georgia, serif; } Tato definice je technicky veskrze správná, porušuje však jedno z nejdůležitějších typografických pravidel. Míchá v jednom dokumentu čtyři různé řezy písma. To je hrubá chyba. Více různých řezů v jednom dokumentu totiž: unavuje oči spolehlivě zničí veškerý estetický prožitek člověka mate, protože se jedná o další, avšak zcela zavádějící, orientační soustavu na stránce donutí opustit Vaši stránku kohokoliv, kdo jen trochu přičichl k webdesignu Obecně se uvádí, že ideální počet písem na jednu stránku jsou dvě. Obvykle pak jeden typ pro nadpisy, druhý pro samotný text. Z vlastní zkušenosti vím, že je-li text správně strukturován, není problém do stránky začlenit tři různé řezy. Platí to však pouze na robustnějších webech s precizním layoutem, vyžaduje to dost šikovnosti a citu pro detail.

15 Používání netradičních fontů Kód mluví sám za sebe: font-family: Keypunch, sans-serif; Rodina fontů Keypunch opravdu existuje, ale přesto je naivní si myslet, že ji bude mít rozumné procento uživatelů ve svém systému přítomnu. Operujte jen s takovými řezy, u kterých máte jistotu, že se vykreslí správně. Existují sice metody, kterak ponouknout uživatelův prohlížeč ke stažení žádaného fontu, ale ty se v praxi používají zcela minimálně. Namísto nich raději weboví tvůrci sáhnout k náhradě takového textu obrázkem, chtějí-li mermomocí daný font použít. Chybějící uvozovky Ano, chybějící uvozovky jsou opravdu kapitola sama pro sebe. Nebudu se Vám snažit namluvit, že to bez nich nefunguje. Funguje. Je to ale, pregnantně řečeno, pěkná prasárna. Takže vždycky pišme kód takhle: p { font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; }

16 Typografie a kaskádové styly (CSS) CSS? Jak? CSS (kaskádové styly), a to už ve své první verzi, nabízejí široké možnosti definice konkrétního fontu. Ve stručnosti: font-family - rodina fontů font-style - sklon písma font-variant kapitálky font-weight - tloušťka (duktus) písma font-size - velikost (stupeň) písma Další pokročilé CSS vlastnosti (font-size-adjust, font-stretch) a direktivy (@font-face) pak záměrně opomíjím, v praxi se využívají minimálně.

17 font-family O této vlastnosti pojednávala celá minulá kapitola, proto jen v maximální stručnosti. Vlastnost font-family definuje množinu fontů, kterými může být text vykreslen. Nejvyšší prioritu pak má řez uvedený jako první, není-li v systému přítomen, použije se druhý, třetí Je dobrým zvykem uzavírat seznam řezů obecnou rodinou fontů. Nevyhovuje-li žádný font našemu zadání, použije se výchozí font daného systému. font-style Vlastnost font-style nastavuje sklon písma. Může nabývat tří hodnot - normal (výchozí), italic a oblique. Hodnota normal znamená, že písmo bude vykresleno bez sklonu, resp. se svým přirozeným sklonem. Italic vykreslí písmo kursivou, není-li verze s kursivou k dispozici, pokusí se vykreslit písmo s umělým sklonem. Oblique vykreslí daným řezem uměle skloněný text. Např..priklad1 { font-family: sans-serif; font-style: normal; }.priklad2 { font-family: sans-serif; font-style: italic; }.priklad3 { font-family: sans-serif; font-style: oblique; }

18 font-variant Font-variant může nabývat dvou hodnot: normal a small-caps. V případě druhé hodnoty vykreslí text tzv. kapitálkami, což jsou snížené verzálky (nižší velká písmena). Například:.priklad1 { font-family: sans-serif; font-variant: small-caps; } font-weight Vlastnost font-weight je první, která začne dělat neplechu. Jejími hodnotami jsou normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 a 900. Zádrhel je v tom, že prohlížeč v drtivé většině případů dokáže vykreslit pouze dva stupně - písmo normální a tučné. Násobky sta označují tučnost fontu, 100 je tedy nejtenčí a 900 nejtučnější, avšak v praxi se tohoto zápisu většinou nepoužívá, neboť je závislý na daném typeface, nikoliv na prohlížeči. Hodnotu bolder pak většina prohlížečů vezme rovnu hodnotě bold a lighter raději nijak nerealizuje. Tyto relativní hodnoty (bolder a lighter) jsou také závislé na dodaném typeface..priklad1 { font-family: Arial, sans-serif; font-weight: bold; }.priklad1 span { font-weight: lighter; }.priklad2 { font-family: Arial, sans-serif; font-weight: normal; }.priklad2 span { font-weight: bolder; }

19 font-size Mezi absolutní hodnoty řadíme xx-small, x-small, small, medium, x-large a xx-large. A už zde vzniká první rozpor takto definovaná velikost bude v Mozille (či přesněji řečeno v prohlížečích založených na jádru Gecko) o jeden stupeň menší než v Internet Exploreru, který běží v quirk módu. Například velikost small odpovídá v Internet Exploreru 16px písmu, zatímco v Mozille pouze 13px. Není to chyba, je to jen použití rozdílných převodních tabulek. Pakliže se chcete vyhnout odlišnému vykreslení, používejte validní DOCTYPE, které bude na první řádce dokumentu či pro deklaraci použijte nějakého CSS hacku, který zajistí, že pro Mozillu bude definována velikost o stupeň větší. Například tedy: body { font-size: small; } html > body { font-size: medium; } Druhý řádek vidí pouze, neubráním se pojmu pokročilejší, prohlížeče. Pravá špičatá závorka je totiž selektorem přímého potomka, kterýžto zápis však IE nezná a tudiž jej ignoruje. Relativní hodnoty jsou dvě: smaller a larger. Je-li například definována velikost small, tak po použití larger bude nová hodnota medium. Nejsnáze si ukážeme na příkladu: p { font-size: medium; } span { font-size: smaller; }

20 Třetí možností je použít jednotky px, pt, em, ex, mm, cm, pc či in. Pixel (px) je jeden obrazový bod, typografický bod (pt) je 1/72 palce, jinak též platí přibližná rovnost 3pt = 4px, čtverčík (em) je definován jako šířka velkého písmene M, ex je výška malého písmene x, milimetry a centimetry určitě znáte, cicero, neboli pica (pc) je rovno dvanácti typografickým bodům (tedy přibližně šestnácti pixelům) a konečně palec je roven 2,54cm (při rozlišení 96dpi je samozřejmě roven i 96px). Taková přehršel jednotek je pro běžné užití k ničemu. Často se používají pixely a čtverčíky, zřídka pak typografické body, ostatní jednotky živoří či mají význam ve stylování dokumentů pro alternativní média jiná než obrazovka..p1 { font-size: 12px; }.p2 { font-size: 1em; }.p3 { font-size: 0.2in; }.p4 { font-size: 0.5cm; }.p5 { font-size: 8pt; } Písmo, jehož velikost je definována v pixelech, nelze v Internet Exploreru zvětšit. Toho se často využívá pro konstrukci prvků, vyžadujících fixní výšku textu. Obecně ale platí, že layout libovolné stránky by měl bez potíží unést zvětšení textu alespoň na 200% jeho původní velikosti. Využití jednotky pixel je v tomto případě přinejmenším spekulativní, nehledě na fakt, že alternativní prohlížeče si servítky neberou a takový text bez potíží (a správně) zvětší. Čtverčíky se příliš nehodí pro definici velikosti písma (při změně velikosti příliš skáčou ), ale mnohem spíše například pro odsazení textu od okraje stránky. Takové odsazení pak bude vždy přímo uměrné velikosti použitého písma. Poslední možností je použití procent. Velikost fontu se pak počítá z velikosti rodičovského prvku. Má-li tedy prvek velikost písma 20px, pak vnořený prvek s velikostí 110% bude odpovídat 22px. Procenta se nejvíce hodí všude tam, kde je třeba zachovat možnost změny velikosti textu a přitom mít jistotu, že rozdíly mezi jednotlivými stupni nebudou propastné jako v případě čtverčíků. Pro jednodušší projekty však postačí absolutní hodnoty zmiňované výše.

21 Sazba Zarovnat! Pro zarovnání souvislého textu v HTML platí jiná pravidla než pro tutéž činnost v oblasti DTP. Není totiž možné určit, jak široký bude jeden řádek a navíc, prohlížeč neumí automaticky dělit jednotlivá slova. Z toho vyplývá, že při zarovnání textu do bloku nelze ovlivnit šíři mezislovních mezer a tudíž nelze zabránit vzniku tzv. řek. Řeky jsou nepřiměřeně velké mezislovní mezery, které na sebe v horším případě ještě ve vertikálním směru navazují a tím znesnadňují plynulé čtení textu. V textu tak vznikají bílá místa, která odvádějí čtenářovu pozornost ve vertikální ose a může se tedy snadno stát, že se člověk překoukne a pokračuje ve čtení řádku nad či pod právě čteným. V CSS máme vlastnost text-align, která řídí zarovnání textu. Může nabývat čtyř hodnot: left, right, center a justify. Zápis text-align: left text-align: right text-align: center text-align: justify Význam Zarovnání vlevo Zarovnání vpravo Zarovnání na střed Zarovnání do bloku Text tedy zarovnáváme výhradně vlevo. Zarovnání do bloku může být estetičtější, ale praxe ukázala, že v tomto případě musí oko estétovo zaplakat. Text je ke čtení, nikoliv k pozorování.

22 Odsadit! Odsazení prvního řádku odstavce je určitě ta nejopomíjenější věc na webu. Můj názor je takový, že každý tag <p> by měl mít definované odsazení. Pakliže se autor zdráhá označit text za odstavec, nechť ho obalí třebas tagem <div>. V CSS k tomu slouží vlastnost text-indent, která přijímá jako hodnotu libovolnou délkovou jednotku. Například zde, na TYPOWEBu, mám definováno: #text p { text-indent: 3em; } Takový kód zajistí, že začátek každého odstavce je odsazen o tři čtverčíky, o čemž se můžete snadno přesvědčit. Prostrčit! Prostrkání je další užitečnou a přehlíženou vlastností. V CSS můžete snadno definovat mezery mezi slovy i mezi jednotlivými znaky. Slouží k tomu vlastnosti word-spacing a letter-spacing. Na TYPOWEBu je, ačkoliv se to možná nezdá, kvůli čitelnosti pro každý text definován letter-spacing rovný jednomu pixelu. Odvážné, ale funguje to. p { letter-spacing: 5px; } p { word-spacing: 25px; }

23 Zvýraznit! Ke zvýraznění slouží v HTML čtyři základní tagy. Jedná se o <strong>, <b>, <em> a <i>. Spousta lidí se domnívá, že <strong> a <b> jsou si ekvivalentní stejně jako <i> a <em>. Mají pravdu jen tak napůl. <strong> i <b> převedou obsažený text vždy na tučné písmo, jsou si tedy navzájem synonymy. <em> však značí zvýrazněné (emphasized) písmo, zatímco <i> kursivu (italic). Je jen věcí prohlížečů, že zvýrazněné písmo většinou vypisují kursivou. Stejně tak by ho mohly vypisovat tučně nebo třeba s prostrkáním. Dávejte si tedy při používání těchto dvou tagů dobrý pozor.

24 Dekorovat s rozmyslem! Když se řekne dekorace v CSS, je myšlena vlastnost text-decoration, která může nabývat pěti hodnot: none, underline, overline, line-through a blink. Underline značí podtržení textu. Této hodnoty je třeba užívat s rozmyslem, nejlépe pak výhradně pro odkazy. Overline je nadtržení, nemá valného významu. Line-through je proškrtnutí každé řádky textu vodorovnou čarou. Uplatnění nalezne všude tam, kde chceme v textu provést dodatečné úpravy a přitom chceme poskytnout uživateli možnost vidět minulou verzi textu. Blink má způsobit blikání textu, v praxi doporučuji nepoužívat. Hodnota none pak přirozeně dekoraci vypíná. p { text-decoration: overline; } Ukázka nadtržení. span { text-decoration: line-through; } p { text-decoration: blink; }

25 Entity Entity? Cizí slova vždy budila v lidech nedůvěru. Navíc slovo entita se často váže s adjektivem mimozemská. Máte se ho tedy proto bát? Ne, entita není ničím více než textovou reprezentací určitého znaku. V HTML se používá mnoho roztodivných znaků, které však nelze buď přímo z klávesnice zapsat, nebo je jejich přímý zápis vyhrazen k jiným účelům. Entita se zapisuje ve tvaru &jmeno_entity; důležité je neopomenout středník na konci. Tento obecný tvar Vám možná něco připomíná. Určitě jste se již setkali alespoň s tzv. tvrdou mezerou, jejíž zápis je

26 Tvrdá mizera? Rozlišujeme mezeru klasickou, tvrdou a zúženou. Hned zkraje vyřadíme zúženou mezeru ( ). Ta by měla nalézt uplatnění například v kalendářních datech, telefonních číslech či matematických vzorcích, avšak díky její nepodpoře v Internet Exploreru (ten ji vykresluje asi desetkrát šírší) postrádá využití. Klasická mezera je právě ta dlouhá klávesa ve spodní části Vaší klávesnice. Používá se k oddělení většiny slov. Většina slov pořád nejsou všechna slova. Správně tedy usuzujete, že některá slova, či přesněji řečeno výrazy, se oddělují jinak. Ano, slouží k tomu poslední typ mezery mezera tvrdá ( ). Tvrdá mezera najde uplatnění všude tam, kde je nežádoucí řádkový zlom, což znamená: Mezi iniciálou a příjmením - K. Ponocný Mezi titulem a příjmením - Ing. Šroubeček Ve víceslovném odborném termínu, jehož jednotlivé části jsou zkratkami - Mac OS X Mezi hodnotu a jednotku - 65 cm Jako oddělovač tisíců a tak dále V češtině pak má tvrdá mezera ještě jedno nezastupitelné místo. Může zaručit, že se jednopísmenná předložka, spojka či libovolný jeden znak nikdy neobjeví na konci řádku. Správný zápis v HTML tedy vypadá následovně: <p>a k tomu se připletla i babička ta babička, která dříve </p> Výjimkou z tohoto pravidla jsou spojky a a i v souřadném poměru, které však nesmí stát na začátku věty.

27 Protežovaný spojovník Bernard Le Bouvier de Fontenelle na smrtelném loži prohlásil: Netrpím, přátelé, jenom existovat mi dělá jisté potíže. Takovému problému se mohou pomlčka a minus pouze smát. Ony totiž bezpečně existují, ale trpí nesmírně. O čem to mluvím? Představte si, že Vám z ničeho nic začnu tvrdit, že na své klávesnici nikde nemáte pomlčku ani minus. Budete mne mít za blázna, a to mám pravdu. Ne, ta klávesa nad plus je spojovník. Stejně tak to tlačítko vedle pravého shiftu. Co se HTML týče, na klávesnici prostě minus ani pomlčku nemáte. Pro minus totiž HTML zná entitu, pro pomlčku (celým jménem půlčtverčíkovou pomlčku) pak. Rozdíly mezi těmito znaky jsou dobře patrné v řezu Arial, např. kód: <p style="font-family: Arial, sans-serif;">+- </p> Spojovník se užívá výhradně ke spojování slov či termínů, zatímco pomlčka je náhradou vypuštěného slova, obyčejně pak předložky či slovesa. K této funkci pak ještě pomlčce připadá místo za čárkou při určení peněžního obnosu. O použití znaménka minus se ani nebudu rozepisovat. Použití spojovníku: nebude-li pršet, hořko-sladký, Brno-Štýřice Použití pomlčky: dvojice Šimek Grossmann, pochod Praha Prčice, 213, Použití minus: = x

28 Plus, mínus, krát a děleno? Čtveráckému minus jsme se již na zoubky podívali, co však další základní matematická znaménka? Nejjednodušší to má plus na české klávesnici se vyskytuje hnedle na dvou místech, žádné pikle nekuje až do chvíle, kdy se potká se srandistou minus. Pakliže chcete například napsat, že koncert začne v plus minus deset minut, můžete použít tuto kostrukci: Koncert začne v / 10 minut. Koncert začne v / 10 minut. Běda však, chtěli-li byste podobnou konstrukcí zatížit i matematický zápis. Chcete-li napsat, že odmocnina z devíti se rovná plus minus třem, musíte použít zvláštní znak plus-minus, který zastupuje entita ± (±). Výsledek by tedy vypadal následovně: 9 = ±3. 9 = ±3 V kódu výše byla použita i entita, která vykreslí znak odmocniny. Tuto a mnohé další najdete v tabulce na konci stránky. Dalším problémovým znakem je děleno. V běžné praxi se používá klasické lomítko (/), (X)HTML však zná speciální znak ( ), který by měl použit všude tam, kde se dělí dvě čísla. Pro dělení dvou proměnných či složitějších argumentů bych se přikláněl k lomítku. Například: 12 4 = 3 u 1 / v 1 = 12 4 = 3 u₁ / v₁ =

29 Násobení se běžně vyjadřuje tečkou (.) nebo malým písmenem X (x). Obojí je špatně. Mnohem lépe ke k vyjádření operace násobení použít entit ( ) a ( ). Vše je ještě o to složitější, že správně by k vyjádření násobící tečky měla být využita entita, která však nefunguje v Internet Exploreru. 5 7 = 35 14u 1 ( 45 7) = 5 7 = 35 14u₁ ( 45 7) =

30 České uvozovky dílo ďáblovo Ve zdrojovém kódu používáme horní anglické uvozovky, které se entitou zapisují " Základním typem českých uvozovek jsou tzv. dvojité dolní devítky a dvojité horní šestky ( a ), při vnoření pak jedna devítka, potažmo šestka odpadá ( a ). Při dalším vnořování pak musíme sáhnout například ke dvojitým (»» a ««) a jednoduchým ( a ) francouzským uvozovkám. Následující příklad vypadá bez nadsázky děsivě: <p>řekl jsem mu: Tvrdila mi: Jeden profesor povídal:»otroci často při práci vykřikovali: Tua Nui! «</p> Řekl jsem mu: Tvrdila mi: Jeden profesor povídal:»otroci často při práci vykřikovali: Tua Nui! «

31 Interpunkce Interpunkční znaménka Mezi interpunkční znaménka řadíme tečku, čárku, dvojtečku, středník, vykřičník, otazník, trojtečku (výpustku), spojovník, pomlčku, závorky, uvozovky a odsuvník neboli apostrof. Tečka, čárka, dvojtečka, středník, vykřičník, otazník Za těmito interpunkčními znaménky se píše mezera, před nimi však ne. Výjimkou z tohoto pravidla jsou pouze případy, kdy se vyskytují dvě interpunkční znaménka vedle sebe, v takových případech se někdy mezera za znaménkem nepíše. Chybně: Řekl mi,že se vrátí. Správně: Řekl mi, že se vrátí. Chybně: Kamarádka s r. o., nejprodělečnější firma v ČR, slaví další úspěchy. Správně: Kamarádka s r. o., nejprodělečnější firma v ČR, slaví další úspěchy. Výpustka Výpustka neboli trojtečka se používá všude tam, kde je vypuštěna či nedopovězena část věty. Před výpustkou na konci věty mezeru nepíšeme, za ní ano. V případě výpustky vprostřed věty píšeme mezeru z obou stran. Pro výpusku máme v HTML entitu <p>ještě jednou mi objedeš klíčem auto a </p> Př. Ještě jednou mi objedeš klíčem auto a

32 Pomlčka a spojovník V případě spojovníku je situace jednoduchá, spojovník není obalen žádnou mezerou. To pomlčka je jiný oříšek. V případě pomlčky platí, že jí nesmí začínat nový řádek. Tedy správný zápis je: <p>mladí ležáci staří žebráci.</p> Závorky Běžně používáme kulaté závorky. Text v závorkách od nich není oddělen mezerou, závorky však od okolního textu odděleny jsou. Další typy závorek (hranaté a složené) používáme především v matematických výrazech. Pro hranaté závorky najdeme ještě uplatnění ve fonetickém přepisu cizích slov. Příklady: Těpic vstal a (jakkoliv nechtěl) pozorně se zadíval na svůj obraz na stěně. Neznalý uživatel je pak často hanlivě nazýván jako looser *lúzr+. 7 {2 + [13 (5 3)]} - 4 Poněkud archaicky působí nahrazení kulatých závorek lomítky. Tento zápis pochází z doby, kdy na psacích strojích kulaté závorky chyběly. Nicméně i takový zápis je třeba považovat za správný.

33 Uvozovky Je třeba pečlivě rozlišovat, kdy jsou uvozovky součástí přímé řeči a kdy jen obalují nějaký netradiční termín, přezdívku, opisné vyjádření atp. V obou případech používáme české uvozovky, které jsem zmiňoval v minulé kapitole. Uvozovky jsou z obou stran obaleny mezerami vyjma případů, kdy za nimi stojí přímo interpunkční znaménko. Příklady: Ostravské hooligans čekal v Brně tradiční výprask. Taková střela byla jako z říše snů. Ta pravá zábava však začíná až s nástupem přímé řeči. Ze základní školy víte, že přímá řeč může stát za i před větou uvozovací a stejně tak do ní může být vložena. Problém nastane asi až v případě, kdy se pokusíte zorientovat ve všech těch čárkách, dvojtečkách a uvozovkách, které jsou pro správný zápis zcela nezbytné. Prohlédněte si následující příklady. Tichý hlásek pronesl: Co by se asi tak stalo, kdybych zatáhl za tento provázek? Šklebí se vážně divně, mistr Leonardo odložil štětec a znechuceně odešel. Tak se mi zdá, namítl Pepik nesměle, že mi chybí polovina hlavy. Na jejich základě již snadno zjistíte obecná pravidla pro tvorbu přímé řeči. Podotknu snad jen, že ve druhém a třetím případě by mohla být první čárka nahrazena libovolným interpunkčním znaménkem z první skupiny. Odsuvník neboli apostrof Apostrof nahrazuje vynechané písmeno. V (X)HTML pro něj máme entitu &apos; Stáh' si kalhoty a ukázal přítomným damám něco, co v životě neviděly.

34 Gramatika Gramatika a typografie? Co má k čertu společného gramatika s typografií? Ano, i takhle by se některý trapně extrovertní jedinec mohl ptát. Odpovídám: Mnoho! Vezměte si zvláštní jev vzdělaného návštěvníka Vašich stránek. Začte se do, jistě poutavého, obsahu a najednou bum, hrubice! Vím to z vlastní zkušenosti, že někteří lidé mají prostě hypertrofovaný smysl pro gramatickou a pravopisnou správnost čteného a libovolná chyba jim dokáže čtení pěkně znechutit. Následující řádky by Vám měly přiblížit alespoň některé z nejrozšířenějších gramatických a pravopisných omylů, kterých se mnozí tvůrci webového obsahu dopouštějí. Určitě se ale nikdy nedostanete do fáze, kdy budete psát zcela bez chyb. Já se také děsím, kolik chyb se tu na webu roztroušeno povaluje, ale vím, že jsem udělal maximum pro to, abych jich maximum vychytal. To by mělo být i Vaším cílem. Mě, mně Je jen jednoho rozšířenějšího omylu, než tohoto gramatického evergreenu, ten si však nechám až na závěr. Vězte, že tvar mně se používá pouze ve třetím a šestém pádě. K lepšímu zapamatování napomáhají tvary zájmena ty. U něj totiž ve třetím a šestém pádě nastupuje na scénu forma tobě. Pamatujte si tedy, že tobě = mně. Ve třetím pádě je však mnohdy výhodnější použití tvaru mi.

35 Přechodníky Jediná věc, která mne chrání před spravedlivým hněvem nad neschopností českých autorů používat přechodníky, je moje vlastní neznalost přechodníků. A zdá se, že v tom nejsem sám, narazím-li totiž na přechodník a ověřím si ho proti tabulce, většinou zjistím, že použitý tvar je nesprávný. Já jsem si pomohl snadno, přechodníky nepoužívám a jsem za vodou. Ale pakliže patříte do té sorty novodobých obrozenců, kteří chtějí přechodníky vzkřísit v plné kráse, tak s kříšením začněte ponejprve u sebe. Viz Spousta lidí si myslí, že viz je zkratka. Nejsou však schopni podat odpověď na otázku, od jakého že slova. Věc se má tak, že ono slůvko zkratkou není, je mnohem spíše imperativem (rozkazem) slovesa vidět. Můj, svůj Problém! Velký problém, a to i pro mnoho profesionálních korektorů. Problematika těchto dvou přivlasťnovacích zájmen dalece překračuje meze tohoto článečku, takže jen jednoduše. Mluvíme-li o předmětu (subjektu), který náleží podmětu (objektu), používáme zvratné zájmeno svůj. Ukážu Vám své internetové stránky (nikoliv moje). Petr spálil všechy své knihy (nikoliv jeho knihy). Abysme, abychme, abychom? Abychom a abyste, kdybychom a kdybyste. Takto a ne jinak vypadají správné tvary podmiňovacího způsobu. Paskvily typu by jsme, bysme, by jste jsou však bohužel stále dosti rozšířené. Takže přátelé, měli bychom ctít český jazyk. Představte si, že byste ho někdy mohli potřebovat.

36 Nenechte ji dále trpět! Dostávám se k problému, který mne pravidelně zvedá ze židle. Bohužel se tak děje tak často, že mnohdy usínám s úpornou bolestí nohou od neustálého vstávání. Mluvím o čtvrtém pádu zájmena ona. Moudré knihy mluví o procentu chybovosti kolem deseti procent. To se však týče pravděpodobně na papír psaného projevu. Na internetu totiž toto procento závratně stoupá a nebál bych se odhadnout, že správně použitý tvar se vyskytuje v pouhé polovině případů. Zajímavostí pak je, že nejčastěji se tohoto omylu dopouštějí obyvatelé Prahy (nemohu si pomoci, je to tak). Tak si pro jednou, čerchmanti, prosím, zapamatujte, že čtvrtý pád zájmena ona končí krátkou iotou. Navštívil bych ji. Pokřtil bych ji. Pochoval bych ji!