Pokud ale vyvíjíte webové aplikace, může se dříve nebo později dostavit požadavek vložit čárový kód i do stránky určené k tisku (například faktura). Samotné vygenerování kódu není takový problém, existují k tomuto účelu desítky různých on-line generátorů i off-line generátorů. Tyto generátory pomocí parametrů v URL vygenerují obrázek, který se klasicky pomocí <img> vloží do stránky.

Samotný problém ale bývá s vložením kódu do stránky tak, aby se zobrazil i na počítači bez internetu (např. při uložení dokumentu na flešku) a aby při tisku nedocházelo k rozostření hran, které jsou způsobeny rozdílem DPI mezi obrazovkou a tiskárnou.

Kvalita tisku

Problém s kvalitou tisku obrázků řešil nedávno na svém blogu i Fakturoid. Řešení je vcelku jednoduché, stačí obrázek vygenerovat třeba ve dvojnásobných rozměrech a ten na stránce stlačit na původní rozměry pomocí <img width="..." height="..." >.

Prohlížeč potom na obrazovce zobrazí kód takřka stejně jako předtím, ale při tisku, který má mnohem drobnější rozlišení, se takový obrázek vykreslí se všemi detaily, tedy včetně ostrých hran čar.

Příklad můžete vidět na tomto čárovém kódu:

Tento čárový kód je zobrazen na obrazovce v poměru 1:1, ale při tisku je jeho kvalita špatná, pro mnoho čteček nepoužitelná.

Stejný kód generovaný ve větším rozlišení:

Tento čárový kód je zobrazen na obrazovce v poměru 1:4. Při tisku je ale zobrazen prvotřídně.

Pozn.: Některé prohlížeče při tisku nevyhlazují obrázky a proto se mohou oba výše uvedené čárové kódy vytisknout zcela stejně.

Aby kód dobře vypadal dobře na obrazovce, je vhodné striktně dodržovat poměr 1:2 nebo 1:4, protože jinak se bude obrázek přepočítávat přes pixely a bude vypadat ošklivě a rozmazaně (na tisk to má ale minimální vliv).

Nehezký efekt při úpravě velikosti obrázku v jiném poměru než 1:2 či 1:4

Pokud už budete takto násilně upravovat velikost čárového kódu, můžete rovnou generovat obrázek o výšce 1px a velikost pak podle potřeby upravit ve stránce obdobným způsoben. U obrázků čárového kódu bez dalších prvků (např. popisku) lze libovolně měnit poměr obrázku, aniž by to mělo na kvalitu jeho zobrazení vliv.

Tisk bez internetu

Klasické vložení pomocí tagu <img src="http://domena.tld/obrazek.png"> má několik nedostatků:

1. Bez připojení k internetu se nic nezobrazí,
2. Není součástí dokumentu (což například u faktury představuje problém),
3. Obrázek se generuje při každém zobrazení faktury znovu,
4. Rozměry obrázku nejsou předem známé, protože ty se definují až při samotném generování podle množství dat.

Všechny uvedené problémy může vyřešit datové URL, tedy obrázek zakódovaný přímo ve zdrojovém kódu stránky. Jeho vytvoření lze v PHP zajistit pomocí funkce base64_encode() a výsledek vypadá následovně:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVQAAAABCAIAAAC+HbKQ
AAAACXBIWXMAAAsSAAALEgHS3X78AAAAlUlEQVRIie2XUQrAIAxD1/sf2v0K25MUW61gPiWm0UZR
a609O2Bmv+O9n55DPhWO4oHqEpRaUWtcqansw4xP0vGua0ZzxgMhKkuKTlROlLnZfPJWLZMVzqai
SRyvJvEr9MLLOZ1/MznmZ+eEcHvx5d931FhHqUWokEnFW7VeEFbe1Rl1T3kHZnv2/hMVTWUu6UTt
QzZeWZgLDmfubaMAAAAASUVORK5CYII=" />

Čárový kód vykreslený pomocí datového URL

Je třeba ale zvážit, jaké bude primární použití takové faktury. Určitá omezení proto mohou dosáhnout na uživatele, kteří budou mít na svých počítačích starší Internet Explorer. Ten si s datovými URL moc nerozumí. Je proto vhodné toto nasazovat pouze v prostředí, kde lze ovlivnit volbu prohlížeče, například pro účely firemního intranetu. Mimo toto kontrolované prostředí lze datová URL využívat za předpokladu, že čárové kódy na dokumentu jsou pouhým doplňkem a netvoří nezbytnou součást takového dokladu.

Velkou chybou je tyto atributy považovat za podobné, nebo dokonce zaměnitelné. A přesto se tomu tak děje, neboť pro začátečníky je jejich použití (tj. tagování elementů pro stylování v CSS) velmi podobné (#id nebo .class).

Ve skutečnosti mají téměř protichůdné chování.

ID dává prvku název. Název, který musí být v daném prostoru jedinečný. Podle tohoto názvu musí být prvek jednoznačně určitelný.

CLASS určuje vlastnosti prvku.

Převedeno na příkladu na lidech, ID je „Jakub Bouček, nar.: 11. 11. 1982“, kdežto CLASS by mohl být: „běloch, černovlasý, vysoký, hubený, programátor“. Zatímco podle ID byste ani na celé zemi nenašli jiného odpovídajícího člověka než mě, tak vychrtlých černovlasých programátorů, věřím, je mnoho.

Podobný systém by se měl dodržovat i při kódování v HTML.

Nečastějším důvodem pro použití ID je potřeba dvojího označení jednoho elemntu. Tedy pokud máte například řadu prvků, které mají určitý CLASS a dodatečně zjistíte, že pro stylovní potřebujete v kódu označit první prvek v této řadě. Zde to přímo láká použít ID.

<div class="trida" id="prvni">...</div>
<div class="trida">...</div>
<div class="trida">...</div>
<div class="trida">...</div>
<div class="trida">...</div>
<div class="trida">...</div>

Ve stylech pak napíšete jen:

div.trida#prvni {...}

Jenže tím si sobě pravděpodobně řežete větev pod vlasním zadkem. Je velká pravděpodobnost, že co nevidět bude třeba mít na stránce podobné řady prvků dvě a nastane problém s tím, že id=“prvni“ nesmí být na stránce použito více než jednou. Pak totiž nezbývá, než vytvářet zvěrstva jako „prvni2″, nebo pravidlo jedinečnosti ignorovat a mít tak nevalidní kód.

Lepším řešeím je proto využít toho, že jeden prvek může mít více class a proto lze zapsat:

<div class="trida prvni">...</div>

div.trida.prvni {...}

Závěrem

Obecně tedy platí, že ID je vhodné použít pouze tehy, pokud je jím jednoznačně označen nějaký přesně určený kus stránky, který pro danou stránku zcela jedinečný.

Proto je například dobré mít pomocí ID stránku rozdělenou na pevně stanovené bloky, což jest: hlavička stránky, hlavní menu, logo stránky, pomocné menu, drobečková navigace, místní nabídka (boční panel), obsah stránky a patička stránky.U těchto bloků se vám nestane, že by se některý mohl někdy v budoucnu opakovat vícekrát na stránce.
A pokud by přecijen nějaká taková situace nastala, že by se kupříkladu na stránce objevily dvě hlavičky, nebude to určitě jen tak a navíc tyto hlavičky budou mít vůči sobě určitě nějaký vztah (nadřazený/podazený), který lze použít pro jejich jednoznačnou identifikaci v názvu ID (např.: sub_header).

A velmi stručně řečeno: nepoužívejte v kódu ID, pokud k tomu opravdu nebudete schopni dokonale obhájit, proč to děláte.

Problematika ID a CLASS jde ještě více do hloubky, ale to už je zcela nad rámec tohoto článku.

Příklad velmi špatného použití ID. Zdroj: pratele.okamzite.eu