Humanistická majuskule a minuskule Tvorba písma na základě jeho rekonstrukce
DIPLOMOVÁ PRÁCE
Ondřej Frinta
jaro 2009
Prohlášení Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj.
ii
Poděkování Rád bych na tomto místě poděkoval vedoucímu práce doc. Mgr. Vítězslavu Švalbachovi za jeho vstřícný přístup a cenné rady. Dále potom projektu Manuscriptorium, za zveřejnění zajímavých rukopisů a také všem, kteří mě jakkoli poradili, či upozornili na chybu.
iii
Shrnutí Hlavním tématem diplomové práce je vytvoření originálního písma na základě rekonstrukce z historických podkladů z 16. století a jeho převedení do standardního písmového souboru – fontu. Dále se práce bude zabývat problematikou zobrazování písma na webových stránkách a možnostmi jak zobrazovat i nestandardní písma.
Annotation Humanistic majuscule and minuscule – Creation of a typeface on the basis of its reconstruction. The main aim of the thesis has been to create an original typeface on the basis of its reconstruction from historical source materials from 16th century, and to transfer it into a standard typal file – a font. The thesis also deals with the problems of displaying the typeface on websites, and the possibilities of displaying non-standard typefaces.
iv
Klíčová slova písmo, font, humanistická minuskule, humanistická majuskule, rekonstrukce písma, písmo na webových stránkách, core fonts for the web, css, nahrazení textu
1 Úvod Písmo slouží k zaznamenávání lidské řeči, zvuků, myšlenek, informací a událostí. Jedná se o médium schopné komunikace mezi lidmi v prostoru a čase. Jeho vývoj byl dlouhý a ovlivnil ho nejen jazyk, ale také kulturní a technická vyspělost jeho tvůrců a uživatelů. Tato práce se věnuje písmu humanistickému, které se začalo používat během první poloviny 15. století v Itálii. V průběhu tohoto století začalo být velmi oblíbené a následně se rozšiřovalo i do dalších zemí. Humanistické písmo se tak stává základem pro knižní písmo, jak ho známe dnes. První část se věnuje vlastní rekonstrukci písma dle jeho předlohy. Na úvod této kapitoly jsou zmíněny podkladové materiály – kniha Liber horarum a písmo, kterým je tato kniha napsána a zároveň je předmětem rekonstrukce, tedy humanistická majuskule a minuskule. Následně pokračuje popisem volby znaků z předlohy a samostatnou rekonstrukcí písma, jak je vyučována na fakultě informatiky doc. Mgr. Vítězslavem Švalbachem [42]. Tento postup je chronologicky dělen do podkapitol od hledání a zvolení ideální stopy psacího nástroje po vytvoření základních glyfů – znaků minuskule, majuskule a číslic. Následující kapitola začíná rozborem možností fontů ve formátu OpenType a využitím toho formátu. Poté je uvedena samotná tvorba fontu – převedení již vytvořených znaků, úpravy rozpalu písma a potřebná úprava znaků. Vytvoření dalších glyfů, které nebyly v podkladech a které by měl font obsahovat. Jde zejména o vytvoření diakritických znamének a s tím souvisejících typů, které tyto znaménka obsahují. Také je potřeba vytvořit interpunkci, bez níž by nebylo písmo úplné. Poslední tématický celek se zabývá zobrazováním písma v prohlížečích internetových stránek. Popisuje standardní písma pro tvorbu webových stránek a uvádí různé možnosti, jak využít i jiných (nestandardních) písmových rodin. Od často používaného nahrazení obrázku textem, přes využití kaskádových stylů s vlastností připojování fontů až po technologii Adobe Flash kombinovanou s JavaScriptem. Také zde budou uvedeny rozšiřující typografické možnosti, které jsou podporovány přehrávačem Adobe Flash player, jako jsou například: využití minuskových (skákavých) číslic a ligatur, nastavení vyhlazování písma, aplikování různých filtrů a prolínání vrstev.
2
2 Rekonstrukce 2.1 Podkladové materiály Jak jsem již zmínil v úvodu, hlavním podkladovým materiálem byla kniha Liber horarum. Tento rukopis je fyzicky uložen v Moravské zemské knihovně v Brně, ale díky projektu Manuscriptorium [13] je jeho fotokopie umístěna na internetu, kde je pro veřejnost dostupná pouze v nízkém rozlišení. S licencí, kterou vlastní i Masarykova univerzita, je možné knihu zobrazit i v dalších rozlišeních. Nejvyšší rozlišení, ve kterém jsou materiály přístupné, se v závislosti na vybrané straně mírně liší, zhruba je to kolem 1015 × 1650 obrazových bodů. Rukopis Liber horarum je psán latinsky a vznikl v 16. století ve Francii, což bylo určeno podle přípisků o narození a křtech dětí z rodu Buquoy v letech 1634 – 1649. Do Čech se tento rukopis pravděpodobně dostal, díky výše zmíněnému rodu, během třicetileté války. Jeho rozsah je 139 stran včetně desek a prázdných stran. Celý je napsán jednou písařskou rukou a jedním písmem – kaligrafickou humanistickou minuskulí, kromě přípisků, které ale byly do knihy dopsány později a jsou psány humanistickou polokurzívou.
2.2 Humanistická majuskule a minuskule Humanistická minuskule čerpala z písma, které se rozvíjelo během 9. a 12. století – karolinské minuskule. Ta byla dostupná především z rukopisů latinských klasiků. Karolinská minuskule byla významným stupněm ve vývoji latinských knižních minuskulových písem. Proto si ji humanisté vybrali jako vzor pro své nové písmo. Vývojovým přechodem mezi gotickými písmy a humanistickou malou abecedou byla littera fere humanistica (skorohumanstické písmo, případně gotikoantikva), která vznikla na přelomu 14. a 15. století. Humanistická minuskule, již oproštěná od gotických vlivů, se stala vrcholným knižním písmem italské renesance. Sídlem jejího vývoje byla Florencie, kde v roce 1425 vznikla písařská škola, jejímž hlavním iniciátorem byl Niccolò Niccoli. V polovině 15. století se humanistická minuskule stala písmem celého humanistického hnutí a psát jí, byl jeden z hlavních požadavků na humanistického vzdělance. Knihtisk humanisté přijímali s opovržením, jelikož si byli vědomi, že vyvinuli dokonalé písmo. Rozdíly mezi karolinskou minusklulí a humanistickou, bychom hledali velice těžko, jde pouze
3
o téměř neznatelné nuance ve způsobu psaní. Odlišnostmi humanistických rukopisů jsou například psaní tečky nad měkkým i, kolmý dřík u písmene a, obměna v g, okrouhlá forma r nebo užití arabských číslic. Vzorem pro humanistickou majuskuli byla předgotická písařská kapitála, kterou byly psány opisy latinských klasiků na začátku 9. století. Velká abeceda byla také inspirována a upravena podle starořímských nápisových písem. Humanistická majuskule se obvykle vyznačuje poměrně menšími rozměry vzhledem k malé abecedě. Ale jelikož se jednalo o rukopisné písmo, nebyla majuskule vždy stejného duktu. V různých rukopisech tak mohou být stejná písmena různě napsána. Více informací o těchto písmech podává například František Muzika ve své dvoudílné poublikaci Krásné písmo [01] [02].
2.3 Výběr znaků Jedním z nejzásadnějších kroků bylo vybrat z předlohy vhodné znaky, jelikož jsem s nimy musel nadále pracovat v průběhu celé rekonstrukce. Vybírání znaků malé abecedy bylo díky rozsáhlosti rukopisu téměř bezproblémové. U většiny písmen nebylo obtížné najít mnoho zástupců na pár stránkách, ze kterých jsem potom volil zhruba deset reprezentantů. Některé znaky jako y, j a z se vyskytovaly velmi málo, protože se v dané době v latinských textech téměř nepoužívaly. Například z bylo pouze ve slově Elizabeth. Malé k jsem nenalezl v rukopisu žádné, proto jsem pro něj využil podklady z jiných zdrojů (Krásné písmo [02], Kaligrafie [09]). Výběr verzálek již byl o trochu složitější. Nejen protože jich bylo výrazně méně, ale hlavně z důvodu, že je písař většinou psal jako iniciály – vybarvení, zdvojení tahů, různá výška, atp. Z tohoto způsobu zápisu vyplynulo, že stejná velká písmena se od sebe mohou velmi lišit a nejsou tak „strojově přesná“ jako písmena malá. Proto byla volba více subjektivní. Snažil jsem se hlavně volit znaky, které svými parametry a rozměry odpovídaly minuskám. Dále jsem si vybral potřebné číslice z úvodní části rukopisu, která obsahuje kalendář, kde jsou číslovány jednotlivé dny. Zajímavost je, že dříve se arabské číslice v rukopisech téměř nepoužívaly. Začaly se používat až v humanistických textech. Je to také jeden ze znaků, podle kterých lze určit, že se jedná právě o humanistický rukopis. Arabské číslice mají daný způsob umístění na řádek – číslice 1, 2, 0 jsou v mezích minuskulové výšky, 6 a 8 jsou protaženy na výšku horních a 3, 4, 5, 7, a 9 na výšku dolních dotažnic. Tento způsob umístění přetrval až do přelomu 18. a 19. století. Nakonec jsem zvolil základní ligatury, abych měl výběr znaků potřebný k rekonstrukci kompletní.
4
2.4 Definice nástroje Když už jsou zvoleny potřebné znaky, čeká nás volba nástroje – jeho tvaru a sklonu. Rekonstrukci samotných znaků jsem prováděl v programu Adobe Illustrator CS4, kde je možné vytvořit si zadáním parametrů vlastní štětec imitující psací prostředek. Pokud budu v následujícím textu hovořit o štětci, bude se jednat o nástroj, který určuje stopu tahu v programu Adobe Illustrator. Až do poloviny 19. století se jako psací náčiní používal ptačí brk. Tvar hrotu, jak je možné vidět na obrázku, svádí k využití štětce obdélníkového tvaru. Ten jsem také použil u první verze minuskule (viz. příloha 2). Po jejím dokončení, při porovnávání s podklady, jsem ale zjistil, že stopa je příliš ostrá. Po dalším zkoumání podkladů, jsem si uvědomil jistou „kulatost“ tahů způsobenou nejen samotným ptačím brkem, inkoustem a materiálem, na kterém je kniha napsaná, ale také časem, díky kterému se inkoust jemně rozpil a ztratil svou původní barvu. Byl to jeden z hlavních důvodů, proč jsem se rozhodl vytvořit novou verzi.
obr. 1: Úprava husího brku [14]
První parametr, který jsem zjišťoval, byl sklon nástroje. Nejsnáze se určuje na znacích s jednoduchou kresbou, v mém případě jsem porovnával osy písmen o. Vybral jsem jich deset a pomocí kříže určujícího jejich osu, jsem zjistil sklony jednotlivých znaků. Protože se jedná o písmo psané rukou, osa jednotlivých znaků nemůže být shodná. Rozsah úhlů byl mezi 15 až 28 stupni. V průměru vyšel sklon nástroje 19,9 stupňů a dále jsem pro zjednodušení pracoval se zaokrouhlením na 20 stupňů. Tento sklon jsem porovnal i s dalšími znaky, abych si potvrdil, zda je osa určena správně. Případně ji v opačném případě dodatečně upravil, což nebylo potřeba.
5
obr. 2: Hledání sklonu nástroje
Dalšími zjišťovanými parametry byly šířka a výška štětce, které lze určit na místech průsečíku osy se znakem. Zde jsou nejširší, resp. nejtenčí místa na stopě zvoleného znaku. Podle těchto míst jsem zhruba určil tvar nástroje. I když výšku není možné přímo zadat do nastavení štětce, lze z ní odvodit již výše zmíněnou kulatost. Výsledný tvar jsem následně ještě mírně pozměnil po individuálním porovnání s dalšími znaky. Na následujícím obrázku je zobrazeno dialogové okno s výsledným nastavením nástroje – úhel: 20°, kulatost: 15%, průměr: 20 bodů, kde všechny parametry byly pevné.
obr. 3: Výsledný tvar nástroje
2.5 Základní znaky minuskule o, i S připraveným štětcem jsem již mohl začít vytvářet první znaky. Důvod, kvůli kterému se začíná s rekonstrukcí malou abecedou, je prostý. V psaném textu je minusek více než verzálek, a tedy více ovlivňují celkové vnímání textu. Proto jsem také začal s písmeny, které mají jednoduchou
6
kresbu. Nejen že jejich tvorba je snadnější, ale hlavně proto, že ovlivňují většinu ostatních znaků, případně z nich přímo vycházejí. Prvním písmenem, které jsem rekonstruoval, je o. Nejdříve jsem potřeboval určit osu tahu psacího nástroje, abych na ni mohl aplikovat dříve vytvořený štětec. Kružnicemi, které kopírují velikost tahu, jsem překryl vybraný znak a jejich středy vedl křivku. Spojením koncových bodů vznikl tvar podobný elipse určující osu každého znaku. Následně jsem provedl porovnání těchto tvarů a na jejich základě vytvořil konečnou osu písmene.
obr. 4: Hledání ideální stopy znaku „o“
Dále jsem pokračoval aplikací štětce. Zde mne Adobe Illustrator trochu zklamal, jelikož nedokázal vytvořit čistý tah. V úzkých místech (horní a dolní části) na vnitřním oblouku vznikla ostrá hrana. Potřeboval jsem vytvořit obrysy tahu, abych vzniklé chyby při vykreslení mohl upravit. Toho jsem dosáhl pomocí funkce „Object \ Expand appearance“ (Objekt \ Rozdělit vzhled). Jak je vidět na prostředním obrázku (obr: 5), vzniknou body i v ploše znaku, které je potřeba odstranit kvůli dalšímu zpracování. Při prvním vytváření znaku jsem je ručně odstranil a další body složitě pospojoval, než jsem dosáhl potřebného výsledku. U druhé verze mě již napadlo použít jinou funkci programu – „Pathfinder \ Merge“ (Cestář \ Sloučit), která tyto body odstraní. Mohou při ní sice vzniknout zdvojené body v místech napojení, ale ty lze snadno odstranit jejich sloučením.
7
obr. 5: Aplikace štětce na znak „o“
Tento postup je pouze na několik kliknutí a hlavně není potřeba jako u ruční úpravy, hlídat všechny změny v okolí odstraňovaného bodu. Nyní bylo nutné zbavit se ostré hrany. To jsem provedl vymazáním bodu, který ji tvořil a následným protažením vah sousedních bodů, tak aby vznikl oblouk co nejpodobnější předloze. Posledním krokem bylo porovnání výsledku s předlohou a případné drobné úpravy.
Jako zajímavost bych uvedl, že mnou zrekonstruované písmeno o je určeno čtrnácti řídícími body oproti podobným fontům Adobe Garamond nebo Jannon Antiqua od Františka Štorma, kde stačí bodů pouze osm. Jelikož můj znak má díky sklonu psacího nástroje složitější kresbu, porovnal jsem počet řídících bodů i s kurzivou, na kterou jich je ve fontu od Adobe potřeba dvanáct, což je stále méně bodů než u mnou vytvořeného znaku. Vždy je dobré snažit se využít co nejméně bodů z důvodů jednoduší a rychlejší reprezentace znaku. Vyplývají z toho i výhodné vlastnosti pro tvůrce: čím máme méně bodů, tím je méně úprav a tím méně může vzniknout chyb. Rozmístění mých bodů také není tak pravidelné jako v profesionálních fontech, kde jsou rozprostřeny téměř souměrně podle vertikální osy.
8
Dalším ze základních typů je i. Je to jeden z nejdůležitějších znaků, protože z něho vychází většina písmen obsahující kolmý dřík. Také určuje ostatním podobu zakončení znaků, kde hlava písmene je stejná pro všechny znaky malé abecedy, které ji obsahují. Oproti tomu pata písmene již není shodná u všech znaků, ale tvar tahu dolního výběhu i je základem pro další písmena, které využívají jeho modifikací. Postup jeho vytvoření byl stejný jako u o. Složitější byl průběh zjištění stopy tahu štětce u horního serifu, jelikož z podkladů nebylo jasné jak je veden. Nakonec jsem z materiálů o humanistické minuskuli vyčetl tři možnosti, které jsou uvedeny na následujícím obrázku (šipkou je uveden směr tahu). Zde se jako velmi cenná ukázala kniha Kaligrafie Davida Harrise [09], ve které je návod jak psát humanistickou minuskulí.
obr. 7: Možné stopy znaku „i“ [02] [09]
Připravené středy kružnic jsem nakonec propojil třetím způsobem, poté co jsem si znak zkusil několikrát ručně nakreslit. U prvních dvou možností jsem nedokázal docílit správného výsledku, buď mi vznikla díra v kresbě nebo ostré napojení serifu v místě, kde mělo být plynulé. U výsledné stopy jsem ještě nakonec upravil délku výběhu a zúžil rozsah tahu v serifu. Kdybych je nechal jako u zrekonstruované stopy, byl by ve výsledku znak i oproti podkladům širší, kvůli rozměrům štětce. Tečku nad i jsem dodělával až později. Přemýšlel jsem, zda neudělat tečku kruhového tvaru podobnou znaménkům typografických písem vycházející z humanistické minuskule. Po konzultaci s doc. Švalbachem jsme vybrali tečku podobnou kosodélníku a vycházejí z tvaru nástroje.
obr. 8: Hledání ideální stopy znaku „i“
9
obr. 9: Postup rekonstrukce znaku „i“
2.6 Další znaky minuskule Při tvorbě dalších znaků, již můžeme vycházet ze dříve získaných znalostí a tvarů. Pokud bych postupoval stejným způsobem, tedy vytvoření osy znaku a aplikování štětce, mohlo by se stát, že by jednotlivé typy byly nesourodé. Abych tomu předešel, využil jsem prefabrikátů. Tento způsob také velmi zjednoduší práci, jelikož se používají výsledné tvary, které není třeba znovu upravovat. Takto jde například aplikovat hlava znaku i na další písmena. U první verze jsem se nechal používáním prefabrikátů příliš unést a výsledné písmo potom vypadalo velmi stroze a chladně. Jednotlivé znaky byly moc uniformní.
10
obr. 10: Aplikace prefabrikátů 1 (hlava znaku „i“)
Poté jsem vytvořil prefabrikát z dolního výběhu znaku i, který již nešel aplikovat na všechny podobné tvary. U těch jsem vyšel ze zrekonstruované osy i, kterou jsem upravil podle tvaru dolního výběhu rekonstruovaného znaku. Po aplikovaní štětce na tento tah a jeho úpravě, jsem ho mohl použít také jako prefabrikát.
obr. 11: Aplikace prefabrikátů 2 (pata znaku „i“)
Takto jsem postupně zrekonstruoval celou malou abecedu. Závěrem uvedu zvláštnosti některých znaků, které jsou buď vynuceny psacím nástrojem, nebo jsou zapříčiněny specifickým způsobem zápisu znaku písařem. obr. 12: Ukázka znaku „a“
Tvar nástroje a tah, který je veden zhruba ve sklonu dvaceti stupňů, způsobí, že náběh písmene je zúžený. Oproti klasickým typografickým písmům (na ukázách Times New Roman) je tedy znak více otevřený a má větší vnitřní světlost.
11
obr. 13: Ukázka znaku „e“
Zde je zajímavý tvar sklonu příčky, který je opět ovlivněn sklonem tahu. Písař také psal u písmene e relativně malé oko. Jelikož není osa znaku skloněna, jako v případě typografické kurzívy, je celkový dojem z tohoto písmene, jako kdybyby padalo dozadu. obr. 14: Ukázka znaku „k“
Jelikož v textu nebylo použito, vycházel jsem z ukázek v knihách Krásné Písmo a Kaligrafie. Byly zde uvedené dvě varianty – otevřená a s okem. Jelikož otevřený znak nebyl příliš kompaktní a také tolik nezapadal mezi ostatní znaky, rozhodl jsem se pro druhou variantu. obr. 15: Ukázka znaku „r“
U písmene jsem našel dva různé druhy zápisu. První zápis obsahoval samostatně psaný serif, podobný jako u znaků majuskule. Druhý zápis vycházel ze znaku i, s tím, že tah výběhu byl pozměněný. Jelikož jediný další serif v malé abecedě byl u písmene f, zvolil jsem druhou variantu, která způsobem vedení tahu byla blíže ostatním znakům. obr. 16: Ukázka znaku „y“
V době psaní rukopisu se ypsilon ještě příliš nepoužívalo. Pravděpodobně z tohoto důvodu měl písař u znaku specifický způsob zápisu. První diagonála byla protažena k dolní dotažnici, oproti tomu dnes bychom spíše protáhly diagonálu druhou. Tím je způsoben netypický sklon chvostu u tohoto typu. obr. 17: Ukázka znaku „z“
Zde byl podobný problém s nepříliš častým užíváním, jako u písmene y. Jak je vidět, tvar tohoto znaku je ještě odlišný od dnešní ustálené podoby.
12
2.7 Znaky majuskule Jak jsem již předeslal v kapitole o výběru znaků, při rekonstrukci verzálek se vyskytlo více problémů než u minusek. Při samotné rekonstrukci jsem zjistil, že některé znaky vůbec nevyhovují novým požadavkům, které vznikly při tvorbě malé abecedy. Většinou byly verzálky příliš široké. Z tohoto důvodu jsem musel hledat nové zástupce, kteří by lépe odpovídaly již vytvořeným znakům. Mohlo by se zdát, že vybírání všech reprezentantů na úplném začátku byla zbytečná práce. V mém případě bych to ale hodnotil jako přínos. Uvědomil jsem si díky tomu mnohem lépe vztah mezi malými a velkými písmeny. Dalším problémem byly různě stínované znaky a zdvojené tahy, u kterých po aplikaci štětce na osu neodpovídala šířka tahu rozměrům předlohy. Nepříjemné bylo, že například na jedné stránce bylo možné najít stejný znak s jednoduchým i zdvojeným tahem. Rozhodoval jsem se mezi několika možnými způsoby řešení: kreslit zdvojené stopy, po aplikaci štětce uměle upravit tvar znaku, upravit tvar nástroje. První možnost jsem zavrhl nejdříve. Protože i kdybych například u znaku N, kde to bylo velmi markantní, zdvojil diagonálu další stopou, nikdy bych nedokázal vytvořit užší dříky. Jelikož u minusek odpovídaly všechny znaky nástroji a úpravy po aplikaci štětce byly pouze kosmetické, rozhodl jsem se upravit vlastnosti štětce. Nepřipadalo mi příliš reálné, že by si písař na dříky bral speciální ptačí brk s užším hrotem. Zvolil jsem tedy asi nejjednodušší možnost a to pouhou změnu sklonu nástroje. I když jsem takto nedosáhl úplně stejné šířky tahů u všech rekonstruovaných znaků, tak jsem vzhledem ke kaligrafické povaze písma zvolil tuto možnost jako nejlepší.
obr. 18: Změna sklonu nástroje při tvorbě znaku „N“
Jediným společným rysem téměř všech znaků byla jejich nižší výška oproti horní dotažnici, určené velikostí znaků minuskule. Z knihy Tvorba typografického písma Oldřicha Menharta [05] se můžeme dozvědět, že se jedná o důležitou vlastnost písma, které se využívá pro sazbu delších textů. Velká písmena totiž nejsou v textu tolik výrazná a neruší jeho celkové plynutí, což zlepšuje jeho celkovou čitelnost.
13
2.8 Číslice Poslední samostatné znaky, ke kterým jsem měl podklady a ještě jsem je nezrekonstruoval, byly číslice. V knize sloužily k označení jednotlivých řádků kalendáře v první části rukopisu. V samotném textu se příliš nevyskytovaly. Z tohoto důvodu měly rozměry odlišné od ostatních znaků. Musel jsem tedy upravit jejich velikost vzhledem k písmové osnově odpovídající již hotovým znakům. U číslic nešel uplatnit postup tvorby pomocí prefabrikátů a všechny znaky, kromě 6 a 9, jsem musel vytvořit aplikací štětce na tah znaku. Proto udělat kompletní sadu číslic bylo téměř stejně náročné jako tvorba minuskule nebo majuskule. Zajímavostí je, že znaky 5, 6, 7 a 9 mají oproti ostatním jiný sklon a také číslice 2, které se velmi podobá dnešnímu znaku z.
obr. 19: Ukázka číslice „2“
14
3 Tvorba fontu 3.1 OpenType OpenType je formát určený k popisu počítačových písem. Z počátku byl vyvíjen společností Microsoft [39]. Později se připojila firma Adobe [38], která do této doby tvořila vlastní druh písmového souboru. Nakonec v roce 1998 vznikl nový formát, který spojil pozitivní složky z obou doposud vyvíjených technologií. Během let se stal OpenType jedním z nejvíce využívaných formátů. Společnost Adobe do něho převedla všechny své fonty do roku 2002. Nyní většina tvůrců písma tvoří fonty právě v tomto formátu. Mezi výhody OpenType patří jeho přenositelnost mezi operačními systémy, která do jeho vzniku nebyla a fonty bylo nutné převádět pomocí různých programů. Přenositelnost byla původně zamýšlena hlavně mezi systémy Macintosh a Windows. Nyní lze využít tento formát i v různých linuxových distribucích. Dále je důležitá podpora nelatinkových písem, tzv. „Extended language support“. Má dva hlavní přínosy. Tím prvním je možnost vytvořit font, který obsahuje nejen latinkové znaky, ale například i azbuku v jednom souboru. Díky tomu, že je tento formát založen na Unicode kódování, může obsahovat velké množství znaků. Lze uložit i rozsáhlé písmové systémy, jako jsou čínština, hebrejština, hindština a podobné. Klasický PostScriptový font mohl obsahovat pouze 256 znaků, u OpenType jsme omezeni 65 000 znaky. Další důležitá vlastnost se nazývá „Advanced Typography“ – pokročilá typografie. Patří sem mimo jiné možnost využívat ligatury, skákavé číslice nebo alternativní zápisy znaků. V mém písmu jsou například dvě různé varianty znaku R. Také lze písmo doplnit o zlomky, šipky a různé ornamenty. V kvalitních písmových rodinách bývají například i samostatné varianty pro horní a dolní index, jelikož počítačem uměle zmenšené znaky mohou kromě celkového vhledu textu narušit i jeho samotnou čitelnost. Jediným omezením formátu OpenType je, že ho musí podporovat koncová aplikace. Jeho plná podpora je většinou pouze u komerečních profesionálních grafických a sazečských programů. Výjimkou ale může být například sázecí program LaTeX.
15
3.2 Převod znaků do programu FontLab Tvorbu vlastního fontu jsem realizoval v programu FontLab Studio 5. Import znaků do tohoto programu je možný několika způsoby. Patrně nejednodušší je použít klasický postup „copy & paste“, případně importovat soubor ve formátu EPS1. Protože jsem měl všechny soubory uložené v základním formátu Adobe Illustratoru, musel bych je do EPS nejprve převést, což by pro mě byl zbytečný krok navíc. Ani kopírování znaků se neobešlo bez menších obtíží. Znak se totiž do FontLabu vložil na stejné souřadnice a ve stejné velikosti jako byl v Illustratoru. Abych měl znaky správně zarovnané na účaří, musel jsem je všechny před kopírováním přesunout tak, aby jejich účaří v Illustraturu mělo na ypsilonové ose hodnotu 0. Úpravu velikosti jsem provedl až po přenesení nástrojem pro změnu velikosti v panelu transformací. Také je důležité do FontLabu přenést písmovou osnovu, která je zde reprezentována vodítky s popisky.
obr. 20: Vložení znaku „a“ do programu FontLab
1 Encapsulated PostScript
16
3.3 Kerning Tento výraz se do češtiny překládá jako „vyrovnání“. Dříve se při klasické sazbě používal termín „justování“, případně „justáž“. Jedná se o důležitou vlastnost, kdy opticky vyrovnáváme vzdálenosti mezi sousedními znaky tak, aby nám nevznikaly mezery, které by při četbě působily rušivě. Tato vlastnost je určena šířkou, kterou mají nastavenu jednotlivé znaky. Nejedná se zde o celkovou šířku kresby, ale o rozměr, který určujeme při vytváření každého znaku. Potom se upravují páry, u kterých základní nastavení není vyhovující. Hodně patrné je to například u spojení písmen LT nebo VA. Toto vyrovnání dvou sousedních písmen se nazývá „Par-Wise Kerning“ [41]. Každý kvalitní písmový soubor by měl kerningová data obsahovat.
obr. 21: Nastavení kerningu u písma Adobe Garamond Pro – vlevo „optical“, vpravo vypnuté
3.4 Další znaky Diakritika Nevytvářel jsem kompletní sadu všech diakritických znamének. Soustředil jsem se na znaménka, která jsou běžně užívána v češtině (háček, čárka) nebo se často vyskytují v česky psaných textech (přehláska). Postupoval jsem podobně jako u tvorby ostatní znaků. Opět jsem se snažil co nejvíce dodržet vlastnosti psacího nástroje. Prvotní reprezentaci jsem vytvořil aplikací štětce v Illustratoru a tu jsem po upravení přenesl do programu FontLab. Při práci se znaménky poskytuje tento program velmi příjemné ulehčení. Při kliknutí na ještě nevytvořený znak, ho automaticky vytvoří z již existujících složek. Potom stačí už jen lehce upřesnit pozici akcentu a výsledný znak je hotový.
17
obr. 22: Ukázka akcentů aplikovaných na znaky „u“ a „U“
Na obrázku si můžete všimnout, že znaménko „grave“ (opačná čárka) jsem vytvořil pouhým zrcadlovým převrácením již zmíněné čárky. Nejdříve jsem se tento akcent snažil vytvořit aplikací štětce, ale výsledné znaménko bylo příliš silné a neodpovídalo ostatním znakům. Proto jsem od této snahy nakonec upustil a využil dříve vytvořené čárky.
Ligatury Postup byl podobný jako u diakritických znamének. Stačilo poklikat na prázdnou položku a ta se automaticky vytvořila ze znaků, které měla obsahovat. U ligatur ale bylo potřeba ještě upravit kresbu výsledného znaku. Jelikož jsem se se složitějšími úpravami v programu FontLab příliš nesžil, přenášel jsem tyto znaky zpět do Illutratoru, kde jsem vytvořil konečnou podobu ligatury. Oproti diakritickým znaménkům jsem zde měl některé podklady dostupné z původního rukopisu. Mohl jsem tedy vycházet i z předlohy.
obr. 23: Ukázka ligatur „fj“ a „fl“
18
Ostaní Aby bylo možné font plnohodnotně používat, bylo ještě potřeba vytvořit další znaky, zejména interpunkční znaménka. Kromě základní interpunkce (tečka, čárka, otazník a vykřičník) jsem také vytvořil členicí znaménka – různé druhy uvozovek, pomlčky, závorky a jiné. Mimo to jsem přidal i základní znaky pro sazbu matematických výrazů. Výsledný font má celkem 168 znaků.
obr. 24: Ukázka – interpunkční znaménka
obr. 25: Ukázka – matematické znaky
19
4 Písmo na webových stránkách 4.1 Standardní písma V roce 1996 iniciovala společnost Microsoft projekt na vytvoření skupiny standardních písem, které se budou používat na internetu, pod názvem Core fonts for the Web. Tento projekt skončil roku 2002, údajně z důvodu častého porušování licenčních práv. V zásadě šlo o to, že společnost Microsoft vytvořila několik fontů ve formátu, který mohl být použit i na jiných operačních systémech než Windows. Tento balíček obsahoval celkem devět písem plus tzv. dingbat1 font Webdings. Z těchto fontů se většina používá dodnes. V této kapitole uvádím shrnutí těchto písem, pro které jsem čerpal podklady převážně ze stránek společnosti Microsoft [25] [26] a Wikipedie [24]. Jsou zde popsána všechna tato písma, kromě Webdings, jedná se sice o font, ale neobsahuje písmové znaky.
*
Andale mono Také se používá název Andalé Mono. Jde o bezserifové neproporciální písmo navržené pro použití v terminálu a v prostředích na vývoj softwaru. Vytvořil ho Steve Matteson ve společnosti Monotype jako součást rodiny písem Andalé. Písmo bylo distribuováno naposledy s programem Internet Explorer 5 a v novějších verzích operačního systému Windows již není obsaženo. Oproti tomu je distribuováno s Apple Mac OS X. To je také jeden z důvodů, že se toto písmo na webových stránkách příliš nepoužívá, protože je méně rozšířené mezi koncové uživatele. Pro jeho dobrou čitelnost a snadno rozlišitelné znaky, je ale stále používáno v editorech a vývojových prostředích určených k programování. Na internetu se neproporcionální písma využívají převážně k psaní zdrojových kódů. Nyní je častěji využívanou bezserifovou alternativou písmo z rodiny Lucida – Lucida Console.
1 dingbat – ozdobný znak v textu, dingbat font – font obsahující symboly a obrázky na pozicích alfanumerických znaků
20
Arial Jedno z nejčastěji používaných písem, které vytvořili Robin Nicholas a Patricia Saunders v roce 1982 jako obdobu k oblíbené Helvetice. Jedná se o proporciální bezserifové písmo, které je dobře čitelné i v malých velikostech. Svou oblibu si získalo také z důvodu, že je z celé rodiny distribuováno více řezů než u ostatních písem. Kromě základního, kurzívy a tučného řezu je dostupný extra tučný a zúžený řez ve více variantách. Na internetu je dobře použitelný na texty, pro které je málo místa. Jelikož díky své malé šířce nezabere příliš plochy, je dobře použitelný v různých menu a na dalších místech, kde musíme řešit problém s nedostatkem prostoru. Samozřejmě je možné s ním vysázet i delší text určený pro obrazovku, ale zde není vhodné ho používat ve velikostech menších než 12 bodů.
Comic Sans MS Toto proporcionální bezserifové písmo, které navrhl Vincent Connare, bylo vydáno v roce 1994 společností Microsoft. Původní účel bylo imitovat, jak název napovídá, komiksové písmo a použít ho v komiksových bublinách. Comic Sans se těší mezi typografií netknutými lidmi velké oblibě a stal se nadměrně používaným až zneužívaným – od logotypů firem přes různé reklamní letáky až po jídelní lístky. Z těchto důvodů vznikla i iniciativa Zakažme Comic Sans1. David Grudl ho na svých stránkách [22], kde srovnává internetové fonty, velmi výstižně charakterizuje jako „veselé oblé znaky“. Na internetu není toto písmo příliš používané kvůli jeho horší čitelnosti v menších velikostech. Většinou se jeho aplikace omezuje pouze na titulky a nadpisy. Jedno z mála elegantních použití je například na webových stránkách komiksového nakladatelství Crew2, kde je užito právě na zvýraznění titulků. Také je možné ho vidět na různých stránkách určených dětem.
1 www. bancomicsans.com – Ban Comic Sans 2 www.crew.cz – Světové komiksy česky
21
Courier New Písmo Courier bylo navrženo Howardem Kettlerem v roce 1955. Objednala si ho společnost IBM pro použití v psacích strojích. Jeho následovník Courier New byl poprvé uveden s operačním systémem Windows 3.1. Oproti Courieru má přepracovaná interpunkční znaménka, která jsou v nové verzi ztmavena. Jedná se o neproporciální serifové písmo a má podobné využití jako Andalé Mono, tedy pro prezentaci zdrojového kódu. V malých velikostech je z důvodu přítomnosti serifů hůře čitelné.
Georgia Georgia byla navržena v roce 1993 Matthew Carterem pro společnost Microsoft, která ji vydala v roce 1996, jako serifový font určený k zobrazení na monitoru doplňující bezserifovou Verdanu. Díky relativně velké střední výšce minusek je dobře čitelná i v menších velikostech. Jedná se o alternativu k častěji používanému fontu Times New Roman, oproti kterému má tmavší kresbu a delší serify. Na internetu se serifová písma z důvodu horší čitelnosti u delších textů příliš nevyužívají a ani Georgia není vyjímkou. Její hojné užití naopak můžeme sledovat v nadpisech a titulcích. Další důležitá vlastnost je, že jako jediné ze základních písem používá skákavé (minuskové) číslice. Ty při vhodném použití dokáží zatraktivnit i velmi jednoduchou webovou stránku, jelikož jsou na internetu něco exotického.
22
Impact Impact, v překladu bychom řekli náraz nebo úder, je velmi tmavé písmo, které navrhl Geoffrey Lee v roce 1965. Toto bezserifové titulkové písmo má velmi široké linie a jeho střední výška dosahuje téměř tří čtvrtin výšky kapitálek, přičemž samotné znaky jsou velmi úzké a stejně tak je minimální i proklad mezi nimi. Kombinace těchto vlastností ho diskvalifikuje při použití na webové stránce, protože prohlížeče nejsou schopny na obrazovce toto písmo správně zobrazit a to i ve větších velikostech. Z důvodu špatné čitelnosti se tedy na internetu téměř nepoužívá.
Times New Roman Serifové písmo pro britské noviny The Times navrhli Stanley Morison a Victor Lardent. Poprvé bylo vydáno v roce 1932, do dnešní doby bylo díky vývoji tiskových technologií ještě několikrát upraveno. Písmo má bohatou historii a nesporné kvality. Bohužel kvůli jeho velké rozšířenosti, které také napomohla jeho přítomnost v kancelářském balíku společnosti Microsoft (MS Office), kde byl nastaven jako primární font, se stal velmi okoukaným a zevšedněl. Jeho použití na internetu je podobné jako u výše zmíněného fontu Georgia, oproti které je ale v menších velikostech hůře čitelný. Times New Roman je konzervativní font a můžeme ho vidět použitý v nadpisech na zpravodajských serverech nebo stránkách různých institucí.
Trebuchet MS Jedná se o další písmo od Vincenta Connare (Comic Sans MS) navržené pro společnost Microsoft v roce 1996. Písmo je součástí mnoha produktů společnosti Microsoft a je také distribuováno s operačním systémem Apple Mac OS X. Lze tedy předpokládat, že je všeobecně rozšířen
23
mezi uživateli. Connare toto písmo navrhoval hlavně se zaměřením na dobrou čitelnost na obrazovce ve velkých i malých velikostech. Bohužel v nejmenších velikostech byl omezen rozlišením obrazovky – znak bylo možné nakreslit pouze omezeným počtem způsobů. Toto bezserifové písmo má několik charakteristických znaků, podle kterých je snadno rozpoznatelné. Nejvýraznější jsou skloněné dříky písmena M, dále například snížená příčka u písmena A, nedotažené tahy u číslic 6 (resp. 9) a výrazná je také typická nedotažená kresba u g. Trebuchet MS se na internetu příliš nepoužívá, ale to neznamená, že je nepoužitelný. Hlavní důvod je ten, že dříve nebylo možné v prohlížeči zobrazit vyhlazované fonty. Tím zanikly charakteristické znaky a byl snadno zaměnitelný s jinými bezserifovými písmy. Nyní, když už je vyhlazování možné, vynikne hlavně v nadpisech, ale lze ho využít i pro běžný text.
Verdana Verdanu navrhl Matthew Carter (Georgia) a v roce 1996 byla vydána společností Microsoft. Byla vytvořena pro zobrazení malého písma na obrazovce. Má větší střední výšku a znaky jsou širší, což způsobuje, že písmo je velmi světlé a dobře čitelné i v delším textu. Tento bezserifový font je právě často používaný u těchto delších textů v malých velikostech. Méně vhodné je již její použití u titulků a nadpisů, kde působí roztahaně. Jako alternativu lze v titulku použít font Tahoma, také vytvořený Matthew Carterem, který má užší kresbu, ale jinak je Verdaně velmi podobný.
24
4.2 Práce s písmem za použití CSS CSS1 neboli kaskádové styly, umožňují oddělit vzhled dokumentu od jeho struktury. V první části této kapitoly pouze zmíním postup, jak správně zapsat vlastnost kaskádových stylů tak, aby se font zobrazil korektně všem uživatelům. V další části rozeberu možnosti připojení vlastního fontu pomocí CSS a jeho následného zobrazení na webové stránce.
* V předchozí kapitole jsem uvedl, která písma můžeme s klidným svědomím využít pro zobrazení na internetu. Jelikož při vykreslování obsahu stránky jsou písma načítána z počítače uživatele, můžeme také použít i jiná písma v závislosti na cílové skupině uživatelů. K definování písmové rodiny, kterou bude zobrazena nám slouží vlastnost font-family. Pro ilustraci uvedu příklad. font-family: "Trebuchet MS", Arial, sans-serif;
Tento zápis zajistí, že nejdříve se prohlížeč pokusí zobrazit text písmem Trebuchet MS, pokud není dostupné tak písmem Arial. Nyní se dostáváme k velmi důležité části a to definici sans‑serif (bezserifové písmo). Kdyby totiž prohlížeč neměl dostupný ani font Arial a jako poslední položka nebylo napsáno sans-serif, zobrazil by text písmem, které má nastavené jako základní. Většinou to bývá Times New Roman, případně jiné serifové písmo. Pokud tedy není úmyslem tvůrce nechat vybrat font přímo prohlížečem, je dobré definovat obecnou rodinu písem, kterých je ve specifikaci CSS [30] uvedeno pět. • serif • sans-serif • monospace • cursive • fantasy
1 Cascading Style Sheets
25
Z vlastní zkušenosti doporučuji používat pouze první tři. Pokud je definována obecná rodina jako serif, je stránka většinou zobrazena písmem Times. Sans-serif bývá zase vyhodnocen jako Arial nebo Helvetica. Obecná rodina monospace určuje jako font neproporciální písmo, zpravidla Courier. Cursive by měla definovat některý z kaligrafických fontů, ve specifikaci jsou uvedena písma jako Caflisch Script, Adobe Poetica, Zapf-Chancery, aj. Bohužel, zde už není interpretace tak přesná a na stejném počítači v různých prohlížečích jsou různá písma. Na operačním systému Windows Vista v prohlížeči Firefox a Opera je to písmo Comic Sans. V Internet exploreru (dále jen IE) je to grotesk, který jsem nedokázal určit. Že jde o grotesk by nebylo tak strašné, zásadní chyba ale je, že vybraný font má špatně zobrazené některé znaky s diakritikou. Ve verzi IE7 a IE8 jsou tyto znaky nahrazeny písmeny z rodiny Times a ve starší verzi IE6 nejsou zobrazeny vůbec, resp. jsou místo nich obdélníky. Poslední obecnou rodinou je fantasy, kde je to ještě horší než v předchozím případě (Firefox – neproporciální písmo, Opera – grotesk, IE – kaligrafické písmo, opět bez diakritiky). U definování rodiny fontů je ještě potřeba zmínit zápis víceslovných názvů, které je potřeba zadávat v uvozovkách, což ještě není tak zásadní. Ale může zde vzniknout problém, že na různých operačních systémech, někdy i různých počítačích se můžou stejná písma jmenovat odlišně. Na předposledním místě je pouze „lucida“, jako alternativa pro linux, kde ji spíše nalezneme pod tímto názvem a nakonec pokud uživatel ani jeden z vypsaných fontů mít nebude zajistíme, aby se zobrazilo alespoň bezserifové písmo. font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", lucida, sans-serif;
Před více než deseti lety vyšla specifikace CSS verze 2 [28], ve které bylo uvedeno nové pravidlo @font-face na připojení libovolného fontu. Paradoxně jediný prohlížeč, který ji podporoval byl IE4. IE uměl pracovat pouze s jediným formátem Embedded OpenType (EOT), což byl proprietární formát vytvořený společností Microsoft. Tento formát jste mohly vytvořit z existujícího TrueType fontu pomocí programu Microsoft‘s Web Embedding Fonts Tool. Ostatní prohlížeče tuto vlastnost nepodporovaly a i když se IE na trhu internetových prohlížečů dařilo, tato vlastnost pro připojení vlastního fontu se neuchytila. Byla odstraněna v následující revizi CSS 2.1. Jedním z důvodů mohlo být, že v té době bylo velmi pomalé připojení k internetu a stahovat navíc třeba i 50 kB zbytečně zatěžovalo připojení uživatele. V současné době je připravována již třetí verze specifikace pro kaskádové styly [29], kam se pravidlo @font-face opět vrací a umožňuje připojovat TrueType i OpenType fonty. Dnes už
26
je podporováno prohlížečem Safari od verze 3.1, respektive jeho zobrazovacím jádrem WebKit, nad kterým je postaven. Webkit jádro používá také prohlížeč Google chrome a bude využito také v nové verzi prohlížeče Maxthon, takže podpora by měla být časem i v těchto prohlížečích. Mimo jiné se podpora připravuje i pro prohlížeč Opera (verze 10) a Mozilla Firefox (verze 3.5), která je zatím v testovací verzi, ale tuto vlastnost již také podporuje. Jak jsem již uvedl výše Internet Explorer, tuto vlastnost podporuje od verze 4, bohužel i poslední vydání (IE8) stále podporuje pouze fonty v jeho formátu EOT. To by možná nebyl pro kodéra webových stránek tak velký problém, jelikož už si zvykl na psaní dvou různých kaskádových stylů – pro IE a pro ostatní prohlížeče. Podle mne bude ještě několik let trvat, než budou prohlížeče podporující tuto vlastnost dostatečně rozšířeny. Také je stále oficiální specifikace CSS 2.1, ze které bylo pravidlo @font-face odstraněno. Podívejme se tedy jak připojování fontů vlastně funguje. Na jednoduché ukázce je zdrojový kód webové stránky, která vypíše připojeným písmem „Muj Font“ text: „Základní řez písma Můj Font. Tučný řez písma Můj Font.“ Druhá věta bude zobrazena tučně. Prohlížeč implementující CSS 1 (nebo 2.1) , který nepodporuje pravidlo @font-face, ignoruje obsah mezi složenými závorkami tohoto pravidla. Snaží se u uživatele najít font s názvem „Muj Font“, pokud se mu to nepodaří, je nahrazen některým fontem z obecné rodiny sans-serif. V případě, že prohlížeč podporuje CSS 2 (nebo 3) je písmo nejdříve hledáno právě v pravidlech @font-face. Pokud je zde písmo nalezeno, použije se font, který je na dané adrese. V opačném případě se postupuje stejně jako u CSS1. příklad v příloze (priklady/font-face/)
V pravidlu pro připojení fontu můžeme také dalšími vlastnostmi určit o jaký se jedná řez. Je možné nastavit například tučný řez nebo kurzívu. V předchozím případě je připojena ještě tučná varianta písma. Na výpisu bude tedy druhá věta tučně. V případě, že by neexistoval soubor mujfont-bold.otf deklarace fontu bude neplatná a použije se písmo z bezserifové rodiny. Naopak pokud budeme mít definován pouze základní řez a v textu budeme chtít zobrazit tučné písmo případně kurzívu, bude tento text vypsán základním řezem. Další vlastností je src, která určuje cestu, kde se font nachází. Ale můžeme jí definovat i více hodnot, například formát písmového souboru nebo zda se má použít uživatelův font. src: local("Helvetica"), url("mujfont.otf") format("opentype");
Pokud je zadáno local, je nejdříve hledáno písmo Helvetica u uživatele, když tímto fontem nedisponuje, použije se mujfont.otf. A nakonec formát určuje typ souboru OpenType, TrueType, Embedded OpenType. Níže uvedené ukázky jsou screenshoty z prohlížeče Safari 4 Beta spuštěném na OS Windows Vista. Na obrázcích je písmo Liber horarum ve velikosti 80 a 18 bodů (ukázku můžete najít na přiloženém cd). Nejdříve jsem byl kvalitou zobrazení zklamán, jelikož písmo bylo na první pohled zubaté a v menší velikosti znaky působily jako by byly rozpité. Říkal jsem si, že kdyby zobrazená písma měla být vykreslena tímto způsobem, bohatě bych si vystačil se stávajícími fonty a žádná jiná kvalitní písma bych nemusel takto dehonestovat. Nahlédl jsem proto do nastavení Safari, kde jsem hned v druhé záložce Appearance (vzhled) objevil položku pro nastavení vyhlazování, kde bylo nastaveno Windows Standard. Z dalších čtyřech možností vyhlazení byly všechny mnohem lepší. Záleželo zde spíše na vkusu a jednotlivých písmech, která jsem zkoušel. Druhý obrázek je s vyhlazením nastaveným na Light.
28
obr. 26: Zobrazení písma LiberHorarum v prohlížeči Safari 4.0 s vyhlazením „Windows standard“
obr. 27: Zobrazení písma LiberHorarum v prohlížeči Safari 4.0 s vyhlazením „Light“
Závěrem musím zmínit největší překážku při rozšiřování tohoto způsobu zobrazování písma. Není jím ani tak různá podpora v prohlížečích, jako samotné zobrazované fonty. Ty většinou podléhají různým licencím. Například takto nemůžeme použít ani základní fonty systému Windows, jako je třeba Arial, podléhajícím smluvním pravidlům. Na internetu ale vznikají iniciativy, můžu uvést třeba WebFonts [31], které se snaží shromažďovat fonty, vydané s licencí, která tuto využití touto cestou dovoluje. Musím říct, že jich stále nemají příliš mnoho. Problém také je, že když použijete font zdarma, bez licence výslovně umožňující jeho šíření, budete také jednat protiprávně. Z toho vyplývá, že vlastně máme k dispozici velmi málo fontů, které ještě nemusí vyhovovat našim potřebám. A když nemůžeme použít písma, které chceme, vrátíme se opět k fontům standardním, nebo použijeme na vytvoření stránky jinou technologii, kde tyto licenční problémy nejsou. Ale i zde se blýská na lepší časy, jelikož někteří autoři kvalitních písem, je povolují užívat přímo pro připojování přes @font-face. Většinou je to pod podmínkou,
29
že do stránek vložíte odkaz na autora písma a copyright. Teprve čas ukáže, zda se tento způsob používání fontů uchytí. Jak jsem již psal výše, nepředpokládám, že to bude v nejbližších letech.
4.3 Nahrazení textu obrázkem V anglických zdrojích můžeme tento způsob vyhledat pod souslovím Image replacement. Na první pohled se může zdát, že na nahrazení textu obrázkem není nic složitého. Není to tak úplně pravda, jelikož se jedná o jednu z nejstarších technik zobrazení rozmanitých písem. Proto existuje mnoho různých triků a způsobů vylepšení. Nejednodušší možnost je místo textu přímo vložit obrázek, u kterého nesmíme zapomenout vyplnit atribut alt – tedy alternativní text. Pokud obrázek obsahuje delší text použijeme atribut longdesc, kde uvedeme adresu s popisem obsahu. Je to sice snadné řešení, ale není to příliš praktické z hlediska uživatelské přívětivosti. Není možné kopírovat text. Nemůžeme si text přiblížit. Když je vypnuto zobrazení obrázků, tak v lepším případě vidíme pouze obsah atributu alt, v horším ani nevíme, že tam nějaký obrázek byl. Ani s ohledem na optimalizaci pro vyhledávače není toto řešení ideální. Máme totiž text, který by měl být v kódu stránky, aby si ho mohl vyhledávací robot přečíst, zobrazen pouze obrázkem. Vylepšeným řešením je mít text napsaný ve stránce a ten potom překrýt obrázkem. To nám výše uvedené nevýhody vyeliminuje. Tato technika jde snadno aplikovat pomocí kaskádových stylů, kde vytvoříme objekt, který bude obsahovat již zmíněný text i obrázek. (priklady/image-replecemant)
Zde jde o třídu overImg, která je následně aplikována na element
. Důležité je nastavit position na relative (případně absolute), je to z důvodu, že vložené elementy, které mají pozici nastavenou absolutně, se odkazují na nadřazený element s nastavenou pozicí. Pokud by jsme na toto zapomněli, obrázek by v uvedeném příkladě utekl do levého horního rohu obrazovky, takto bude zobrazen v nadřazeném elementu
. Zbylé vlastnosti třídy overImg jsou zde kvůli tomu, aby nám text, nepodtékal pod obrázkem. Nastavením velikosti a vlastnosti overflow:hidden zajistíme, že text nebude zobrazen mimo nadřazený element. Vlastní překrytí je potom zaručeno nastavením pozice obrázku do horního levého rohu nadřazeného elementu. Tento způsob nám někdy nemusí úplně vyhovovat. Při kopírování textu se totiž do schránky vloží i obrázek a při tisku se ve většině prohlížečů bude tento obrázek tisknout. Pokud to takto nechceme musíme buď vytvořit speciální styl pro tisk nebo obrázek do stránky vložit jinak. Místo vložení elementem img použijeme například span, ve kterém bude obrázek jako pozadí. .overImg span.bgImage { position:absolute; top:0; left:0; width:600px; height:190px; background: url(files/fontface-light.png) no-repeat top left; }
Využívání, první nebo druhé možnosti, je různé. Jde zde spíše o zvyk a každý používá, co si oblíbil. Já například první možnost častěji využívám při překrývání logotypů s nějakým sloganem, ze kterých je většinou odkaz na úvodní stránku. Zvykl jsem si obrázek dle potřeby vložit do odkazu, bez další potřeby psát jiné styly. Naopak druhou možnost používám spíše v textovém obsahu stránky, kde slouží většinou jako oživovací prvek. Dále se tato technika často využívá při vytváření menu, kdy chceme po přejetí myší vyměnit obrázek pozadí položky bez použití stahování obrázku předem, například použitím Javascriptu. Kód vložení je velmi podobný, ale vkládáme obrázek složený ze dvou částí. V horní části je položka, jak bude zobrazena při načtení menu a v dolní polovině je obrázek, který uvidíme při přejetí myší. Změnu obrázku zajistí jednoduché pravidlo. To změní pozici pozadí a zarovná ho od vzhledem ke spodní hraně položky. Zajímavé se může zdát, proč je v HTML kódu dvakrát napsáno „Menu-Položka“. První použití je, když má uživatel na stránce vypnuté obrázky, tak uvidí právě tento text. V případě, že by měl vypnuté i styly, zobrazí se oba texty, kde druhý bude odkaz. Ten je zde kvůli vyhledávačům, aby věděly s čím si mají daný odkaz spojit. Problém odpadá pokud použijeme obrázek bez textu pouze jako pozadí a text necháme zobrazen.
Nahrazení textu obrázkem je jedna z nejméně náročných technik jak zobrazit písmo na webových stránkách. Pokud je dobře použita nesnižuje přístupnost stránek, ani jejich pozice ve vyhledávačích. Ale jak jsem uvedl, je spíše využitelná na menší části stránky a u webů, které často nemění svůj obsah. Snažil jsem se vybrat jednoduché příklady, na kterých je možné snadno předvést použití této techniky a které zároveň korektně fungují na nejpoužívanějších prohlížečích. Na internetu lze dohledat mnoho dalších úprav a modifikací tohoto způsobu.
4.4 Cufón Jedná se o rychlé nahrazení textu pomocí Javascriptu a VML1, které probíhá na straně uživatele. VML je jazyk založený na XML, kterým lze popisovat vektorovou grafiku. Něco podobného jako dnes častěji využívaný SVG2, který vznikl právě až po VML. Na oficiálních stránkách [33] s dokumentací této metody jsou zmíněny čtyři výhody. V prohlížeči nejsou potřeba žádné doplňky, jedinou podmínkou je mít zapnutý Javascript. Tvůrci udávají, že je funkční v těchto prohlížečích: Mozilla Firefox od verze 1.5, Safari od verze 3, Opera od verze 9.5, Google Chrome a také v IE od verze 6. IE se ale při testování nechovalo úplně korektně, nezobrazilo některé elementy v zadaném fontu a vypisovalo chybu. Třetí bod je snadné použití, které je pravdivé, jelikož při prvním použití mně fungovalo vše, jak jsem chtěl. A poslední je rychlost – rychlé to 1 Vector Markup Language 2 Scalable Vector Graphics
32
opravdu je, stránka se zobrazí hned připojeným fontem. Kromě prvního načtení, kdy je třeba načíst i soubor s písmem, tam je někdy viditelné přebliknutí ze základního písma. Jak tedy Cufón pracuje. Nejdříve potřebujeme převést font do reprezentace, kterou bude možné zpracovat JavaScriptem. Jednoduše zpracujeme fonty generátorem1, který font převede přes SVG a VML do JavaScriptové podoby využívající JSON2. Nyní jsou podporovány tyto formáty TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) a ještě jsou podporovány PostScriptové fonty. V generátoru si dokonce můžeme vybrat, které znaky nám budou stačit – v češtině si vystačíme se základní latinkou (basic latin) a jejím doplňkem (latin-1 supplement). Takto vytvořený soubor jednoznačně popisuje metriky písma. Zde musím opět upozornit na licence. Pokud tedy písmo nemá vhodnou licenci nebo nemá výslovně vyjádřeno, že je možné je zobrazovat tímto způsobem, nemůžeme ho použít (viz. druhá část kapitoly 4.2). Když máme připravený font stáhneme si ze stránek Javascript, který ho zobrazí. Potom nám už stačí napsat do stránky tento kód. (priklady/cufon)
Na prvním řádku připojíme Javascript, který nám zobrazí font připojený na druhém řádku. Potom uvedeme, které elementy chceme zobrazit uvedeným písmem. V tomto příkladu to je hlavní nadpis, ten bude zobrazen tučně, jelikož mnou vygenerovaný font obsahuje sloučené dva řezy (základní a tučný). Potom bude základním řezem zobrazen ještě text odstavců. Na první pohled se mi tato metoda velmi líbila. Je to jednoduchá alternativa, k připojování fontů pomocí @font-face. Při hlubším zkoumání, jsem ale našel několik nevýhod, které jsou značně limitující. Text jde sice kopírovat do schránky, ale při jeho označování není kopírovaný text zvýrazněn a kurzor je zobrazen jako šipka nebo přeškrtnuté kolečko. Další je zvětšení textu prohlížeči, nejdříve jsem myslel, že není na takto vložený text vůbec funkční. Po obnovení stránky jsem byl překvapený, když bylo písmo zvětšeno. Nastavení velikosti písma tedy probíhá pouze při načítání stránky. V prohlížeči Opera, který místo zvětšení textu přibližuje celou 1 http://cufon.shoqolate.com/generate/ 2 Javascript Object Notation
33
stránku, bylo s vektorovým písmem zacházeno jako s bitmapou, což nevypadalo příliš dobře. Naopak IE8 zobrazovalo font velmi pěkně. Dále mi vadilo, že při přepisování kódu prováděným funkcemi v souboru cufon-yui.js, může docházet ke změně stylů u základních elementů, jako je například span, a nepracuje to pod nějakou vlastní třídou. Zajímavé je také různé chování s různým typem specifikace XHTML dokumentu. S DOCTYPE 1.0 Transitional je špatně zobrazeno řádkování oproti 1.0 Strict, kde je správně. Poslední výtkou je, že se mi ho nepodařilo korektně zprovoznit na některých elementech pod IE, ale nejsem si jistý zda to nebylo nějakou mou chybou. I přes značný počet nevýhod bych se Cufón nebál použít na zvýraznění nadpisů a titulků. Většina těchto chyb se totiž na tak krátkém textu neprojeví, přesněji nebude odhalena. Naopak velkou výhodou je, že jediné co je potřeba k zobrazení písma je, aby měl uživatel zapnutý Javascript. Pokud by ho měl náhodou vypnutý, nestane se žádná tragédie. Záměna písma vůbec neproběhne a bude zobrazeno tak, jak jsme si ho nadefinovali pomocí základních fontů. Na závěr uvedu ještě alternativu, kterou je projekt typeface.js1. Pracuje na velmi podobném principu, ale nemá tak propracovaný generátor, který převádí fonty do Javascriptu a zatím podporuje pouze TrueType fonty.
4.5 sIFR Pravděpodobně nejznámější metodou pro zobrazení fontů na webových stránkách je Scalable Inman Flash Replacement, zkráceně sIFR. Jedná se o způsob nahrazení textu v HTML stránce (pomocí Javascriptu) dynamicky vytvořeným zástupcem v programu Adobe Flash. Z počátku byl vyvíjen Shaunem Inmanen a později se k němu připojili Mike Davidson a Mark Wubben. Aktuálně je na oficiálních stránkách [35] dostupný ve verzi sIFR 3. Seznam podporovaných prohlížečů je velmi podobný jako u výše zmíněného Cufónu, zahrnuje tedy všechny nejvíce rozšířené prohlížeče. Nyní nastíním ideu, jak tato metoda pracuje. Při načítání webové stránky se spustí javascriptová funkce, která zjistí, zda má uživatel nainstalovaný Flash player a zjistí jaké elementy jsme určily ke zpracování. Pokud není Flash dostupný nebo je vypnutý Javascript, stránka se zobrazí, tak jak je určeno v kaskádových stylech. Jinak Javascript začne procházet obsah stránky a načte si údaje o každé položce určené ke zobrazením jiným písmem. Potom jsou vytvořeny a umístěny flashové objekty na místo nahrazovaného textu, kterým je pomocí proměnné tento text předán. Nakonec je ve flashovém objektu vykreslen obsah pomocí Actionscriptu. 1 http://typeface.neocracy.org/
34
Než se ale pustím hlouběji do problematiky používání sIFRU je dobré zmínit, že jsem pracoval se verzi 3 vydání r436. Uvádím to zde, jelikož různá vydání nemusí být mezi sebou kompatibilní. Samotné použití, pokud se v něm člověk neorientuje, je oproti Cufónu složitější. Tam stačí vložit javascriptové soubory a potom vše nastavit pomocí CSS. Ale začneme od začátku, nejdříve opět potřebujeme vytvořit font. V programu Adobe Flash otevřeme soubor sifr.fla, ve kterém je textové pole, kam napíšeme zvoleným fontem alespoň jeden znak. Pokud uvedeme více řezů budou exportovány všechny do jednoho soubor. Nakonec ještě připojíme znaky s diakritikou pro češtinu. Nebo můžeme opět využít některý generátoru na internetu. V obou případech bude výsledkem swf soubor, obsahující zvolený font. Takto zkompilovaný font je binární soubor a tedy neobsahuje snadno dostupnou metriku písma. Různé licenční smlouvy tímto způsobem publikování fontu umožňují. Před použitím fontu je ale dobré si toto ověřit v licenční smlouvě, případně u prodejce nebo distributora. Nyní se již můžeme věnovat samotnému vložení fontu do HTML stránky. (priklady/sifr)
Ve stránce nejdříve připojíme potřebné soubory s kaskádovými styly a Javascriptem. Na konci CSS souboru můžeme nastavit styly potomkům třídy .sIFR-active. Jedná se o třídu, která se aktivuje pouze, když vložen Flash obsah do stránky. Důležité je upravování stylů
35
pod pravidlem @media screen, které nám určuje, že editované vlastnosti se projeví pouze na obrazovce, ne například při tisku stránky. Zde je podstatná vlastnost visibility nastavená na hidden, ta nám způsobí, že text pod Flashem neuvidíme. Kdybychom tuto vlastnost nenastavili pouze pro obrazovky, tak by i při tisku byl tento text neviditelný, což by mohl být problém. Potom už zbývá jen upravit javascriptový soubor sifr-config.js. Na prvním řádku připojíme vytvořený swf soubor, který obsahuje font, a zaktivujemeho pro další použití. Dále použijeme už jen přepisovací pravidla sIFR.replace, kde určíme font a element, na který se bude aplikovat. Pomocí kaskádových stylů můžeme tento text ještě naformátovat, tyto akce se již provedou ve Flashy. V sIFRU 3 je také zavedena podpora filtrů, která obsahuje program Flash 8. Pro ilustraci můžu uvést například filtr na vržení stínu nebo rozmazání. Celkově byla práce se sIFRem mnohem náročnější než s Cufónem. Hlavní rozdíl je, že u prvně jmenovaného musíme nastavovat styly pro nezobrazený i zobrazený text. Styly pro zobrazovaný text se navíc musí zadávat v Javascriptu, což také není příliš příjemné. Výhodou i problémem zároveň je, že sIFR je velmi robustní a poskytuje mnohem více možností a variant, které se musí nějak dát nastavit. Je zde lepší kopírování textu, je to sice malý pokrok, ale nad jednotlivými položkami je již správně zobrazený kurzor a vybraný text se zvýrazní. Naneštěstí je to možné jen mezi jednotlivými položkami, kdybychom jich chtěli vybrat více najednou opět je kurzor pouze šipka a text se nezvýrazní. Další společnou nevýhodou je problém při přibližování textu, který se nepřibližuje. U přibližování celé stránky je to lepší – text je vyhlazený v Opeře i v IE8. U tohoto prohlížeče byl jiný problém, při přiblížení se text nechtěl někdy usadit a stále skákal nahoru a dolů. Také zobrazování je pomalejší, při každém obnovení stránky chvilku trvá než se text zobrazí a správně naformátuje. V IE8 je to velmi markantní a pro uživatele až nepříjemné, v jiných prohlížečích jde pouze o přebliknutí. Další zajímavé chování bylo, že písmu nešla nastavit velikost větší než zhruba 90 bodů. Při vyšších velikostech už se zvětšovala pouze výška řádku a znak zůstával stejný. Celkově mají obě metody pro uživatele dost nepříjemných vlastností a je dobré je využívat s rozmyslem. Používání Cufónu je snadnější a rychlejší, ale neposkytuje tolik možností jako sIFR. Ty ale musí někdo složitě nastavit a celá práce je tak náročnější. Zároveň sIFR poskytuje větší množství fontů, které mohu takto zobrazit, bez porušení smluvních závazků, což je asi největší výhodou. Nesporným plusem obou je, že když nejsou podporovány prohlížečem zobrazí původní text. Pokud bych si měl vybrat bez ohledu na množství fontů, zvolil bych Cufón na menší projekty, kde se není třeba tolik zabývat optimalizací a jsou určeny spíš k estetickému požitku. Na větší projekty bych raději volil sIFR, protože když už je jednou implementován, práce s ním není tak náročná. Poskytuje také více možností pro případné změny a vylepšení. Také jsem s ním měl menší problémy v IE8. Celkově nemohu jednoznačně určit, co je lepší – nakonec
36
záleží pouze na tvůrci stránek, kterou metodu si zvolí a bude mu bližší. Důležité je, aby při jejím používání bral ohled na koncového uživatele, kde se musí zohlednit i to, že mnoho flashových objektů na stránce většinu prohlížečů zpomaluje. Na závěr bych ještě uvedl, že kvalitu sIFRu by určitě pomohlo zlepšit přepsání zdrojového kódu do novější verze Actionscriptu, jelikož verze 2 se již stává zastaralou. Verze 3 poskytuje další možnosti při formátování textů a programy v ní napsané jsou několikanásobně rychlejší. Zároveň je možné pomocí Javascriptu zjistit verzi Flash playeru u uživatele a pokud nebude mít verzi podporující Actionscriptu 3 (tedy Flash player 9 nebo novější), mohl by využít starší variantu.
4.6 FLIR Poslední ze známějších metod, kterou zde uvedu, je FLIR [36]. Celým názvem FaceLift Image Replacement. Tento postup vytvořil Cory Mawhorter, jako alternativu k sIFRu. Pracuje podobně jako předchozí metody, pomocí Javascriptu nahradí text ve stránce. Zde je ovšem rozdíl, že text je nahrazen obrázkem ve formátu PNG1, který je vygenerovaný pomocí PHP. Tento obrázek se při prvním vytvoření uloží na server, aby se omezilo zbytečné zatěžování serveru. Pro přesnost musím uvést, že se obrázky generují pro různé velikosti zobrazených písem a rozdílné prohlížeče. Tedy jeden téměř totožný obrázek můžeme mít vygenerovaný třeba desetkrát, pro každý prohlížeč, který navštívil stránky. Zajímavostí je, že při testování mého příkladu, kde jsem měl nahrazeno sedm položek, se mi při otevření v IE7 a potom v IE8 vygenerovalo devět obrázků. Tyto prohlížeče tedy využívaly pět stejných obrázků a dva jsou odlišné. Omezení použití FLIR je podmíněno pouze tím, že musíme mít k dispozici podporu PHP skriptů (autor doporučuje PHP ve verzi 5) a dostupnou GD2 knihovnu pro generování obrázku pro složitější písma se doporučuje knihovna ImageMagick. Některé webhostingy toto nemusí poskytovat. Nyní k samotnému použití. Po stažení beta verze 2.0 ze stránek autora a jejím rozbalení, jsem ze zalekl velkého množství souborů. Ale po prohlédnutí návodu jsem si oddychl, editovat stačí pouze dva soubory – vlastní stránku a soubor config-flir.php, ve kterém připojujeme naše písma. Po nastavení všeho potřebného, jsem zjistil, že mi to nefunguje, jelikož byla chyba v Javascriptu. Stáhl jsem tedy stabilní verzi 1.2, ve které již bylo vše bez problémů. 1 Portable Network Graphics 2 Graphic Draw
Nejdříve si v PHP připojím font, který budu používat a nastavím ho jako základní. Potom stačí do HTML souboru před konec elementu body vložit Javascript. Funkci FLIR.init předáme jako parametr cestu ke složce, kde se nachází soubor generator.php. Druhou funkcí zajistíme automatické aplikování FLIRu na nadpisy (h1 až h5). Jenom toto jednoduché nastavení stačí k nahrazení textů všech nadpisů na stránce obrázkem. Samozřejmě jsou k dispozici i další možnosti a úpravy. //CSS h1 {font-family: mujfont, sans-serif; color:#C00; font-size:70pt;} h2 {font-family: jinyfont, sans-serif; font-size:25pt;} //Javascript FLIR.replace('span', new FLIRStyle({ cFont:'mujfont' }));
Jednoduchým nastavením v CSS, se nyní bude nadpis h1 nahrazovat fontem mujfont v červené barvě a velikosti 70 bodů. Na nadpis h2 bude použit jinyfont, který musí být definovaný v souboru config-flir.php. Dále je možné takto pracovat i s jinými elementy než jsou nadpisy. Pomocí funkce FLIR.replace můžeme nastavit libovolný element nebo třídu. Celkově na mne působil FLIR velmi pozitivně. Rychlostně byl někde mezi sIFRem a Cufónem, který byl nejrychlejší. Trpí také podobnými neduhy při přibližování a kopírování. Subjektivně se mi zde text kopíroval o trochu lépe než v předchozích případech. Co bych mu ale vytkl, je špatné řádkování způsobené znaky, které přesahují základní účaří, jako jsou například j, p nebo g. Projevovalo se to u obrázku vloženého do obsahu vypsaného základním písmem, kdy
38
byl obrázek posunut nahoru. Stejný problém jsem, ale měl při formátování nadpisu „Facelift Image Replacement“, kde jsem chtěl mít první slovo červeně. Barva jde nastavit bez problémů, ale nadpis je zpracován jako dva obrázky, kde je druhý obrázek (obsahující znaky s dolními výběhy) vyšší a oba jsou zarovnány ke spodní hraně. To způsobí, že je první obrázek posunut dolů. Individuálně to je možné upravit pomocí kaskádových stylů, pro zautomatizování by ale bylo lepší upravit skript generující obrázky. Kromě toho se mi nelíbí nadbytečné generování téměř totožných obrázků, jejichž počet může vzrůst na opravdu velké množství. Také by bylo dobré, kdyby se již nepoužívané obrázky automaticky mazaly. Posledním problémem, který jsem objevil byly potíže se zobrazením v IE6. V testovacím programu, který emuluje tento prohlížeč se my nezobrazily ani obrázky ani text. Zkontroloval jsem to tedy na druhém počítači, kde si nechávám IE6 nainstalovaný. Při prohlížení stránky my nejdříve zůstal dlouho zobrazený ještě nenahrazený text. Když to vypadalo, že se začne něco dít prohlížeč mi spadl. Můj závěr zní, že i přes tyto problémy je to využitelná metoda a opět záleží pouze na tvůrci stránek, jestli si ji zvolí.
* Při psaní těchto kapitol mě napadla myšlenka na vylepšení, respektive upravení, těchto principů. V zásadě by šlo o to, že by již nebylo potřeba užívat Javascript na nahrazení obrázků. Jelikož velké množství stránek je dnes spravováno pomocí různých redakčních systémů a zároveň je většina stránek určena různými šablonami, které se při výpisu použijí. Bylo by tedy možné text nahradit už při jeho výpisu skriptem ze serveru a ne až po načtení stránky. To by nám zajistilo, že zde nebude žádné přeblikávání při načítání stránky. Samotná záměna by proběhla velmi jednoduše při výpisu obsahu a záleželo by na implementaci, zda by se text nahradil flashovým objektem nebo obrázkem. Já bych se spíše přiklonil k flashové reprezentaci, z důvodů její větší škály možností při zobrazování písma, které jsou uvedeny v následující kapitole. Případně by jsem zde volil pro někoho možná krkolomný postup. Vytvářel bych obrázek v PNG již při ukládání do databáze, ale opět bych pro to využil Adobe Flash player. V tom bych vybraný text zpracoval a následně bych jeho reprezentaci poslal skriptu, který by vytvořil konečný obrázek. Ten by se potom využíval při zobrazení ve stránce. Takové řešení by tedy vůbec nepotřebovalo využívat Javascript pro záměnu textu. Omezením zde je přítomnost Flash playeru, která by byla ovšem vyžadována pouze při ukládání položky do databáze. Koncoví uživatelé by ho již mít nemuseli. Jediný zásadní problém této implementace, který mě napadá, je zvětšení textu v prohlížeči. Muselo by se to pravděpodobně řešit opět pomocí Javascriptu, jelikož nevím o možnosti, kterou by skript na serveru byl schopen získat informace o velikosti písma u uživatele, respektive míru přiblížení.
39
4.7 Flash Text Layout Framework Jedná se systém zobrazování textu, který je implementován v Adobe Flash playeru od verze 10. Většina funkcí je tedy dostupná pouze při psaní aplikace v jazyku Actionscript 3. V předchozích kapitolách jsem se věnoval možnostem nahrazení písma pouze části obsahu, ale variantu vytvoření stránek technologií Flash jsem neuvedl. Poskytuje s poslední vydanou verzí opravdu velké množství různých řešení při formátování textu. Tvůrci stránek nejsou omezování možnostmi prohlížečů, ale pouze svou fantazií. Problémem může být optimalizace po vyhledávače a živatelská přístupnost. Je proto dobré mít i alternativní obsah v HTML. Rozhodně ne všechny stránky je vhodné vytvářet kompletně ve Flashy. Například pro portály a elektronické obchody to není úplně praktické řešení, i když ty jdou také vytvořit a s podobnými řešeními se můžeme setkat. Osobně preferuji Flash na produktové stránky, které mají za účel zaujmout, a idealní je také na stránky hudebních skupin, díky možnosti přehrávání audia, případně i videa. Ale zpět ke zobrazování textu a možnostem, které nám přináší Flash Text Layout Framework. Začnu přednostmi, které jsou uvedeny na oficiálních stránkách [20], kde jsou i příklady jejich použití. První z nich je podpora více než třiceti písmových systémů. Jsou mezi nimi například japonština, korejština, hebrejština a mnoho dalších. Můžeme tedy správně sázet text, který se čte opačným směrem (zprava doleva) nebo je orientovaný vertikálně. Tuto vlastnost při sazbě češtiny pravděpodobně nevyužijeme, ale je dobré o ní vědět. Další z věcí je sazba do sloupců. Ta je samozřejmě možná i pomocí HTML a CSS, kde je ale mnoho komplikací a neznám podobně jednoduché řešení jako ve Flashy. Zde stačí pouze vytvořit potřebné sloupce a zadat text, který se do nich automaticky vloží. Souvisí tím také podpora dělení slov, která je u užších sloupců, kde je text zarovnán do bloku, opravdu užitečná a výsledek vypadá velmi dobře. Oproti textu zarovnaném do bloku v HTML, kde vznikají obří mezery mezi slovy a u užších sloupců je takové zarovnání téměř nepoužitelné. Další možností sazby textu je, že se již nemusíme omezovat pouze na obdélníkové obaly námi vkládaného obsahu. To užijeme například při obtékání obrázků nebo vkládání textu do předem zvoleného tvaru. Pokračovat můžeme možnostmi využití kvalitních písem ve formátu OpenType a jsou podmíněny tím, zda nám používaný font poskytne znaky, které chceme zobrazit. U číslic například můžeme vybrat, zda je zobrazíme jako skákavé. Také můžeme zvolit, zda budou proporciální nebo ne. Toho můžeme využít například při výpisech tabulkových dat. Dále můžeme využívat ligatury, dokonce si můžeme vybrat zda zobrazíme pouze základní, většinou spojené s písmenem f (fi, fi, ff) nebo rozšířené se znakem s, případně c (st, ct).
40
U zobrazeného písma také můžeme nastavovat sílu vyhlazování a nenechávat to na prohlížeči a operačním systému. Písemům v menších velikostech je lepší nastavit vyhlazování slabší. Znak je potom ostřejší a lépe čitelný. U větších znaků potom záleží na vlastním pohledu na výsledek a také na použitém fontu. Poslední věcí, kterou zmíním jsou grafické úpravy a filtry, které v předchozích verzích Flashe nebyly možné. Dříve například nešlo u dynamického textu ani měnit jeho průhlednost. Nyní je možné aplikovat různé filtry – stíny, gradienty, rozmazání, vytlačení a další. Z mého pohledu je ale zajímavější podpora prolínání vrstev (blending mode), tak jak ji známe z pokročilých grafických editorů. Nyní máme možnost využít celkem patnáct různých variant a dosáhnout tak velmi zajímavých výsledků. Technologii Adobe Flash používám osobně rád, jelikož mi poskytuje více možností než tvorba stránek klasickým způsobem. Tvorba kvalitních stránek je ve Flashy mnohem náročnější, než v HTML řešení. To nám sice neposkytne tolik možností, ale velice ovlivní rozhodnutí klienta jaký postup zvolit. Většinou se z finančních důvodů pro Flash nerozhodne, i když by mu mohl poskytnout dobré řešení. Naopak, když finance nejsou překážkou, tak vznikají nedomyšlená řešení, jelikož klient chtěl, aby byly stránky hýbací. Po nějakém čase zjistí, že stránky jsou z hlediska použitelnosti neuspokojivé a nechají je předělat do HTML. Záleží tedy opět pouze na tvůrci stránek, který dané problematice rozumí, a dokáže zvolit pro daný případ nejvhodnější řešení.
4.8 Resumé Toto shrnutí jsem chtěl nejdříve napsat po kapitole o standardních webových fontech, jako zamyšlení nad tím, zda je těchto několik písem dostačují. Nakonec jsem se ho rozhodl napsat až po vyzkoušení metod, které nám umožňují využívat i jiná písma, jelikož jsem je před tím všechny tolik neznal. O některých jsem pouze věděl a nikdy jsem je prakticky nevyužil. Nyní nebudu mluvit o stránkách vytvořených kompletně ve Flashy, jelikož tam omezení při práci s písmy téměř neexistují. Jak jsem ale napsal dříve, Flash nelze použít na všechno. Všechny způsoby nahrazení textu, i když by byly sebelepší, jsou pouze náhražky. Jediný dobrý postup je tedy podle mne připojení fontu přes kaskádové styly, kde písmo není nahrazeno a zůstává stále tak, jak bylo do stránky vloženo. Bohužel v této době není využití tohoto postupu reálné. Z důvodů nedostatečné podpory v prohlížečích a nedostatku kvalitních písem s licencí umožňující jejich šíření. U prohlížečů nezbývá než čekat, zda jejich tvůrci tuto podporu implementují. U písem naopak záleží, jak se k tomu postaví jejich autoři nebo prodejci. Nebylo by špatné, kdyby například ke komplexnímu fontu vytvořili jeho „ořezanou“ verzi, kterou by bylo možné použít a takto šířit.
41
Oklikou se vrátím k odpovědi na otázku z úvodu, zda jsou standardní písma dostačující. Z mého pohledu na situaci, je odpověď ano. První důvod je, že už jsme si na tyto písma při prohlížení i vytváření webových stránek na internetu zvykli a víme jaké vlastnosti od nich můžeme čekat. Tato písma také byla vytvářena s ohledem na to, že budou používána na obrazovce. Další věc je, že jiné fonty se používají výhradně v nadpisech, na jiných elementech nejsou téměř k vidění. Proto si myslím, že nám stávající písma stačí, a když budeme chtít ozvláštnit nadpis, můžeme sáhnout k některé ze zmíněných metod. Já osobně si se stávajícími fonty vystačím, dokud nebude dořešeno připojení písma pro celý dokument pomocí kaskádových stylů. To také vidím jako budoucnost písma na webu.
42
5 Závěr Rekonstrukce písma se mi z počátku jevila, jako nenáročná záležitost. Postupně se však ukázalo, že tomu tak není. Při dalším studiu této problematiky jsem se utvrdil, že je propastný rozdíl mezi kvalitním profesionálním fontem a ostatními. Dnes je díky počítačům velmi zjednodušen celkový proces tvorby písem oproti dobám, kdy se musely ručně vytvářet kovové litery. Digitální písma nám ale na druhou stranu poskytují mnohem více možností a při jejich tvorbě nejsme omezeni sázecím strojem. Jak jsem již psal v jedné z předcházejících kapitol, můj font obsahuje celkem 168 znaků, což je zlomek oproti profesionálním písmovým souborům. Například písmo Adobe Calson Pro obsahuje 685 znaků a Adobe Garamond Pro dokonce 807. Zde si ještě musíme uvědomit, že se jedná pouze o jeden základní řez. U kvalitního fontu bývají zpravidla dostupné minimálně ještě dva řezy – kurzíva, tučný, ale nejsou výjimkou písma čítající i desítky řezů. Můj font je tedy z tohoto pohledu velmi chudý, byl však tvořen hlavně pro možnost sazby českých textů, proto mu chybí značná část u nás nepoužívaných znaků s diakritikou. Zpočátku jsem byl s mnou vytvářeným písmem velmi spokojený, jak jsem se ale hlouběji seznamoval s danou problematikou, objevoval jsem stále více nových chyb. Nejvíce problémů jsem měl s vyrovnáváním písma, se kterým nejsem úplně spokojen, ale s každou novou úpravou se objeví nový špatně zarovnaný znak. Také bych chtěl později, případně v další verzi písma, upravit některé znaky a oprostit je od stopy štětce, který mě u jistých znaků velmi limitoval. Ale jelikož jsem font tvořil na základě rekonstrukce z historické předlohy, cítil jsem povinnost vycházet z tahu štětce i u znaků, které v dané době neexistovaly. V druhé tématické části jsem se věnoval písmům na webových stránkách a možnostem, jak používat i nestandardní fonty s rozšířenými typografickými prvky. Bohužel, musím konstatovat, že zatím existují pouze dva použitelné způsoby, jak využít předností kvalitních fontů. První je zcela triviální – klasický obrázek. Druhý je už zajímavější, jedná se o využití technologie Adobe Flash, která nám poskytuje opravdu rozsáhlou podporu OpenType. Naneštěstí není možné využívat tyto způsoby v plné míře na většině webových stránek. Zajímavý je pohled do budoucnosti, zda se prosadí připojování fontů do klasických stránek a jestli tvůrci internetových prohlížečů implementují rozšířenou podporu formátu OpenType. Jedná se podle mě o vývoj správným směrem a doufám, že se podaří. Největším přínosem této práce pro mne bylo, že jsem začal písmo vnímat jinak než jako pouhého nositele textové informace. Pro toto rozhodnutí bylo důležité porozumět postupům při tvorbě písma i v historických kontextech. Kvalitní písmo pro mne dnes již není samozřejmostí a dokážu mnohem více ocenit práci tvůrců nejen „krásných písem“, ale i „krásných fontů“.
43
6 Literatura [01] MUZIKA, František. Krásné písmo I. 2. vyd. Praha: Paseka, 2005. ISBN 80-7185-7380-6. [02] MUZIKA, František. Krásné písmo II. 2. vyd. Praha: Paseka, 2005. ISBN 80-7185-740-8. [03] HLAVSA, Oldřich, WICK Karel. Typographia II. Praha: SNTL, 1981. [04] HLAVSA, Oldřich. Typografická písma latinková. Praha: SNTL, 1960. [05] MENHART, Oldřich. Tvorba typografického písma. Praha: SPN, 1957. [06] PÍPAL, Richard: Písmo a jeho konstrukce. Praha: SNTL, 1960. [07] BERAN, Vladimír a kolektiv. Typografický manuál. Praha: Kafka Design, 1999. [08] ŠTORM, František. Eseje o typografii. Praha: Revolver Revue, 2008. ISBN 978-80-87037-15-7. [09] HARRIS, David. Kaligrafie. Praha: Slovart, 2004. [10] VICHNAR, Jindřich, RAMBOUSEK Antonín. Původní československá typografická písma. Praha: Státní tiskárna, 1972. [11] Všeobecná encyklopedie. Praha: Diderot, 1999. 6. svazek. [12] MATĚJKA, Jiří. Elektoronická rekonstrukce písma Court Hand. Brno, 2005. Fakulta informatiky Masarykovy univerzity. Diplomová práce. [13] Manuscriptorium: Virtuální badatelské prostředí pro oblast historických fondů [online]. [cit. 2009-05-10]. Dostupný z WWW: [14] Psaní na pergamen [online]. [cit. 2009-05-10]. Dostupný z WWW: [15] Písmařské názvosloví (bývalá oborová norma) [online]. [cit. 2009-05-10]. Dostupný z WWW: [16] I love typography, the typography and fonts blog: David Březina: On diacritics [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: < http://ilovetypography.com/2009/01/24/on-diacritics/> [17] Diacritics Project @ Typo.cz [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [18] Bringing Typography to the Web with sIFR 3 at [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW:
44
[19] Typography For The Web [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [20] Adobe Labs - Text Layout Framework [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [21] Grafikův blog: Fonty na webu [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [22] Fontotéka [online]. [cit. 2009-05-10]. Dostupný z WWW [23] Typografie – skrytá tvář webdesignu [online]. [cit. 2009-05-10]. Dostupný z WWW: [24] Wikipedia, the free encyclopedia: Core fonts for the Web [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: . [25] Microsoft Typography - Fonts and Products [online]. Anglicky. [cit. 2009-05-10]. Dostupný z WWW: [26] TrueType core fonts for the Web FAQ [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [27] Interval.cz: Stahovatelné fonty poprvé [online]. [cit. 2009-05-10]. Dostupný z WWW: [28] Cascading Style Sheets, Level 2 [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: < http://www.w3.org/TR/2008/REC-CSS2-20080411/> [29] CSS3 module: Web Fonts [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [30] Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [31] Webfonts.info [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: < http://webfonts.info/> [32] Font Embedding - a resource for designers, developers and typeface creators on font usage, technology and licensing issues [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [33] Github: cufon [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [34] Mike Davidson - sIFR [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [35] sIFR Documentation & FAQ [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW:
45
[36] An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [37] DivitoDesign: Install FLIR – Typography Solution For The Web [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [38] Adobe - Fonts: OpenType [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [39] Microsoft Typography - OpenType Specificatin [online]. [cit. 2009-05-10]. Anglicky. Dostupný z WWW: [40] Typo.cz: Co je OpenType [online]. [cit. 2009-05-10]. Dostupný z WWW: [41] Typomil - písmo - kerning [online]. [cit. 2009-05-10]. Dostupný z WWW: [42] ŠVALBACH, Vítězslav. Přednáška k předmětu Písmo II (Rekonstrukce historické předlohy) a výuka předmětu Písmo II. Fakulta informatiky MU. Brno, 2008.
46
7 Přílohy příloha 1: Strana z rukopisu Liber Horarum příloha 2: 1. verze humanistické minuskule příloha 3: Ukázka použití písma LiberHorarum příloha 4: Zrekonstruovaná humanistická minuskule / majuskule příloha 5: Písmová osnova příloha 6: Ukázka písma v různých velikostech / všechny znaky příloha 7: Porovnání znaku „o“ s předlohou příloha 8: Rekonstrukce úryvku z rukopisu příloha 9: Sazba textu fontem LiberHorarum (14/18 pt) příloha 10: Porovnání kerningu 1 příloha 11: Porovnání kerningu 2 příloha 12: Znaky A, B, C a jejich varianty příloha 13: Znaky D, E, F a jejich varianty příloha 14: Znaky G, H, I a jejich varianty příloha 15: Znaky J, K, L příloha 16: Znaky M, N, O a jejich varianty příloha 17: Znaky P, Q, R a jejich varianty příloha 18: Znaky S, T, U a jejich varianty příloha 19: Znaky V, W, X příloha 20: Znaky Y, Z a jejich varianty příloha 21: Všechny znaky fontu LiberHorarum Seznam datových příloh
(A)scender – horní dotažnice (M)eanline – střední dotažnice (B)aseline – základní dotažnice / účaří (D)escender – dolní dotažnice
příloha 5: Písmová osnova
52
příloha 6: Ukázka písma v různých velikostech / všechny znaky
53
příloha 7: Porovnání znaku „o“ s předlohou
54
Q
uomodo fietiftud : quoniam
virum non cognofco. Etrefpondés angelus dixit ei. Spirituffanctus fuperueniet in te, & virtus altiffimi obumbrabit tibi. Ideoq, & qd nafcet exte fctm vocabitur filius dei.
příloha 8: Rekonstrukce úryvku z rukopisu (3. položka má upravené vyrovnání znaků dle předlohy, 4. položka je vysázený text)
55
Humanistická majuskule a minuskule Humanistická minuskule čerpala z písma, které se rozvíjelo během 9. a 12. století – karolinské minuskule. Ta byla dostupná především z rukopisů latinských klasiků. K arolinská minuskule byla vrcholným stupněm vývoje latinského písma. Proto si ho humanisté vybrali jako vzor pro své nové písmo. Vývojovým přechodem mezi gotickými písmy a humanistickou malou abecedou byla littera fere humanistica (skorohumanstické písmo, případně gotikoantikva), která vznikla na přelomu 14. a 15. století. Humanistická minuskule, již oproštěná od gotických vlivů, se stala vrcholným knižním písmem italské renesance. Sídlem jejího vývoje byla Florencie, kde v roce 1425 vznikla písařská škola, jejímž hlavním iniciátorem byl Niccolò Niccoli. V polovině 15. století se humanistická minuskule stala písmem celého humanistického hnutí a psát jí, byl jeden z hlavních požadavků na humanistického vzdělance. Knihtisk humanisté přijímali s opovržením, jelikož si byli vědomi, že vyvinuli dokonalé písmo. Rozdíly mezi karolinskou minusklulí a humanistickou, bychom hledali velice těžko, jde pouze o téměř neznatelné nuance ve způsobu psaní. Odlišnostmi humanistických rukopisů jsou například psaní tečky nad měkkým i, kolmý dřík u písmene a, obměna v g, okrouhlá forma r nebo užití arabských číslic. Vzorem pro humanistickou majuskuli byla předgotická písařská kapitála, kterou byly psány opisy latinských klasiků na začátku 9. století. Velká abeceda byla také inspirována a upravena podle starořímských nápisových písem. Humanistická majuskule se obvykle vyznačuje poměrně menšími rozměry vzhledem k malé abecedě. Ale jelikož se jednalo o rukopisné písmo, nebyla majuskule vždy stejného duktu. V různých rukopisech tak mohou být stejná písmena různě napsána.
příloha 9: Sazba textu fontem LiberHorarum (14/18 pt)
56
Metrics základní kerning
Optical optický kerning v programu Adobe Illustrator CS4
Seznam datových příloh • Text práce • Font LiberHorarum ve formátu OpenType • Soubory s rekonstruovanými znaky ve formátu AI • Ukázka použití písma • Příklady ke čtvrté kapitole „Písmo na webových stránkách“ a) font-face b) image-replacement c) cufon d) sifr e) flir
