Moderní uživatel vyžaduje rychlou a jasnou cestu k informacím a to nejen v podobě digitální, ale i klasické tištěné. Řečeno jinými slovy, připravte uživateli pro tisk speciální tiskovou verzi, která zobrazí pouze relevantní část stránek bez zbytečné grafiky a případných reklam a bude spokojen.
V dřívějších dobách se využívaly speciální tiskové stránky generované na straně serveru, avšak většina obsahu byla statická a tedy zcela bez rozumné možnosti tisku. Proto se většina klasických uživatelů chová velmi rezervovaně a bojí se tisknout ve strachu z vytisknutí celé barevné stránky (test megapixel.cz na h1.cz). Takto vytvářené verze jsou z hlediska provozovatele zatěžujícím řešením, které vyžaduje speciální úpravy pro generování kódu (neuniverzálnost, zátěž serveru, malá flexibilita, duplicitní obsahu a nutnost ošetření pro vyhledávače). Dalším přitěžujícím aspektem je nepohodlí uživatele, který musí uzavírat nově otevřená okna s tiskovou verzí nebo se musí vracet zpět na původní „plnou“ stránku.
Moderní tisková verze je vysoce flexibilní řešení odehrávající se na straně klienta pouhým přepnutím kaskádového stylu. Uživatel tak dostává na tiskárnu výstup plně respektující charakteristiky pro tisk. Z hlediska provozovatele obsahu je tato varianta maximálně výhodná pro svou jednoduchost, univerzálnost a přesnost. Tyto verze se vyznačují několika základními rysy: optimalizace velikosti písma a prokladu, optimalizace použití barev, uvolnění šířky pro tisk na různé rozměry papírů, vypuštění veškerých nepodstatných elementů a reklam, odstranění specifik používaných pro zobrazení na obrazovce, doplnění informací, které je možné získat pouze interaktivně (cíle odkazů). Výsledek je snadno čitelný obsahující hlavičku s logem a názvem společnosti, vlastní obsah (článek, produkty shopu) a patičku s kontaktními informacemi.
Výraznou pomocí pro budování tiskových verzí jsou speciální stylopisy, tzv CSS frameworky (o nich v dalším článku).
Základ univerzálního tiskového stylu:
/* obecná nastavení formátovaná pro celý web */
@import url('globals.css');
/* nastavení hlavních parametrů pro tiskovou verzi */
body {width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; color: #000; background: none; font-size: 10pt;}
/* Definice velikostí písma nadpisů a dalších elementů */
h1 {font-size: 16pt;}
h2 {font-size: 14pt;}
h3 {font-size: 12pt;}
h4, h5, h6 {font-size: 10pt;}
code, pre {font: 8pt Courier, monospace;}
blockquote {margin: 1.3em; padding: 1em; font-size: 8pt;}
hr {background-color: #ccc;}
img {float: left; margin: 1em 1.5em 1.5em 0;}
a img {border: none;}
/* Formátování odkazů */
a:link, a:visited {background: transparent; font-weight: 700; text-decoration: underline;color: #333;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 90%;}
a[href^="http://"] {color: #000;}
/* Formátování tabulek */
table {margin: 1px; text-align: left;}
th {border-bottom: 1px solid #333; font-weight: bold;}
td {border-bottom: 1px solid #333;}
th, td {padding: 4px 10px 4px 0;}
tfoot {font-style: italic;}
caption {background: #fff; margin-bottom: 2em; text-align: left;}
thead {display: table-header-group;}
tr {page-break-inside: avoid;}
/* Skrytí nepotřebných bloků */
#mask-head, #mask-contleft, #mask-showpath {display: none;}
/* Doplňkové formátování bloků */
#mask-foot {margin-top: 2em; padding-top: 1em; border-top: solid #666 1px; text-align: right; font-size: 90%;}
Kde umístit odkaz na tisk?
Velmi diskutovaným je chování uživatelů při tisku a již výše zmiňované obavy „Co všechno se mi vytiskne?“. Z mnoha úvah nejlépe vychází umístění ikony pro tisk v pravém horním rohu obsahové části. Zde, nehledě na design webu, si odkazu uživatel všimne nejsnáze. Navíc ikona nebo text umístěný v tomto prostoru evokuje přidružení právě obsahu, který si uživatel chce vytisknout. Ikonu nebo text spouštějící tisk je vhodné opatřit kódem, který uživatele informuje o následujícím procesu tisku a dá mu možnost tisk zrušit:
Další možností, jak „rozmazlit“ uživatele je zobrazení tiskové verze výměnou tiskového stylu pomocí javascriptu odkazem na původní vzhled.
Javascript obsluhující náhled tisku a vlastní volání okna pro tisk:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent ( function() { add_print_link( 'nav' ) } );
function add_print_link( id ) {
if( !document.getElementById || !document.getElementById( id ) ) return;
var print_page = document.getElementById( id );
// vytvořit odkaz na tisk
var print_function = document.createElement('p');
print_function.className = 'print-link';
print_function.onclick = function(){ print_preview(); return false; };
print_function.appendChild( document.createTextNode( 'Tisknout stránku' ) );
}
function print_preview() {
// přepnutí stylů
setActiveStyleSheet('Náhled tisku');
// vytvoří hlášku o náhledovém zobrazení
add_preview_message();
// zavolá okno s výběrem tiskárny
window.print();
}
function add_preview_message() {
var main_content = document.getElementById('content');
var main_body = main_content.parentNode;
if (document.getElementById) {
var preview_message = document.createElement('div');
preview_message.id = 'preview-message';
// vytvoří nadpis
var preview_header = document.createElement('h3');
var preview_header_text = document.createTextNode(Toto je náhled tisku stránky.');
preview_header.appendChild(preview_header_text);
// vytvoří odstavec
var preview_para = document.createElement('p');
var preview_para_text = document.createTextNode('Samozřejmě bez této hlášky. ');
var cancel_function_link = document.createElement('a');
cancel_function_link.onclick = function(){ cancel_print_preview(); return false; };
cancel_function_link.setAttribute('href', '#');
var cancel_function_link_text = document.createTextNode('Zpět na plnou stránku.');
cancel_function_link.appendChild(cancel_function_link_text);
preview_para.appendChild(preview_para_text);
preview_para.appendChild(cancel_function_link);
// sloučí nadpis a odstaves
preview_message.appendChild(preview_header);
preview_message.appendChild(preview_para);
main_body.insertBefore(preview_message, main_content);
}
}
function cancel_print_preview() {
// odstraní hlášku o náhledu tisku
var print_preview = document.getElementById('preview-message');
var main_body = print_preview.parentNode;
main_body.removeChild(print_preview);
// vrátí standardní styl
setActiveStyleSheet('default');
}
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
CSS zobrazující blok s informací o zobrazení náhledu tiskové verze a odkazem „zpět“ na normální vzhled @import "print.css";
#preview-message {display: block; border: 1px solid #666; background: #FF6; padding: 2px 5px;}
Pro jakou verzi se rozhodnout?
Nejlépe uživatelsky hodnocené a vítané řešení je často to nejjednodušší. A to: vytvořit jednoduchý tiskový (CSS) styl zobrazující pouze důležité informace na stránce, umístit ikonu/odkaz na tisk k obsahové části a na ni aplikovat titulek s informací o funkci ikony plus javascript informující (pomocí alert okna) o možnosti tisku. Možné zobrazení tiskové verze popisované v druhém případě je nadstandardní řešení vhodné pro určité skupiny uživatelů.
