23D

Posts Mentioning RSS
Komentáře | Klávesové zkratky
  • Vzhůru dolů 12:09 pm on January 25, 2010 Permalink
    Tagy: , , github, sifr, typeface.js, typografie,   

    Cufón nebo Typeface.js — který vybrat? 

    Než budeme moci v prohlížečích začít široce používat @font-face, Typekit a další písně typografické budoucnosti, musíme se rozhodnout mezi třemi hlavními technologiemi sloužícími k nahrazení písma přímo v prohlížeči. sIFR, Cufón a nebo Typeface.js.

    sIFR díky komplikovanému nastavování a velmi špatné rychlosti při načítání stránky postupně nahrazujeme jeho současnějšími sourozenci. Oba používají k náhradě canvas, respektive VML v Internet Explorerech a vypadají velmi podobně.

    Který z nich zvolit? Na základě dostupných informací se rozhoduje jen těžce. Rozhodl jsem se pro vlastní hloubkový průzkum.

    Ovládnout Typeface.js je snadné jako složit skříň z IKEA. Ale kdo by to chtěl dělat bez návodu?

    Do dneška čistě intuitivně na všechny projekty používám Cufón. Dnes, při cíleném podrobném prozkoumávání Typeface.js jsem dospěl k tomu, že intuice byla v tomto případě jen synonymem pro dokumentaci.

    Typeface.js můžete mít jako vývojáři na první pohled jen těžko rádi. Neexistuje pro něj prakticky žádný podrobnější manuál (na rozdíl od velmi slušně popsaného Cufónu.) Jako vývojářské rozhraní Typeface.js používá Launchpad, což je něco jako Github, kde sídlí Cufón. Ovšem Github z roku 2005.

    Tady se znovu ukazuje, že chcete-li uspět jako geek, nestačí vám k tomu technické znalosti. Autoři Typeface.js svým přístupem k dokumentaci a absencí efektivního dialogu s komunitou svůj software dobrovolně degradovali do pozice hříčky, kterou berou vážně jen nadšenci do webové typografie.

    Už v tuhle chvíli bychom mohli říct co je a co není dobrý software. Vyhrál by Cufón. Dejme ale Typeface.js ještě šanci.

    Typeface.js: Pozor na licenční podmínky

    Na webu Typeface.js si písmo vygenerujete poměrně snadno. Původně uměl jen TrueType formát, ten je teď doplněný o OpenType, který je výrazně rozšířenější u písmolijen. Formulář generátoru písma pro Cufón je naproti tomu složitější a zpočátku z něj budete asi docela na větvi.

    Jedna z věcí, kterou Cufón ale umožňuje nastavit, je velmi užitečná — jde o omezení funkčnosti písma na určitou doménu. Náhradou písem pomocí sIFR nebo Cufón jste totiž obvykle na hraně licenčních podmínek většiny písmolijen i když vlastní licenci koupenou máte. Omezení na konkrétní doménu písmo alespoň trochu chrání před hromadným zneužíváním a s menšími písmolijnami se na něm určitě domluvíte.

    Pokud písmo nahrazujete pomocí Typeface.js, buďte na pozoru. Omezení na určitou doménu nastavit nelze a tak budete pravděpodobně za hranicí toho, co bude vaše písmolijna ochotná překousnout. Raději se ptejte, protože někteří informovanější typografové užití písma pomocí Typeface.js dokonce vyloženě zakazují.

    Implementace, rychlost — remíza

    Výhodou Typeface.js je o fous snadnější implementace — k prvku, který chcete nahradit prostě přidáte class="typeface-js" a vše důležité si pak nastavíte ve vlastním stylopisu včetně řezu písma. CSS pravidlo pak může vypadat moc hezky i s dopřednou kompatibilitou: font-family: 'Můj řez písma', Arial, sans-serif.

    Rychlost obou je v běžných případech srovnatelná. Javascript Typeface je pomalejší, když nahrazujete větší množství nadpisů. Testoval jsem 100 nadpisů na stránce, kde si vzal výkon Firefoxu na dobu o pár vteřin delší než Cufón a z pohledu uživatele byl jistý „zásek” znát.

    Je ještě pár drobných rozdílů, které ovšem zrovna na vašem projektu mohou být zásadní:

    Typeface.js 0.14 Cufón 1.09
    :hover efekt neumí umí
    označování textu pomocí myši
    umí neumí, s určitou dávkou štěstí označování funguje v MSIE

    Jelikož mám od Cufónu daleko dostupnější informace, budu dále standardně používat jej. Typeface.js ovšem nezahazuju a v případech kdy potřeba označit text myší bude zásadní a zároveň nebudu narážet na problém s licencováním, sáhnu po něm.

    Důležité je, že oba dobře přebírají CSS vlastnosti nahrazovaných písem a jsou tedy vzájemně poměrně snadno nahraditelné. Nemusíte se tedy bát, že vás případný přechod na jinou technologii bude nějak zvlášť otravovat jako to mohlo být v případě sIFRu.

    Kterou technologii používáte vy a jaký pro to máte důvod? Rád uslyším váš názor v komentářích nebo na Twitteru.

     
  • Vzhůru dolů 3:53 pm on September 3, 2009 Permalink
    Tagy: baseline-css, , , , typografie,   

    První pohled na Baseline CSS 

    Potěší všechny, kdo od CSS frameworku očekávají hlavně dobrou typografickou vrstvu a nehledají nástroj pro prototypování nebo layoutování webů. Mezi takové patřím, pojďme jej rozbalit.

    Jiný rytmus

    Baseline se od ostatních (mně známých) liší hlavně principem vertikálního gridu. Blueprint a další jsou založeny na „přilepování prvků” k opakující se výšce řádku (line-height). Baseline jako jednotku vertikálního rytmu volí baseline, nebo-li česky účaří.

    Blueprint CSS vs. Baseline CSS detail

    Typografové by k tomu asi mohli říct více po řemeslné stránce. Osobně můžu mluvit spíše o příjemnějším pocitu zejména v hezké provázanosti nadpisu první až třetí úrovně s následným textem.

    A když necháme emoce stranou, můžeme říci, že v případě zarovnání na účaří bude pro kodéry jednodušší nalezení nechtěných odchylek.

    Nalevo opět Blueprint, napravo Baseline:

    Blueprint CSS vs Baseline CSS vertical grid comparison

    Když se podíváme na celou vyrenderovanou stránku, vidíme že Baseline ztrácí svou eleganci u nadpisu 5. a 6. úrovně (ale kdo z vás je naposledy skutečně použil?), pak v případě použití divu uprostřed textového bloku (to taky není příliš častá situace).

    Baseline se ve srovnání tváří ošklivě na formulářové prvky. On je hezké umí, ale musíte mu dodat zvláštní HTML kód. Ano, srovnání v případě formulářů ztrácí trochu smysl, ale pokud třeba prototypujete a nechcete upravovat HTML, hodí se to vědět.

    HTML5 ano, IE6 ne

    S Baseline sice dostanete i nějaký horizontální grid pro tvorbu layoutu, nicméně nemám pocit, že by na něj byl kladen důraz. Každopádně v balíku dostanete PSD s mřížkou a podporu nových prvků HTML5. Autor (Stéphane Curzi) se naopak rozhodl, že nebude trávit noci s laděním frameworku pro MSIE 6.

    Baseline CSS je pro mě svou lehkostí jako základ pro stavbu uživatelského rozhraní webu velkou konkurencí Blueprintu. Budu si ale dávat pozor na možné rozdíly v prohlížečích, na které autor upozorňuje. Naopak bych ho nedoporučil pro prototypování. Tam raději sáhnu po Blueprintu, Bluetripu nebo Tripoli.

    Na ose designér — kodér — programátor najde Baseline využití někde mezi designérem a kodérem.

     

© 2009 Buzzboot Corp.

c
publikovat nový odkaz
j
přeskočit na další
k
předchozí
r
reagovat
e
editovat
o
zobrazit/skrýt komentáře
t
skočit nahoru
l
přihlásit se
h
zobrazit nápovědu
esc
zrušit