Jak dostat font-display do fontů z Googlu

Při dalším ladění "našeho projektu" jsem se rozhodl vyřešit poznámku v Pagespeed Insights / Lighthouse (po pravdě jsem to vyzkoumal v Auditu v Nástrojích pro vývojáře v prohlížeči Chrome):
Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný
Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace.
"Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }
Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');
Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:

Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.

Jednoho by z toho...

Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.

A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)

P.F. 2019

Všechno nejlepší do nového roku!

"IČO" nebo "IČ"?

Ještě včera bych se s váma do krve hádal, že správně se má psát "IČ". Svého času to byla pravda. Tehdy jsem sám vedl boj za správnou zkratku a všude možně opravoval hnusné "IČO". Měl jsem také zato, že ke zkrácení této zkratky došlo z důvodu podobnosti s jistým neslušným slovem. Já naiva!

Jisté úkoly mě přivedly k prověření správného tvaru a s pláčem musím přiznat, že

SPRÁVNĚ JE "IČO"!

Lakonickou odpověď najdete u Českého statistického úřadu. Není ale na první pohled jasné, jestli je aktuální.

Čerstvý výklad situace je v článku IČO a IČ, DIČO a DIČ? Pravdy a mýty internetu.

Starší vysvětlení včetně přehledné tabulky vysvětlující, proč je v tom takový zmatek, je "IČ" nebo "IČO", co je správně?.

Jak na dlouhá "slova" na webu?

Jsou věci, co se vrací jako bumerang. Třeba potřeba se popasovat s nezalomitelným textem, respektive dlouhými slovy. Přesněji "slovy". V praxi jde, pokud nebudeme brát v potaz Němčinu, o emailové a webové adresy a parametry notebooků a telefonů, které produktový manažeři s oblibou naperou do názvu, oddělené lomítky a bez dostatky mezer, na kterých by se text mohl v prohlížeči zalomit. Samozřejmě tyto nešvary se připomenou až s vyladěným layoutem (jsem si myslel) a ostrými daty.

První věc, která opravdu nejde ignorovat. Dlouhé "slovo" rozstřelí layout ve flex-boxu. Boxíky postižených produktů se roztáhnou. Zafunguje malé kouzlo. Stačí nastavit na item ve flexu

min-width: 0;
Minimální šířka nemusí být nulová, ale musí být definovaná. Více

• html - How to word-break text in a flex display when the text is long? - Stack Overflow
• Flexbox and Truncated Text | CSS-Tricks

Pak to chce nějak ošetřit samotný text. Při googlení je potřeba zohledňovat stáří rad a návodů. Co platilo před rokem dnes už neplatí, nebo nemusí platit. V CSS lze nastavit pravidla pro dělení a zalamování slov. V kombinaci s media query jde o dobrou pojistku zachování funkčního layoutu a čitelného textu. Použijme třeba podle Dealing with long words in CSS | justmarkup něco jako

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
Více

• Dealing with long words in CSS | justmarkup
• Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) | CSS-Tricks
• hyphens | CSS-Tricks
• CSS Hyphens Not Working in Firefox? - Stack Overflow
• CSS hyphens property

Na všechno styly ale nestačí. Správnému dělení slov pomůžeme znakem měkké dělení. Hojně se řeší, jakou formu zápisu znaku volit, ale aktuálně by to mělo být použití entity

­­­
Pročti si

• Soft hyphen - Wikipedia
• text - Soft hyphen in HTML (<wbr> vs. &shy;) - Stack Overflow
• wbr na www.quirksmode.org

Rovnou jsme se dostali i k HTML5 tagu

<wbr>
který slouží k označení místa, kde se může v případě potřeby text zalomit, ale bez "-". To je přesně to, co je dobré vrazit za výše zmíněná lomítka v názvech.

• <wbr> - HTML: HyperText Markup Language | MDN
• Can I use... Support tables for HTML5, CSS3, etc
• What is <wbr> in HTML5? Why do we need this? - Quora

Dřív se toto nahrazovalo využitím třeba tenké mezery &thinsp;. I další entity, jako třeba &zwnj; a &zwj; můžou najít uplatnění.

• hyphenation - HTML: Soft hypen (&shy;) without dash? - Stack Overflow
• Special Characters [Robin’s HTML 4.0 Conformance Test]
• The Little-Known Preview Text Hack You May Want to Use in Every Email – Litmus Software, Inc.
• &ZWNJ;&NBSP; Preview text hack > Litmus
• Zero-width non-joiner - Wikipedia
• Zero-width space - Wikipedia

Obecně se řešení problémů s dlouhým textem věnuje článek Handling Long and Unexpected Content in CSS | CSS-Tricks.

Toto neberte jako přesný návod, spíš soupis poznámek k navedení, kde hledat nápovědu k dané problematice.

Zlý Chrome aneb jak z přítele zákeřný nepřítel se stal?

Dlouho předlouho již k prohlížení webů i práci Chrome používám. Chvíli trvalo mi sic, než přešel jsem naň z Firefoxu užívání, leč navykl jsem si záhy na všechny udělátka a nechci měnit. Ale poslední dobou se Chrome, respektive Google, nechová vůbec hezky.

Nedávno jsem zjišťoval, co mi asi tak může vytěžovat disk a zpomalovat ne zase tak starý, i když ne zrovna naddimenzovaný počítač. Objevil jsem stále běžící software_reporter_tool.exe - utilitka Chromu pro "zjišťování programů, co by mohl zhoršit zážitek z brouzdání po webu". Aha: nepracuj a brouzdej?

Podle návodu How to block the Chrome Software Reporter Tool (software_reporter_tool.exe) na gHacks Tech News jsem zablokoval přístup k adresáři utilitky (smazání prý nestačí, utilitka se po aktualizaci Chromu zase vrátí) a noťas se o poznání zrychlil.

Další zákeřnost přišla pod praporem bezpečnosti: Google aktivoval Site Isolation všem desktopovým uživatelům Chrome. Když bojujete o každou píď paměti, nepotěší. Podle vlastního pozorování se ale již nainstalovanému Chromu nic takového nezapnulo. Nicméně podle Zvýšení bezpečnosti izolováním webů - Nápověda Google Chrome lze toto nastavení změnit na "adrese" chrome://flags/#enable-site-per-process

Prostě fakt dík, že se o mě tak staráte :-(