Typographie, grafika, čeština et cetera


Archiv pro Leden 2006

Plně obrázková tlačítka bez preloadu

24. 1. 2006 | 9 komentářů

Tento postup je z velké části založen na pixyho článcích Rychlé rollovery bez načítáníNáhrada textu obrázkem a rozšiřuje možnosti jejich užití. V čem tyto dva způsoby vlastně spočívají?

Rollovery bez načítání fungují na principu obrázku na pozadí, který obsahuje stav pro neaktivní odkaz, :hover stav, případně ještě třetí pro aktivní odkaz. Podle momentálního stavu mění pozadí svou pozici (více v pixyho článku).

Náhrada textu obrázkem opět využívá obrázku na pozadí, jenž při zapnutých stylech a obrázcích zakrývá text a sám sděluje textovou informaci. Není-li obrázek dostupný nebo je-li vypnutý styl, text je viditelný (detailní popis v pixyho článku).

Doporučuji obojí nastudovat, protože v opačném případě následujícím kódům pravděpodobně nebudete moc rozumět.

Mým záměrem bylo vytvořit plně obrázková tlačítka bez preloadu a se skrytým textem. Zároveň taková tlačítka, aby při nedostupném obrázku nebo vypnutém stylu stále fungovala jako odkazy. Třeba se můj způsob bude někomu hodit.

Pro pozadí jsem si vytvořil obrázek široký 200 a vysoký 100 pixelů, který obsahuje dva stavy; vypadá takhle. Samotné tlačítko bude mít rozměr 200 × 50 px.

Teoretické řešení:

HTML
<a class="button" href="#">Button<span></span></a>

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover span {
background-position: 0 -50px;
}

Bohužel nefunguje v Internet Exploreru 5.x, ve verzi 6 chybuje. Takže jsem chvíli experimentoval a upravil styl do podoby funkční i v IE. Změna je vyznačena tučně.

Funkční řešení

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Viz příklad 1. Funguje bezpečně v IE 5+, Firefoxu i Opeře na PC (jinde jsem netestoval).

Více tlačítek

V praxi je většinou potřeba udělat speciální tlačítko pro každý jednotlivý odkaz. Úprava stylu je pak velmi snadná, spočívá ve vytvoření nové třídy a přepsání předchozího pravidla o adrese obrázku na pozadí.

HTML
<a class="button" href="#">Button<span></span></a>
<a class="button button2" href="#">Button 2<span></span></a>
<a class="button button3" href="#">Button 3<span></span></a>

CSS

a.button2, a.button2 span {
background: url('button2.gif') left top no-repeat;
}
a.button3, a.button3 span {
background: url('button3.gif') left top no-repeat;
}

a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Aby styl pracoval správně i v Exploreru, je nutné, aby byla definice pro „button2“ a „button3“ ještě před stylem pro „:hover“ stav. Podívejte se na příklad 2.

Aktivní odkaz

Teď už není problém přidat do stylu styl pro aktivní odkaz, třeba takto.

HTML

<a class="button button3 current" href="#">Button 3<span></span></a>

CSS

a.button:hover, a.button:hover span, a.current, a.current span {
background-position: 0 -50px;

Viz příklad 3.

Vertikální menu

Kvůli tomu, že byl odkaz s třídou „button“ formátován jako blokový prvek, řadí se tlačítka automaticky pod sebe. Vertikální menu lze vytvořit velmi snadno, postačí nastavit odkaz jako plovoucí.

CSS
a.button {
display: block;
float: left;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}

Viz příklad 4.

Stylopisy jsou až na jednu výjimku validní. Tou je definice „cursor: hand“ opravující nepříjemnost Exploreru 5.x, který odmítá zobrazit u tlačítka „pacičku“ a zároveň nerozumí standardní vlastnosti „cursor“ s hodnotou „pointer“. Notoričtí vyznavači validního webu nechť tuto část stylu smažou a smíří se s textovým kurzorem u tlačítka ve starých Explorerech.

Jestliže máte nějaký návrh na zlepšení, podělte se o něj prosím v komentářích. Pokud mi chcete jen vynadat nebo oznámit, že něco podobného znáte už dávno, nedělejte to. Praktický výsledek použití tohoto postupu je k vidění třeba na mém webu.

Zákaz vstupu do 18-ti let

3. 1. 2006 | 20 komentářů

Mini kvíz: Zdá se vám, že je v nadpisu něco v nepořádku? Jestliže ano, gratuluji; pokud ne, čtěte dále, poněvadž v následujícíh odstavcích se pravděpodobně dozvíte některé zásadní skutečnosti.

Většina chyb, kterých se v psaném projevu dopouštíme, pramení z neznalosti, respektive z nedostatku jistoty — nedostatku zažitých pravidel v práci s jazykem. S těmi pravidly to ovšem může býti dosti ošemetné, jelikož máme často návyky špatné. To proto, že se v dané věci chybuje tak často, až se příslovečná stokrát omílaná lež stane pravdou.

Tipuji, že v případě slovních hybridů typu 18-ti, 20-ti, 8-mi a jim podobných se z neznalosti stal tolerovaný návyk. Totiž že míra chybovosti je tak vysoká, až vzniklo mylné povědomí o správnosti takového zápisu.

Takže v čem je vlastně problém?

Platí, že číslovky zapsané numericky, tedy čísly, se skloňují až při čtení. Proto se zapisují výhradně následovně, jiný způsob není (!) možný:

Zákaz vstupu do 18 (osmnácti) let. Setkal jsem se s 15 (patnácti) kamarády. Intimně se poznal s 20 (dvaceti) partnerkami. Byl uchvácen 7 (sedmi) divy světa.

Minimálně poslední věta také není úplně v pořádku, protože je dobrým zvykem v beletrii nižší číslovky vypisovat slovně. Uznejme, že věta „Laškoval jsem s 3 dívkami“ vypadá přinejmenším trochu komicky. Co už ale zavání extremismem, je chybování u řadových číslovek:

Stál jsem tam 6-tý v řadě.

Takto tedy, přátelé, rozhodně ne! Za řadovými číslovkami píšeme vždy tečku (6. v řadě). Existuje pak ještě druhé pravidlo, které určuje psaní čísel pojených se slovem.

Přišel tam 60letý stařec. Jistota 10násobku. Preferuji 12válcové motory. Vytiskni to na formát A3.

Ani zde se spojovník (-) nikdy nepíše, dokonce ani mezera. Úzus se zapamatuje lépe, představíme-li si výraz rozepsaný slovně; ten je totiž také bez mezer (šedesátiletý, desetinásobku). I zde platí, že rozepsáním nic nepokazíme. Pozor ale na ošemetnou slovenštinu, kde se spojovníku v takových případech užívá (100-krát viac, 10-násobok…)

Tato dvě snadná pravidla by si snad mohl zapamatovat každý. Píšeme-li odborný text, je podobné chybování zjevně amatérské a velmi výrazně hodnotu a důvěryhodnost třebas i dobrého textu snižuje.

Další lamentace nad stavem češtiny

3. 1. 2006 | 18 komentářů

Bez mučení se přiznám. Mám vrozený odpor k psaní cizích slov tam, kde jejich užití není nutné. Jeden si nemůže nevšimnout toho, jak se v posledních letech angličtina protlačila či byla protlačena do takřka každého oboru lidské činnosti, nemenší měrou také do mluvy „obyčejných“ lidí.

Nějakou dobu jsem přemýšlel nad tím, co nutí používat stále více slov cizích. Dost na tom, že v češtině stabilně fungují tisíce slov přejatých nebo počeštěných (historie, jubileum, pacifikace, restaurace, fluidum, metafora, piano, hurikán a já nevím co ještě); je opravdu nutné za každou cenu sahat po slovech cizích, obzvláště máme-li krásné slovo české? Ale ono je to vlastně ve své podstatě celkem jasné; vše vychází z lidské psychologie. Cizí slova mají onen nádech odbornosti, propůjčují lidem zdání vlastní důležitosti a vzdělanosti. Dokáží poměrně nenápadně zakrýt jak prázdné blábolení, tak zjevnou duševní impotenci svého autora či instituce.

O mluvě mládeže nemluvě.

U mládežníků je to dost podobné, i ta motivace není vzdálena světu dospělých a rádoby vzdělaných. Aby mladý člověk, který vlastně ani nic světoborného neumí, obstál v partě a počítalo se s ním, musí být dostatečně cool, happy & smiling one. Zvlášť v kombinaci s úžasnými floskulemi (hustý týpek, v pohodě úlet — ale o tom snad až jindy…) vzniká „vskutku krásný“ městský slang.

Co je ale pseudoodborným a pseudokůlovým výrazům opravdu společné — povyšují efektní cizí slova nad ta obyčejná a nudná česká, aniž si uvědomují, že tím dochází jak k jejich inflaci (těch cizích), tak k degradaci jazyka rodného. Místo toho, aby se užívala nebo tvořila slova česká, přejímají se oddaně slova k nám importovaná, a děje se tak dokonce s nefalšovaným nadšením. Celkem zarážející pro mě je fakt, že k infiltraci češtiny angličtinou dochází zcela dobrovolně, přestože máme v dobré paměti (no dobře, my mladí už vlastně ne) dobu protektorátu, kdy nám byla nucena němčina a kdy se většina nápisů realizovala dvojjazyčně.

Oč krásnější a plnější je slovo žalostný než dezolátní, slovo hustoměr než denzimetr, setkání než mítink (či meeting)! Ale to je jen vrcholek ledovce. Primát drží hlavně rozličné PR a reklamní agentury (nepřehlédněte slovník reklamštinywebšitny!), kde se každá guma, která chodí vařit kafe, nazývá director. Někdy se bavím prohlížením vizitek, co mi lidé dávají, a nevycházím z údivu. Jako by se každý styděl za práci, která se jmenuje česky! Je snad potupné zastávat funci výrobního ředitele, provozního technika nebo něčí sekretářky? Pravděpodobně ano, protože mezi těmi creative a executive directory, account managery a DTP operatory aby člověk něco alespoň trochu českého pohledal. A je to bohužel opět dáno tím, že celá firma včetně zaměstnanců si připadá mnohem důležitější, když se pro funkci člověka, který strká papíry do kopírky, vymyslí nějaký efektní název.

To je nešvar především velkých zahraničních firem, které mají u nás pobočku — ale nemohu se zbavit dojmu, že se šíří jako mor do všech společností, které mají více než tři zaměstnance včetně uklízečky.

Plně chápu užití cizích slov tam, kde nestihla čeština dostatečně pružně zareagovat vytvořením slova vlastního, nebo tam, kde je český výraz nepraktický, nepřesný nebo zavádějící (odborná literatura). Co ale bytostně nesnáším, je nadužívání angličtiny i tehdy, když k tomu není žádný zjevný důvod.

Aktualizace: Za odůvodnělé nepovažuji takové psaní a mluvení v médiích určených pro nejširší veřejnost (televize, rozhlas, deníky). V textech určených pro vyhraněný typ čtenářů nebo mezi skupinou podobně vzdělaných/smýšlejících/zaměřených lidí však do určité míry ano.

Cizí slova jsou rozvinutím, ozvláštněním jazyka. Musí se s nimi zacházet opatrně. Pak nám napomohou k živosti a rozmanitosti textu nebo upřesnění podané informace; v opačném případě jsou branou do pekel.

Autor

Martin T. Pecina, biblioman, bibliofil. V roce 2004 jsem zprovoznil typografickou příručku typomil.com (léta neaktulizováno), portfolio mám na adrese book-design.eu. Píšu o dýmkách na blogísek dýmkař.cz.

Typo 365

Typo 365 je v pořadí druhá ročenka „nejlepších“ textů o typografii, do které jsem přispěl dvěma články. Najděte v ní ale i příspěvky od osob mnohem povolanějších (namátkou Reza Abedini, Erik van Blokland, Veronika Burian, Matthew Carter, Tobias Frere-Jones a další).

Doporučuji

Radkovi Sidunovi se povedlo zrevitalizovat a zmodernizovat písmo Jiřího Rathouského, které milovníci typografie znají z knižní edice Gema z Odeonu. Alphapipe nabízí Briefcase Type Foundry.

Správa webu