Archiv štítku: font

Stylování nenačteného obrázku

Pokud se ve stránce nenačte obrázek, zpravidla to znamená chybu serveru a je potřeba ji opravit. Když je to chyba vašeho serveru, zpravidla to není problém, ale řada stránek načítá obrázky z jiných serverů, např. CDN třetích stran, kde dostupnost nelze moc ovlivnit (a často může být jen dočasná).

Nicméně to návštěvníka nezajímá. Z jeho pohledu stačí, když mu místo nedostupného obrázku zobrazíte něco jiného. HTML k tomuto účelu nabízí atribut ALT, který může (resp. měl by) obsahovat popis toho, co by bylo na obrázku vidět, kdyby se zobrazil. Nicméně obyčejně zobrazený text v základním stylu už dopředu říká „tady něco není v pořádku“ zvláště v okamžiku, kdy máte stránku založenou na speciálním designu.

Námět článku: http://bitsofco.de/styling-broken-images/

Pokračování textu Stylování nenačteného obrázku

Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

Pokračování textu Obrázek v DIVu bez okrajů

Proč nefunguje line-height?

Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?

<div>
    Lorem ipsum dolor sit amet,
    <span>
        consectetur adipiscing elit. ...
    </span>
</div>
div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

Pokračování textu Proč nefunguje line-height?

Google Fonts na stránkách

Již jsme si dříve ukázali, jak vložit do stránky vlastní písmo. Tento přístup ale vyžaduje, abyste příslušné písmo měli a nahráli na svůj web server.

Existuje ale i alternativa, jak použít na webu pěkné písmo, bez nutnosti shánět vlastní písmo a konvertovat ho pro web.

Tím jsou Google Fonts, neboli online knihovna volně dostupných písem. Písma jsou hostována přímo na stránkách Googlu (CDN/Cloud), takže pokud si uživatel jednou písmo stáhne, bude ho moci používat na všech vašich i cizích webech (teď samozřejmě mluvím o cachování – není potřeba nic instalovat). Pokračování textu Google Fonts na stránkách

Ajfouní­ smajlí­ci

Věděli jste, že na iPhonu a iPadu existuje speciální klávesnice „Emoji“ (čteno „emodži„; v přesném překladu z japonštiny „emocionální písmo„), pomocí které můžete psát celou řadu smajlíků? A aby toho nebylo málo, všichni tihle smajlíci mají vlastní UNICODE čísla a můžete je tedy najít v běžně dostupných full-unicode písmech.

Tady je jejich seznam:

😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😒😓😔😖😘😚😜😝😞� 😡😢😣😤😥😨😩😪😫😭😰😱😲😳😵😶😷

😸😹😺😻😼😽😾😿🙀

🙅🙆🙇🙈🙉🙊🙋🙌🙍🙎🙏

🚀🚁🚂🚃🚄🚅🚇🚉🚌🚏

🚑🚒🚓🚕🚗🚙🚚🚢🚤🚥🚧🚨

🚩🚪🚫🚬🚭🚲🚶🚹🚺🚻🚼🚽🚾🛀

V úvodním obrázku pak můžete vidět, jak vypadají na iPadu. Seznam všech smajlíků můžete najít na getemoji.com.

Emoji vzniklo v 90. letech v japonsku a do Unicode sady se dostalo v létě 2009. Momentálně je podporováno na iOS 5+ a MacOS Lion+, Android 4+ a Windows 8+. Naopak třeba na Linuxu většinou nefunguje.

Jak ale zajistit, aby se správně zobrazovali na všech zařízeních bez ohledu na to, zda je přímo podporuje či nikoliv?

Bude potřeba nadefinovat vlastní seznam písem, které se na stránce mají použít.

body { /* Nebo cokoliv co má mít vlastní písmo */
 font-family: /* Fonts for regular text */
 Verdana, Geneva, /* Best fonts for texts (depending on OS) */
 Arial, Helvetica, /* Not as good but still nice looking (available on most OS) */
 sans-serif, /* fallback - use any sans-serif font avaiable on your OS */

 /* Fonts for Smilies (used if no smilies are defined in previous fonts) */
 "Apple Color Emoji", /* Color smilies on iOS5+ and MacOS Lion+ */
 "Android Emoji", /* Smilies on Android 4+ */
 "Segoe UI Semibold", /* Smilies on Windows 8+ */
 "EmojiSymbols", /* Nice smilies font for other devices (Emoji Symbols Font (c)blockworks - Kenichi Kaneko http://emojisymbols.com) */
 Symbola; /* Fallback smilies font for devices that does not have own font and does not support WOFF format of EmojiSymbols font */
}

V první části definujeme běžně dostupná písma pro zobrazení textu (Verdana, Geneva, Arial a Helvetica) a následně upřesníme, že jakýkoliv text se má zobrazit pomocí jakéhokoliv dostupného sans-serif (bezpatkového) písma. Pokud chcete, můžete písma nahradit patkovými nebo vlastními.

Následují písma Apple Color Emoji a Android Emoji, které již svým názvem napovídají, že jde o písma pro zobrazení smajlíků. Ve skutečnosti to ale nejsou písma, protože písmo nemůže obsahovat žádné barvy. Ale když Apple nebo Android zařízení najde příslušné jméno v definici písma, tak ví, že má použít barevné obrázky místo znaků z písma.

Následuje Segoi UI, což je písmo používané ve Windows 6 (Vista a novější), které ve Windows 8 mimo jiné obsahuje právě znaky smajlíků (na rozdíl od Arial, Times New Roman a dalších dostupných ve Windows a běžně používaných na webech).

Tím jsme vyčerpali (snad) všechna písma (a pseudo-písma) dostupná na všechny systémech. A zbývající systémy (starší Androidy, staré Windows, Linux, ostatní mobilní platformy atd.) budou muset vystačit s písmem, které jim do webu přiložíte.

Jak již bylo uvedeno v návodu Vložení vlastního písma do HTML, můžete do webové stránky přiložit písmo, které pak bude použito pro zobrazení textu. Teď toho využijeme a přiložíme další dvě písma právě pro zobrazení smajlíků.

Písmo EmojiSymbols je speciální písmo, které kromě běžných znaků (vzhledem k tomu, že pochází z Japonska, tak obsahuje i všechny asijské znaky) obsahuje i smajlíky. Jeho nevýhodou je, že je licencované a dodávané pouze pro formát WOFF, který podporují pouze novější prohlížeče. A do CSS vždy musíte uvést jméno autora, tak jak je uvedeno v příkladu výše.

Proto je ještě přiloženo i písmo Symbola, které můžete (díky licenci „free for any use“) klidně zkonvertovat na všechny potřebné formáty. Jeho výhoda i nevýhoda je, že obsahuje úplně všechny znaky dostupné v UNICODE sadě, takže po jeho přiložení byste již nikdy neměli mít problém s nezobrazováním znaků na své stránce, ale na druhou stranu díky tomu je hodně velké (skoro 2MB, přes 5MB v SVG formátu) a proto se bude pomalu načítat (takže smajlíci se na webu objeví až po chvíli).

Na závěr jsou zde ještě definice písem pro případ, že nechce používat nástroje pro jejich vygenerování (viz odkaz výše):

@font-face {
 font-family: "EmojiSymbols";
 src:
 url(http://emojisymbols.com/font/EmojiSymbols-Regular.woff") format("woff"), /* download from original web for caching (shared with other webs) */
 url("emojisymbols.woff") format("woff"); /* fallback if original font is not available for download */
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "Symbola";
 src: url("symbola.eot");
 src:
 url("symbola.eot?#iefix")
 format("embedded-opentype"),
 url("symbola.woff") format("woff"),
 url("symbola.ttf") format("truetype"),
 url("symbola.svg#OpenSans")
 format("svg");
 font-weight: normal;
 font-style: normal;
}

Vysvětlení

Možná se divíte, proč je možné, že písma uvedená na konci seznamu font-family se použijí pro zobrazení smajlíků, když před nimi je uvedena celá řada jiných písem.

Běžně se u definice font-family uvádí, že „prohlížeč použije první písmo ze seznamu, které je na daném zařízení dostupné“, což vyvolává dojem, že např. pokud uvedete jako první Arial, tak pod Windows bude na všechno použito vždy písmo Arial.

To ale není tak úplně pravda, protože prohlížeče (a i jiné programy pracující s písmy) neprovádí hledání písma pro daný element (např. odstavec), ale jednotlivě pro každý znak, který je potřeba vykreslit.

To můžete znát např. z některých webů (nebo špatně udělaných reklamních letáků), že text je napsán v nějakém pěkném (třeba psacím) písmu a české znaky (např. ř, ů, ň, apod.) jsou napsány nějakým ošklivějším (tiskacím). To je právě proto, že autor použil západní písmo, které české (východoevropské) znaky neobsahuje a tak je prohlížeč (nebo grafický program) nahradil tak, aby byly pořád čitelné.

A stejně pracuje výše uvedená definice písem pro smajlíky, protože běžně dostupná písma je neobsahují, tak pro ně prohlížeč použije speciální písmo z konce seznamu, zatímco pro běžný text použije písma přesně v tom pořadí, jak jsou nadefinována.

Opačný případ, kdy místo některých znaků vidíte čtverečky, je způsoben některými písmy, které dané znaky obsahují, ale mají pro ně použit právě onen čtvereček, a proto prohlížeč (program) nepozná, že má použít jiné písmo.

MySQL

MySQL databáze sice podporuje UTF-8 ale pod nastavením „utf8“ podporuje pouze 3-bytové znaky. Jelikož smajlíci a podobné nové znaky jsou v UTF-8 zakódovány jako 4-bajtové, dojde zpravidla k jejich oříznutí.

Aby šly smajlíci uložit do databáze, musíte změnit kódování na utf8mb4. To je podporováno od verze 5.5.3, takže pokud máte starší, budete ji muset updatnout.

Nejprve změňte kódování databáze:

ALTER DATABASE database_name
    CHARACTER SET = utf8mb4
    COLLATE = utf8mb4_unicode_ci;

V PhpMyAdmin stačí kliknout na jméno databáze a pod Úpravy změnit Porovnávání.

Následně je potřeba změnit všechny tabulky:

ALTER TABLE table_name
    DEFAULT CHARACTER SET utf8mb4
    COLLATE utf8mb4_general_ci;

V PhpMyAdmin opět stačí kliknout na jméno tabulky a pod Úpravy – Parametry tabulky změnit hodnotu Porovnávání.

Ve třetím kroku musíte změnit kódování všech sloupců, které obsahují text, varchar, apod. Např.:

ALTER TABLE table_name
    CHANGE column_name
    CHARACTER SET utf8mb4
    COLLATE utf8mb4_general_ci;

V PhpMyAdmin musíte pod strukturou tabulky upravit všechny sloupce a změnit jim Porovnávání.

Po změně databáze byste ještě měli všechny tabulky opravit a optimalizovat, aby správně fungovali:

REPAIR TABLE table_name;
OPTIMIZE TABLE table_name;

Případně z příkazové řádky:

$ mysqlcheck -u root -p --auto-repair --optimize --all-databases

V PhpMyAdmin najdete tyto možnosti pod Úpravy jako Opravit tabulku a Optimalizovat tabulku.

Pokud máte přistup i k MySQL konfiguraci, můžete nastavit výchozí kódování i tam, čímž zajistíte, že se budou znaky správně kódovat při přenosu z a na MySQL server:

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

Na straně PHP či jiného serveru by nemělo být potřeba měnit nic, protože pokud jste již teď měli správně nastaveno UTF-8, nic se nemění. Ostatní jazyky a servery správně podporují UTF-8 včetně mb4 (4-bytové znaky). PhpMyAdmin ale nemusí správně zobrazovat dané znaky, protože ne vždy správně nastaví kódování.

Javascript vždy pracuje s unicode znaky, takže tam není potřeba měnit vůbec nic.

Vložení vlastního písma do HTML

Máte svůj pěkný font, který byste chtěli použít na webu? Tady je postup, jak to udělat „správně“.

Výchozí formát písma

Nejprve potřebujete připravit písmo ve správném formátu, tedy TTF (TrueType) nebo OTF (OpenType). Navíc musí být toto písmo označené jako „instalovatelné“ (neboli „volně šiřitelné“). Pokračování textu Vložení vlastního písma do HTML