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 :-(

PostgreSQL, collations a tři dny trápení

Po nějakých úpravách v projekty došlo na upgrade databáze. Na stránce PostgreSQL: Windows installers jsem sáhl po instalaci Postgres od BigSQL. Ostatně tak, jak mi bylo doporučeno. Build projektu ovšem začal padat na collations. A přidání chybějících collations, podle všech návodů to mělo vše vyřešit, nešlo, protože prý:

ERROR:  nondefault collations are not supported on this platform

Dál jsem pátral po internetech, procházel fóra, ale radu nenalézal. Až asi opravdu po třech dnech pátrání (mezitím jsem dělal i něco jiného, nebojte se) jsem se dopátral rady nainstalovat jinou verzi. No ano, PostgreSQL od EnterpriseDB problém "vyřešila".

Není PostgreSQL jako PostgreSQL.

(Samozřejmě jsem vyzkoušel i dřívě ověřený postup dle Marenkův bloček: Update Windows 10 a nefunkční PostgreSQL (RESOLVED), marně.)

Mno, samozřejmě je potřeba ještě doplnit ty které chybějící collations:

CREATE COLLATION "cs_CZ" (LOCALE="Czech");
CREATE COLLATION "de_DE" (LOCALE="German");
CREATE COLLATION "en_US" (LOCALE="English_US");
CREATE COLLATION "hu_HU" (LOCALE="Hungarian");
CREATE COLLATION "pl_PL" (LOCALE="Polish");
CREATE COLLATION "sk_SK" (LOCALE="Slovak");