Autor Zpráva
Chamurappi
Profil
Bubák si posteskl, že „nezná jednoduchý způsob, jak zjistit, zda zvolené písmo obsahuje české/slovenské národní znaky“, tak jsem zkusil narychlo spíchnout jednoduchý nástroj na testování přítomnosti znaků v písmech:

   Fontokuk

Vymyslet pro tuto hračku unikátní název trvalo skoro déle, než její naprogramování. Nic zvukomalebnějšího mě nenapadlo :-)
Kdyby někoho napadl lepší název, sem s ním. (Zatím prosím moc nešiřte odkaz, berte to jako poloveřejnou betaverzi.)

Nemám to moc odzkoušené napříč prohlížeči, takže je možné, že to v nějakém ošklivě selhává…

Jak to uvnitř funguje

Vyrobí se skriptem šest absolutně pozicovaných elementů, do nichž se napíše zadaný text a postupně se jim nastaví do font-family:
1. "[zadaný font], Calibri, Arial, sans-serif"
2. "[zadaný font], Lucida Console, Courier New, monospace"
3. "[zadaný font], Times New Roman, serif"
4. "Calibri, Arial, sans-serif"
5. "Lucida Console, Courier New, monospace"
6. "Times New Roman, serif"

Následně se změří jejich šířka, tedy vlastnost offsetWidth, a rozhoduje se:
A) Pokud mají 1. a 4. stejnou šířku, 2. a 5. stejnou šířku a 3. a 6. stejnou šířku, znamená to, že se zadaný font vůbec nepoužívá.
B) Pokud mají 1., 2. a 3. element stejnou šířku, znamená to, že se všechny znaky vypsaly zadaným fontem.
C) Všechny zbývající případy znamenají, že v zadaném písmu některý ze zadaných znaků chybí.

Celá tato finta by běžně šla provádět i v téže stránce, ale protože dovoluji uživateli vložit i svoji HTML hlavičku a cizí CSS by mi mohlo rozbourat moje styly, provádím to v rámu.
Amunak
Profil
Je to úžasné. Kůň netestuje i - obvykle se píše příliš. V tomhle případě na tom ale asi moc nesejde.
Str4wberry
Profil
Reakce na Chamurappiho:
Jak to uvnitř funguje
Jo, já to zkoušel přes porovnávání šířky „ěščřžýáéňóůú“ a „escrzyaenouu“. Zdá se, že to oboje funguje podobně nespolehlivě. Zkusil jsem 2 „Google písma“ (Bowlby One SC a Acme), co ten můj postup vyhodnotil chybně jako OK, a Fontokuk taktéž chybně souhlasí.

Jinak mě momentálně na Fontokuku nejvíce irituje, že nejde vyvolat kontrolu písma nějakým tlačítkem. Po vložení ze schránky to občas nic nedělá, takže musím něco připsat a zase umazat.
Chamurappi
Profil
Vylepšil jsem zadávání systémového písma — s pomocí malého flashe (© Ali Rantakari) dovedu získat seznam všech nainstalovaných, z něhož jde pohodlněji vybírat.


Reaguji na Amunaka:
Děkuji. Koně jsem upravil.


Reaguji na Str4wberryho:
já to zkoušel přes porovnávání šířky ‚ěščřžýáéňóůú‘ a ‚escrzyaenouu‘
Některá písmena s diakritikou můžou být širší, než verze bez diakritiky. Množina těchto písmen bude nejspíš i proměnlivá v závislosti na písmu.
Kdysi dávno jsem dělal detekci přítomnosti fontu Calibri (nyní ho má 82,8 % lidí, mimochodem) s využitím podobné fallback-finty, jako teď tady, považuju ji za spolehlivou.

Zdá se, že to oboje funguje podobně nespolehlivě.
Tvým postupem prošel i Chewy, u mě dostane se žluťoučkým koněm palec dolu.

Písmu Acme dává Fontokuk také palec dolu, nenarazil jsem na chybné vyhodnocení.
S písmem Bowlby One SC je potíž, že ono ve skutečnosti českou diakritiku podporuje, jen v něm chybí kus malého š. Co jsem zběžně koukal, ostatní znaky nemají problém, vypadají sice divně, ale to je asi umělecký záměr (nebo spíš umělecká lenost). Když je písmo udělané nečitelně, tak to pochopitelně automat vyhodnotit nemůže (leda nějaké OCR), můj vynález zkoumá jen to, zda si všechny znaky umí vzít na starost jeden konkrétní font.

nejde vyvolat kontrolu písma nějakým tlačítkem
Klávesa Enter by to od teď měla umět.
Str4wberry
Profil
Písmu Acme dává Fontokuk také palec dolu, nenarazil jsem na chybné vyhodnocení.
Zkusil jsem to v Exploreru a souhlasí. Palec nahoru to chybně dostává v Opeře.

Mimochodem, funguje to v Chrome? Nebo se nefunkčnost v něm týká jen mě?

Jinak jsem zkusil to přeměření, co používáš ty, pro všechny Google fonty a jsou z toho opravdu lehce lepší výsledky. Jenom mi v Opeře procházela všechna písma, v Chrome to bylo OK, což možná bude i tou příčinou, proč mi to font Acme špatně vyhodnotilo. Otázka je, jestli to pro Operu má smysl řešit.
Chamurappi
Profil
Reaguji na Str4wberryho:
Mimochodem, funguje to v Chrome?
Už ano. Webkit nemá rád, když se do rámu načte obrázek a pak se zkouší jeho kód nahradit za HTML přes document.write. Divné. Psal jsem na jaře detektor režimu, kde jsem použil stejnou metodu a jako výchozí obsah jsem načítal favicon.ico a tam to nevadilo… ale to asi proto, že se místo favicon.ico načetla chybová stránka. (Něco do toho rámu načíst musím, abych zajistil, že poběží v rámci stejné domény.)

Otázka je, jestli to pro Operu má smysl řešit.
Její tržní podíl téměř neklesá, takže bych to vyřešil rád, ale zdá se, že to nejde. Minimálně ne tak, jako v jiných prohlížečích, při nedostupnosti znaku totiž nefallbackuje na další zadaná písma, ale na něco úplně jiného. Zkusil jsem dvě písma s nedostupnou češtinou — z googlího mi fallbackuje na Times New Roman, ze systémového na Arial.
Amunak
Profil
Teď mě napadlo, že mi tam trochu chybí jedna vlastnost: ukázka textu s tím testovaným písmem. Teď je to skvělý nástroj na testování fontů, pak by se z toho stal i skvělý „font picker“. Obzvlášť, kdyby byla možnost zobrazit ukázku písma vedle toho flashem získaného jména.
Chamurappi
Profil
Ještě opravdu musím nějak lépe vyřešit ten okamžik vyhodnocení (ideálně bez tlačítka).
Také by se tam asi hodila možnost získat seznam všech Google Fonts, podobně jako jde flashem získávat seznam systémových písem, ale to asi nebude tak jednoduché.


Reaguji na Amunaka:
Teď je to skvělý nástroj na testování fontů
Nic víc ani nebylo mým záměrem.
Ale přesto jsem tam zkusil dodělat jakousi ukázku…
Amunak
Profil
Chamurappi:
Ale přesto jsem tam zkusil dodělat jakousi ukázku…
Díky, právě jsi vyřešil veškeré moje problémy s vybíráním a testováním písma :-)
Str4wberry
Profil
Reakce na Chamurappiho:
Také by se tam asi hodila možnost získat seznam všech Google Fonts, ale to asi nebude tak jednoduché

To je ještě jednodušší. Dá se pohodlně přes API získat JSON se všemi písmy (ukázka). (Jen je otravná registrace, chce to Google účet a ověření SMS zprávou.)
joe
Profil
Tak to je povedené, líbí se mi to.

Byl bych pro, aby se tam zobrazil i výsledek, jak by text v daném fontu vypadal, protože hláška Chybí některý ze znaků. toho moc neřekne. Ideální by bylo, kdyby ještě v originálním textu byla označena ta písmenka, která v tom fontu nejsou :-) ale to by také šlo vyřešit, ne? (v případě chybějícího znaku - palec dolů, bych to testoval po písmenkách a při chybě označil právě procházené písmeno)
Chamurappi
Profil
Přidělal jsem k vyhodnocení i změření poměru jednotek ex ku em (tj. výška malého „x“ ku velikosti písma) a ch ku em (tj. šířka nuly ku velikosti písma, pokud prohlížeč tuto jednotku podporuje).

Trojici seznamů písem, vůči nimž se testování provádí, jsem zkusil rozšířit o fonty, které podporují japonské znaky, protože jinak se podpora těchto znaků vyhodnotí špatně (všech šest elementů zfallbackuje na nějaké universální japonské písmo a mají shodné rozměry). Chtěl jsem dát mezi příklady textů i sněhuláka, ale tam je šance na rozumné vyhodnocování ještě menší.


Reaguji na sebe:
[Opera] při nedostupnosti znaku totiž nefallbackuje na další zadaná písma, ale na něco úplně jiného
Explorer 7 má podobný problém. Zkusil jsem odstranit řadu překážek, které starším Explorerům mohly vadit, ale v sedmičce to stejně nejde rozběhat a momentálně nikde nemám osmičku, takže netuším, jestli to funguje v ní.

Ještě opravdu musím nějak lépe vyřešit ten okamžik vyhodnocení
Něco jsem zkusil. Celá potíž byla dle mého názoru v tom, že se okamžik načtení písma nedá nijak rozumně odchytit, takže se neví, kdy je optimální čas na měření elementů. Nyní jsem skript upravil, aby při vyhodnocení „font není načtený“ zkusil za 100 milisekund vyhodnocení znovu. Samo změření prvků by nemělo být výkonnostně náročné, takže by vyhodnocovací smyčka neměla vadit.


Reaguji na Str4wberryho:
(Jen je otravná registrace, chce to Google účet a ověření SMS zprávou.)
Google účet nemám a mít nebudu. Nepůjčil bys mi API klíč? :-)
Jak často se ten seznam mění?


Reaguji na joa:
yl bych pro, aby se tam zobrazil i výsledek, jak by text v daném fontu vypadal
Už od [#8] se výsledkem tapetuje pozadí (podporuje-li prohlížeč <canvas>). Nestačí? Nenapadá mě jiné vhodné místo, kam ukázku dát, aby byla pěkně na očích a zároveň moc nepřekážela základní funkci. Uživatel může do <textarea> napsat i docela dlouhý text…

Ideální by bylo, kdyby ještě v originálním textu byla označena ta písmenka, která v tom fontu nejsou :-)
Vím, že se to hodně nabízí, ale informace o tom, která konkrétní písmenka zlobí, mi nepřipadá až tak zásadní. Těžko si tvůrce stránky řekne „OK, tak nebudu používat Ř“ — palec dolu prakticky vždy vylučuje použití daného fontu, nikoliv použití problematického znaku.
Kontrolu jednotlivých znaků při negativní hlášce možná někdy (ne brzy) dodělám, ale provede se až na vyžádání uživatele.



Minulý týden jsem našel neviditelný font, který by se hodil jako názorný fallback při kreslení ukázkové tapety — aby se nedostupné znaky vůbec neukázaly, ne aby se vykreslily jiným písmem. Potíž je, že i v tom neviditelném fontu spousta znaků chybí. Umí tu někdo tvořit či editovat písma? Dokázali byste vyrobit font, kde budou úplně všechny znaky prázdné, nebo (možná lépe) nahrazené křížkem? (Stačí jako WOFF.)
Str4wberry
Profil
Jak často se ten seznam (písem) mění?

Seznam (minimálně českých) písem se moc nemění. Původně jsem použil několik let starý, než jsem písma začal brát z Google API. A v tom aktuálním se víc použitelných písem nenašlo.
majja01
Profil
Chamurappi:
Dobrá práce...
jenom by to chtělo našeptávač...
edit:
pokud tam dám velkým Roboto tak to jde ale pokud malým roboto tak nejde...
chtělo by to aby nezáleželo na velikosti
Chamurappi
Profil
Děkuji Str4wberrymu za API klíč, přidělal jsem tlačítko na načtení seznamu Google fontů. Seznam se aktualizuje jednou týdně.


Reaguji na majju01:
pokud tam dám velkým Roboto tak to jde ale pokud malým roboto tak nejde...
Dosazuji název písma přímo do <link>u a server Googlu bohužel vyžaduje správnou velikost písmen.
Nicméně pravidlo, že se začátky slov v názvu píší velkými písmeny, jsem teď ošetřit zvládl, takže můžeš už můžeš psát klidně i roboto.
Chamurappi
Profil
V Exploreru 8 testování písem u češtiny funguje, ale když nejsou v systému (typicky WinXP) žádná písma na japonštinu, není proti čemu testovat. Přidal jsem tam jakousi kontrolu, která by měla nedostatečnost referenčních písem odhalit (a zahlásit „OK s podezřením“ místo „Vše OK“), ale nepodařilo se mi ji přimět k tomu, aby zabrala. Ani ten sněhulák ji neprobral. Nejspíš je symbol pro neplatný znak (nebo náhradní znak) různě velký v různých písmech.

V Opeře by asi šlo zjišťovat podporu znaků přes <canvas>, vykreslovat si jednotlivá písmena a pixel po pixelu je porovnávat se stejnými písmeny v generických písmech. Ale není to zrovna triviální úkol…

Ještě má někdo nějaký nápad k Fontokuku? Nebo už to vypadá jako hotové? :-)
majja01
Profil
Chamurappi:
Ještě má někdo nějaký nápad k Fontokuku? Nebo už to vypadá jako hotové? :-)
Jediné co mě napadlo je našeptávač...
DJ Miky
Profil
Ve Firefoxu s vypnutými cookies (a tedy i localStorage) Fontokuk nefunguje, protože přístup k window.localStorage vyhodí „SecurityError: The operation is insecure. @ http://fontokuk.webylon.info/:343“, řádek 343 obsahuje:
if(!window.localStorage && document.documentElement.addBehavior) window.localStorage = (function(name)

Je potřeba to ještě obalit try {} blokem. Zapnout si cookies je sice taky řešení, ale na první pohled není vidět, že někde nastala chyba (a že nastala kvůli vypnutým cookies), když klikání na přepínače nic nedělá.
Chamurappi
Profil
Vylepšil jsem vybírání Google Fontu, písma v seznamu jsou nyní roztříděná podle subsetů.


Reaguji na majju01:
Co by se mělo našeptávat? Dokud uživatel neklikne na tlačítko „Načíst seznam“, seznam neznám, a jakmile na něj klikne, může si písmo vesele vybírat ze <select>u. A ten, když má focus, umí reagovat i na psaní z klávesnice.


Reaguji na DJ Mikyho:
Otryoval jsem to…
Ale je to praštěné. Tak krásně byl ten localStorage (respektive původně globalStorage) vymyšlený a tolik ptákovin se kolem něj vynořuje. Jako kdyby nestačilo, že čtení a zápis hodnot můžou selhat, ono je trestné si i otestovat jeho přítomnost. Proč neselhává v tichosti? K čemu užitečnému je, že způsobí výjimku? To abych všude používal vlastní wrapper…
Str4wberry
Profil
Trochu mi vadí, že hodně „bílého místa“ je klikací.



1) Chci se zbavit fucusu, ale nepomůže to.
2) Tak kliknu trochu víc vedle a celé se mi to přepne na „Systémový font“.
DJ Miky
Profil
Chamurappi:
Ale je to praštěné. (…) Jako kdyby nestačilo, že čtení a zápis hodnot můžou selhat, ono je trestné si i otestovat jeho přítomnost. Proč neselhává v tichosti? K čemu užitečnému je, že způsobí výjimku? To abych všude používal vlastní wrapper…

Taky mi to přijde dost uhozené. Ale ještě „vtipnější“ je na tom fakt, že nelze ani dosadit náhradu způsobem:
try { window.localStorage; }
catch(error) {
    window.localStorage = náhradní_objekt;
}
Protože pokus o přiřazení… vyhodí také SecurityError :-). Takže jediné možné ošetření (kromě „vykašlat se na to“) je uložit si window.localStorage, příp. náhradu, do své lokální proměnné a window.localStorage vůbec dále nepoužívat.
Chamurappi
Profil
Upravil jsem načítání systémových fontů, aby v případě nepodpory flashe naplnilo seznam skupinou běžně dostupných písem.

Reaguji na Str4wberryho:
Opraveno.
Xanomes
Profil
Mám takový pocit, že u systémového sans-serif písma to špatně detekuje podporu japonštiny (čaj) - viz obrázek.
Kdyby to někoho zajímalo, prohlížím z Linuxu Mint 17.3 s prostředí Cinnamon s prohlížečem Mozilla Firefox 45.
Chamurappi
Profil
Reaguji na Xanomese:
Řekl bych, že sans-serif není název písma, ale klíčové slovo v CSS, které zastupuje nějaký jiný font. Překvapuje mě, že se prohlížeč vůbec tváří, že takové písmo zná. Já dávám zadaný název do uvozovek, nečekal bych, že font-family: "sans-serif" dopadne dobře…
Mimochodem, jsi si jistý, že to tvé blíže neurčené písmo podporuje znaky z japonštiny?
Xanomes
Profil
Chamurappi:
Řekl bych, že sans-serif není název písma, ale klíčové slovo v CSS, které zastupuje nějaký jiný font.
Jsem si toho vědom, ale to neznamená, že ten nějaký font neexistuje :)

Překvapuje mě, že se prohlížeč vůbec tváří, že takové písmo zná. Já dávám zadaný název do uvozovek, nečekal bych, že font-family: "sans-serif" dopadne dobře…
To mne také překvapuje, ale nefunguje volba Systémový font v tomto PC trochu jinak?

Mimochodem, jsi si jistý, že to tvé blíže neurčené písmo podporuje znaky z japonštiny?
Nejsem si tím jistý, jinak bych nepsal, že "Mám takový pocit, že ... špatně detekuje podporu japonštiny", nicméně podle toho výpisu v pozadí stránky to vypadá pro češtinu i japonštinu jako stejný font (nebo si jsou hodně podobné).

Trošku jsem hledal a vypadá to na Noto Sans, které japonštinu nepodporuje. To je tak, když se člověk nepodívá to nastavení fontů :) stejně si ale myslím, že vypadají podezřele podobně... a podobně podezřele to vypadá u symbolů, tam to dokonce jiný výsledek dává u sans-serif a jiný u Noto Sans, přestože vypadají úplně stejně.

Screeny:
Čeština Noto Sans x Japonština Noto Sans x Symboly Noto Sans x Symboly sans-serif

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0