Chaos Sanctuary

O parodii na redesign, která se udála v Chaos Sanctuary, o webových fontech a o tom, jak to někdy vypadá divně.

Nejdříve k těm fontům. Ačkoli jsem původně uvažovala o použití SIFR, změnila jsem názor, když jsem našla tento průzkum zastoupení fontů na počítačích a operačních systémech - font survey. Vypadá docela čerstvě, poslední aktualizace je z prosince 2008 a je zde vidět, že některé fonty, které se běžně pro použití na webu nedoporučují, mají v jednotlivých operačních systémech poměrně vysoké procento výskytu, a v CSS se z toho dají sestavit zajímavé kombinace. Např Impact je skoro jistota u Windows i Mac OS. Na Windows mě překvapil vysoký výskyt písma Franklin Gothic Medium, a třeba Sylfaen mi neříkalo nikdy nic, ačkoli prý ho má 95% počítačů s Windows.

Další zajímavý článek o fontech a CSS vyšel na sitepoint.com - 8 Definitive Web Font Stacks.

Ze statistik návštěvnosti posledních měsíců loňského roku jsem zjistila, že skoro 85-87% lidí má Windows, 10% to tutlá, 2% má Linux, 0.5% Mac. 45% používá Firefox, 30% IE, 12% Operu, 1% Safari, Mozillu a zbytek jsou různé podivnosti. Fonty pro Windows by tedy mohly uspokojit většinu návštěvníků ale podíl té lišky zrzavé by mohl dělat problémy, protože některé fonty zbrazuje divně.

Vyzbrojena všemi těmito podezřelými statistikami jsem se tedy na webu fontově rozmáchla. Ale doma to nezkoušejte, tohle totiž nelze považovat za seriozní webdesign, protože je zde použit Comic sans, počet použitých fontů je větší než malý, kolem validity to ani neběželo (to až někdy), a celý vzhled je chaotický mišmaš grafických stylů , jak se na správnou Svatyni Chaosu sluší :-)

K Comic sans v hlavičce nemám co říci, vážená poroto, jen že mi to připadlo jako dobrý nápad.

Texty článků a komentáře pod články jsou Helvetica, aby si to užili ti šťastlivci, co to mají, a Arial, to je pro ty chudé příbuzné.

V nadpisu článků je použité písmo Impact, následované Arial Black a podle browserhots.org, se opravdu nachází na kdejakém windows, a zřejmě i na Mac (povedl se mi jen jeden screenshot) ale na Linuxu nebylo ani v jednom případu. Ačkoli je nutné pro Impact nadefinovat font-weight:normal, nevypadá to ani na tom Linuxu, kde se zvolí nějaký systémový sans-serif, tak špatně (screenshot linux-opera), protože písmo je dost velké. Při menší velikosti Impactu se písmo špatně zobrazovalo ve Firefoxu, a když není zapnuté vyhlazování písma ve Windows, je to pořád škaredě hranaté, chjo :-(

V bočních sloupcích je použité písmo Franklin Gothic Medium, následované Helvetica Neue, protože mi připadalo stejně velké (tedy stejně menší než Arial), v některých případech (u komentářů v bočním sloupci ) následuje Arial Narrow. Firefox má problém s tučnou variantou Franklin Gothic, některá písmena jsou slitá. Calibri bylo ještě o něco menší a ve Firefoxu ten komentářový sloupec vypadal rozplizle, a tak jsem ho nakonec nepoužila. Ptáte-li se, proč tam vlastně je jiné písmo, mám matný pocit, že hlavně proto, že tam být může.

Hlavičky H3 až H5 v textu (moc se tam nevyskytují) a některé nadpisy jsou patkové, aby se odlišily od textu, je tam Palatino Linotype, Palatino a Georgia. Nejlíp je to asi vidět tady.

Ta nadefinovaná písma jsou obsažená hlavně ve Windows a MAC, Linux jsem moc neřešila, protože jednak počet návštěvníků je dost nízký, druhak o písmech v Linuxu nemám páru, a třeťak, lidem, kteří si zvolí operační systém proto, že „má příkazovou řádku“, se pěknýma písmenkama stejně nezavděčíte. A navíc, ono to i tak vypadá čitelně, i když trochu jinak než ve Windows.

Grafika. Hm, to máte tak: jsou blogeři, kteří mají co říct a mají ty MYŠLENKY, které sdělují světu, tak těm stačí bílé pozadí a zabarvené záhlaví blogu. My ostatní holt plácáme na bložínky obrázky. Střídmost patičky neznamená, že bych snad prozřela, ale že mi došla inspirace, protože jsem si v neděli odpoledne bystře přepsala ostrou šablonu zkušebním nedodělkem, a nějak jsem to ukončit musela. Ale něco by to chtělo ... jen co mě to napadne ...

P.S. Už je tu i slibovaný handheld.css, tak jestli máte mobillní prohlížeč, ozvěte se, jestli to pomohlo nebo uškodilo :-)

Ještě včera jsem byla lama zcela normální ale dnes, dnes je všechno jinak, milý deníčku. Dnes jsem si na alistapart.com přečetla článek Return of the Mobile Style Sheet.

Píšou tam, že mobily nám na webíky nakukujou čím dál víc a že je tedy potřeba jim to usnadnit, a to nejlépěji pomocí oddělených CSS stylů. Problém je v tom, že si každý mobil dělá, co chce, některé čtou styly pro screen a handheld, některé jen hanheld, některé jen screen s media query support a některé jen screen bez media query.

CSS media query je pokročilá vlastnost stylů, kterou zatím interpretuje jen Safari a Opera mini, která umožňuje nadefinovat kromě volby jako „screen“ nebo „print“, i další kriteria, např velikost obrazovky, v článku je uveden tento příklad:

<link rel="stylesheet" href="handheld.css" 
media="only screen and (max-device width:480px)"/>

V článku v sekci „How browsers behave“ je tabulka, která ukazuje, jaké styly různé mobilní browsery čtou. Člověk se pak začne ptát, kolik těch mobilních stylů vlastně potřebuje. Některé CSS vlastnosti by se ve stylech pro mobily neměly vyskytovat, speciálně tam zmiňují padding a margin, float a display a background-image.

Jak to tedy udělat.

• Udělat styl pro screen, který budou číst browsery pro PC.
• Pak udělat styl „antiscreen“, který zruší mobilně nepřátelské CSS vlastnosti a tyhle dva styly se „zimportují“ do jednoho, který nazvali core.css, takto:
  

  @import url("screen.css"); 
  @import url("antiscreen.css") handheld; 
  @import url("antiscreen.css") only screen and
  (max-device-width:480px);

• Pak nadefinují ještě styl pro hanheld, jak by to mělo vypadat a přidají ho ke stylům např takto:
  

  <link rel="stylesheet" href="core.css" media="screen"/> 
  <link rel="stylesheet" href="handheld.css" media="handheld,
  only screen and (max-device-width:480px)"/>

V článku následuje tabulka, která ukazuje, jak tenhle mišmaš jednotlivé browsery zinterpretují. Prý dobře. Ale problém je, že když máte CSS dlouhý a často do něho děláte změny, je obtížné udržovat k tomu ještě ten antiscreen.

Další navržené postupy, jak browseru podstrčit to správné krmení, jsou pomocí javascriptu nebo server-side řešení založené na testování user agent.

Proč o tom píšu právě teď, když doposud mě mobily nechávaly ledově klidnou? Ále, zas vymýšlím změny na webíku a vzpomněla jsem si, jak mě kdysi na munio kritizovali, tak teď bych s tím začla (řekněme po zralé ... ehm ... časově uleželé ... úvaze) něco dělat. Taky tam psali, že nejlepší mobilní CSS handheld má snizekweb, tak jsem ho samozřejmě proslídila ale ono je to dlouhé! A funguje to opravdu na ty případy, které tak složitě rozebírají na alistapart?

Já su jen prostá líná lama, já chcu něco easy. Tak jsem pojala ideu:
Udělám css screen, pak handheld, kde naplácám do všech sekcí position:static, margin, padding:0 a nadefinuju pozadí a barvu linků, ať to připomíná „ducha“ webu, čímž splácnu dohromady antiscreen a handheld. A tohle tam dám jako hanheld a ještě jednou jako handheld s media query.

Ale nemám žádný mobil na prohlížení webu v dohledné době ani potřebu něco takového vlastnit. Existuje webová nemobilní služba, jak takové styly otestovat?

Bože, jak hluboko jsem klesla - ano, videa: 20 typo videí, kde hlavní úlohu hrají písmenka.

A po úvodním relaxu znova na sIFR3: siFR generátor teď už dělá .swf i pro poslední verzi sIFR 346. Není to tam nikde napsané ale při tvorbě .swf souboru se vás to zeptá, pro jakou verzi sIFR to chcete. To je sice lepší než u sIFR makeru, o kterém jsem psala minule, ale neposkytuje volbu znaků, které tam chcete mít (jen všechno nebo anglický základ). SIFR generátor funguje tak, že si najdete u sebe font, který chcete zpracovat, nahrajete ho na web a pak si stáhnete .swf soubor.

České fonty s diakritikou si můžete stáhnout na webu ceskefonty.cz ale pozor na licence, oni to sesbírali z různých webů.

Další pomůcka pro náhradu fontů je font burner, který funguje jako úložiště pro .swf, které má asi předpřipravené, takže vy si tam vyberete font, který chcete, zkopírujete k sobě na web kód, který to vygeneruje, a je vymalováno. Pravděpodobně budou problémy s diakritikou u většiny těch jejich fontů. Pro wordpress to má dokonce plugin. To už je vážně rozežranost, tohle ...

A teď něco pro fonty obyčejné: typechart.com je srovnávací tabulka pro obvyklé webové fonty, můžete tam zvolit font a jeho vlastnosti a ... uvidíte, že možná ani sIFR nepotřebujete :-)

A něco pro očička: typographic posters

A pro čtenáře: pěkný článek o vývoji nápisů v metru v New Yorku

Standardní fonty se nahrazují především v hlavičkách a krátkých textech. Žádná z dále uvedených metod – sIFR, facelift (flir), typeface.js a font-face/CSS - není vhodná pro delší text. Všechny tyto metody jsou relativně nové a stále se vyvíjejí.

sIFR3

SIFR je náhrada textu fonty převedenými do flashového souboru, značně rozšířený, nyní ve verzi 3, která je docela přítulná. Už dříve jsem přeložila návod na sIFR3 ale tehdy nebyly nástroje pro vytvoření .swf souboru z fontů, když jste neměli Flash. Teď existuje sifr font maker, který je free. Nainstalujte, vyberte font a uložte jako název_fontu.swf. Fontmaker, který je tam aktuálně ke stažení (verze z 19.září), funguje pouze se starší verzí siFR-r419 - tu si stáhněte zde. V souboru sifr.js je kontrola na verzi sIFR a verzi .swf souboru (ale když si stáhnete poslední verzi sifr a hned na začátku skriptu sifr.js tam nacpete 419, tak to taky funguje, ale za nic neručím – viz pokus)

Facelift (flir)

Facelift je náhrada fontů obrázkem, který se generuje pomocí php a gd knihovny. Pro nějaké pokročilejší funkce to chce i imagemagick. Zhruba to funguje tak, že si stáhnete ten Facelift, podle potřeby upravíte config-flir, do adresáře fonts šoupnete .ttf soubory fontů, kterými chcete nahrazovat, a do každé stránky, kde to chcete používat, přidáte kus kódu, který je tam uvedený v sekci quick start. Můžete to případně kombinovat s js knihovnami jquery, prototype, apod. Standardně to nahrazuje h1-h5 ale dá se to nastavit. Výsledek je opravdu obrázek, nedá se to označit jako text. Nezkoušela jsem ale pěkný návod je tady.

Typeface.js

Typeface.js je javascriptové řešení. Potřebujete na web stáhnout knihovnu typeface.js, do stránek přidat odkaz na ni a do html potřebné třídy. Fonty musí být uloženy v souboru název-fontu-typeface.js, který si vygenerujete ze svého .ttf souboru v sekci fonts. Využívá to canvas a VML (v IE). V prohlížečích, které používají pro kreslení canvas, je prý text možné vybrat ale není to bohužel vidět, prý se na tom pracuje.

Font-face v CSS

Článek o font-face tvrdí, že font-face lze pro náhradu fontů využít už teď: pro Safari (webkit) a Mozillu 3.1 beta si na web nahrajete fonty ve formátu .otf. Pro IE musíte použít font ve formátu .eot, což je microsoftí řešení a dělá se to pomocí prográmku weft3, který ale pro změnu potřebuje zdrojové fonty v .ttf. V článku jsou uvedeny příklady deklarací pro safari i IE.

Formát .eot by už neměl být proprietární, protože byl předán do W3C, a měl by se stát standardem, ale Mozilla ho stejně nechce a je podle nich potřeba nějak kontrolovat práva k fontům, a Safari na to kašle a nechá každého používat fonty bez kontroly. Celé se to kouše na tom, jak zajistit, aby se nedaly používat „kradené“ fonty. Chcete-li vědět, které fonty embedding umožňují (a je jich fakt málo), koukněte sem

Jiné metody

Starší, vyzkoušené, metody jsou sIFR2 nebo nahrazování pomocí js a php - dynamické nahrazování textu.

Kdybych si měla teď vybrat, asi bych použila siFR3, protože je jednodušší než siFR2, případně typeface.js tam, kde by mi nevadilo, že text nejde vybrat. Asi nejčistší řešení by bylo to poslední ale než (a jestli vůbec) se dospěje k jednotnému postupu mezi prohlížeči, to si ještě počkáme. Já tam teď vidím problém i v tom, že pro Mozillu bych musela mít .otf a pro vytvoření .eot zas .ttf font. Takže by to asi chtělo nějaký převodník mezi otf a ttf. Z free nástrojů jsem našla jen fontforge ale nezkoušela jsem ještě. Pokud byste měli zájem o detailní překlad nějakého návodu, řekněte si v komentářích.

A co používáte pro nahrazování fontů vy, pokud vůbec?

Update: (březen 2009) Další nástroj, podobný jako typeface.js je Cufón. Český návod pro nahrazování písma pomocí cufón je tady

Tak mi přišel mail ze sitepoint (asi mě mají rádi), že si můžu stáhnout zadarmo knížku "The Art & Science of CSS" v pdf. No nekupte to ... Je k tomu potřeba přidat si je do twitteru, pokud ho máte, nebo jim vhodit svou mailovou adresu na twitaway.aws.sitepoint.com, pak vám přijde odkaz na stažení. Nepřipadá mi moc fér ho tady dávat přímo, protože samozřejmě cílem té akce je nalákat vás na jejich web :-)

Bude to tam jen 14 dní!

Má to asi 200 stránek a 27MB, zatím jsem to moc nestudovala, nicméně autoři jsou celkem známí - CAMERON ADAMS, JINA BOLTON, DAVID JOHNSON, STEVE SMITH a JONATHAN SNOOK. Jsou tam příklady i case study, za nahlédnutí to určitě stojí.

které lama přežvýkala na konci prázdnin - něco vážně, pak inspirace css menu, brushe, typo a na konec něco nevážně, a nic o google chrome! :-)

• Web Application Hierarchy - záznam přednášky a doprovodné pdf (moc pěkné) z Alist apart
• IE 8 renderuje jinak v intranetu?
• galerie css menu i něco ke stažení
• jak má vypadat perfektní tab menu
• inspiredology.com - inspirační sbírky k designu
• z historie designu - může se hodit i do školy na referátek :-)
• 27 štětců pro webdesignéry ... prý
• misprintedtype - nový design webu, nové štětce a pár ukrytých obrázků .. sliďte, šmejděte :-)
• small talk with a webdesigner - jako ze života ...
• užitečný font pro vaše xxx sites :-)

Misantropovi se nelíbí, že spousta lidí jásá nad iPhone, tedy, já nevím, jaký je to pocit, když ten teploučký iPhone držíte v dlani, ale vím, jaký je to pocit, když v dlani držíte Cybook Gen3 – jééé, jůůů a aaaach - to mi zas po 4 hodinách čtení zdřevěněla ruka ...

Dnes tedy na bložínku večerní chvilka rozjímání nad čtečkou elektronických knížek.

Pořídila jsem si ji asi před dvěma měsíci a od té doby čtu a čtu a webíky zanedbávám ... Proč zrovna Cybook? Chtěla jsem něco, co se dá snadno sehnat, má to záruku v ČR a umí nějaký formát s DRM, abych si mohla číst i koupené e-booky (což má smysl jen tehdy, pokud čtete anglicky, české e-knížky musíte „sehnat“). Ale taky to mělo umět jiné formáty, protože spousta knížek se kupovat nemusí, stačí hledat :-)

Proslídila jsem různá fora a wiki matrix a nakonec jsem se rozhodla, i přes vyšší cenu, pro Cybook Gen 3, protože umí Mobipocket s DRM, což je docela rozšířený formát, a má prodejce v ČR – acomp.cz, ofic stránky s popisem a fotkama jsou na bookeen.cz. Koupila jsem to na dobírku - domluvili jsme se s dovozcem, kdy bude u nás projíždět, a za 2 dny jsem ho měla doma.

Čte se z toho perfektně, vestavěná Verdana je celkem příjemná ale pokud k ní máte nějakou averzi, můžete si fonty změnit nebo si tam nahrát vlastní. Velikost stránky je zhruba jako paperbacky, obsah jedné stránky záleží na velikosti a typu písma. Je to založené na technologi e-Ink, nemá to podsvícený display a vypadá to jako trochu tmavší papír.

E-knihy si musíte do čtečky nahrát přes USB kabel z počítače. Umí to formáty pdb, prc, txt, html (htm musíte přejmenovat na html) a pdf. PDF je pro mě nečitelný, čtečka to celé zmenší a jsou z toho blechy, i když hodím na šířku.

Co čtečka umí: tvářit se jako knížka, tlačítkem otáčíte stránky a čtete. Můžete si udělat záložky ale při normálním použití to není potřeba, protože čtečka si pamatuje, kde jste skončili. Záložky jsou dobré pro vracení se na určité místo.

Co mi vadí:

• stránkování - dole je pásový ukazatel, kde v knížce asi jste, ale číslo stránky tam není. Existuje sice volba skočit na zadanou stránku ale musíte to odhadnout. Neumí to listovat po víc stránkách. Jestli si chcete knížku „proskenovat“, tak tu udělejte na kompu, v čtečce je to opruz.
• Nemá to adresářovou strukturu (ale prý v budoucnu snad bude). Jak je ve čtečce víc knížek, je hledání nepřehledné, protože když to procházíte po 20 knížkách, jsou názvy zkrácené a špatně vidět. Když procházíte po 5 knížkách, trvá to dlouho.
• A taky to více směrové stránkovací tlačítko je otrava, lepší by bylo jednoúčelové - klikací - pro otočení stránky.

Co mi nevadí ale je dobré vědět:

Nemá to připojení na wifi, neumí to stahovat poštu ani zprávy, nemá to organizér, není to PDA. Je to jen čtečka knížek a její hlavní přednost je, že má velký displej, slušnou výdrž a dobře se z ní čte.

Na ofic stránkách se píše, že to vydrží otočení 8000 stránek na jedno nabití. Moje zkušenost je tak 2000-2500, což je prý dáno tím, že mám nastavenou volbu „vyčištění stránky“ po každém otočení, text je pak bez „smetí“. Nabíjí se to přes USB kablík z počítače nebo ze síťové nabíječky (jako bývají pro mp3 přehrávače).

Cybook Gen3 má 512MB vnitřní paměti a k tomu nějakou SD kartu. Zatím si vystačím s tou vnitřní pamětí, protože když je tam těch knížek moc, zpomalí se inicializace čtečky po zapnutí, takže to přečtené průběžně mažu (tohle se musí dělat přes počítač – připojenou čtečku vidíte jako další USB zařízení).

Cena čtečky za tu dobu, co ji mám, slezla o 500 Kč dolů, členové ebookfora mají teď nárok na nějakou slevu - nevím jak pro nové členy, mně to přišlo asi před týdnem. Vypadá to, aspoň na foru acompu, že už testují i Jinke Hanlin eReader, ta by mohla být levnější, případně by mohla prý v září klesnout i cena Cybooku. Pokud uvažujete o koupi, možná bude lepší počkat, ale záleží na tom, jak moc čtete a co - kdybych měla všechny ty knížky, co jsem přečetla na čtečce, číst na kompu, tak mám zatuhnutý krk, a kdybych měla ty "nalezené na netu" kupovat v papírové podobě, tak nemám ani na chleba :-)

Tak, to bychom měli ke čtečce, kterou si stejně nekoupíte, a teď kde sehnat knížky, které se dají číst i na kompu nebo PDA, a neplatit za ně. Přidejte případně svoje tipy do komentářů :-)

Česky:

• ebookforum.cz - české i anglické
• knihykestazeni jen české
• eknihy.com

Anglické a ruské - sci-fi, fantasy

• lavkamirov - u většiny autorů je dole odkaz na bibliografii ( červená disketa znamená anglickou verzi )
• komiksy eng - zrovna tohle je pro čtečku absolutně nevhodné
• baencd library a baen free library

Konvertory:

• .lit, je to pro MS reader. Pokud to vaše čtečka/pda to neumí, dá se zkonvertovat na html jednoduše pomocí convertlit
• .pdf je pro čtení na počítači fajn ale pro čtečku je lepší to převést na txt. Zatím všechny moje pokusy s konverzí narazily na problémy s konci řádků, takže radši hledám jiný formát nebo to čtu na kompu, víte o nějakém free konvertoru?
• .pdb (palm reader) – tady může být problém spíš na PC, stáhněte si třeba palm reader, je to už starší program, už se nedá nikde sehnat ale můj oblíbený .. tedy, dokud jsem si nekoupila cybook :-)

No a já si jdu číst ...