Weblabor

Biztos sok olvasóval megesett már, hogy egy érdekes weblap tartalmát ki szerette volna nyomtatni, hogy mindig kéznél legyen, de a nyomtatóból kiáramló papírrengetegre pillantva azt vette észre, semmi értelme: a papíron minden design-elem helyet kapott, a legfontosabb rész, a tartalom viszont csak torzítva, vagy egyáltalán nem jelent meg – a webmester ugyanis „elfelejtett” gondolni egy „apróságra”, történetesen arra, hogy a nyomtatóra nem lehet ugyanazt a tartalmat küldeni, mint a képernyőre. Hogy mi ilyen súlyos hibát ne követkessünk el, íme pár sor, melyből megtudhatjuk, hogyan készítsünk olyan oldalt, mely képernyőn és nyomtatón is ugyanolyan jól mutat.

Két megoldás

A bemutatandó megoldás nem egy külön oldalon megjelenő, nyomtatóbarát verzióról fog szólni, mely aztán egy popupban nyílik meg, ez nagyon rossz út. Legjobb tudásom szerint a következőkben egy CSS nyújtotta, sokkal jobb és korszerűbb megoldást próbálok meg bemutatni.

A jó megoldás

A jó megoldás mindenféleképpen a CSS használata. Előnyként hozható fel elsősorban a rugalmasság, az egyszerűség, a gyorsaság (hisz a felhasználónak nem kell külön oldalak letöltésével bajlódnia). A CSS a nyomtatáshoz szükséges részét minden mai modern böngésző (Mozilla Firefox, Internet Explorer 6, Opera...), ha nem is teljeskörűen, de elégségesen támogatja.

Az elméleti rész mellett egy konkrét példával is szolgálok majd, ami nem más lesz, mint a Weblabor megoldása. Ez az oldal is a következőkben leírtakat veszi alapul, és nem is teszi ezt rosszul.

Az alapok

Mindenekelőtt tegyünk említést arról, milyen eszközöket tudunk felhasználni célunk elérése érdekében. A legfontosabb a @media CSS szabály, mely lehetővé teszi egy CSS stílus hozzárendelését konkrét médiumhoz. Használata CSS-ben valahogy így néz ki:Persze lehetőségünk van egy külön CSS fájlt is hozzárendelni bizonyos médiumokhoz:Itt ahogy a fentiekből talán egyértelműen látható, a media tulajdonság határozza meg, milyen médiumhoz lesz az adott CSS fájl rendelve (a továbbiakban is ezt az egyszerűbb beágyazási formát fogom használni az @import-os megoldás helyett). A médium egyébként elég széles skálán mozoghat, a képernyőn és a nyomtatón kívül a CSS ajánlás a domború Braille írástól kezdve a kivetítőkig 9 fajta célt sorol fel, de lehetőséget ad a bővítésre is.

Fontosnak érzem még megemlíteni, hogy vannak olyan CSS tulajdonságok, melyek az összes médiumnál alkalmazhatóak (color, font-face, ...), és vannak olyanok is, melyeket csak egy bizonyos médiumnál alkalmazhatunk (illetve van értelme alkalmazni), ilyen pl. az oldal tördelésének beállítására szolgáló tulajdonság, a page-break-before és page-break-after, ami például képernyő médium esetén értelmét veszti.

Beágyazás, de hogyan?

Mindekelőtt keszítsünk egy print.css-t, melyet a másik (képernyőre szánt) CSS-el együtt (továbbiakban csak main.css) helyezzünk egy css nevű könyvtárba.

Két lehetőség adott a print.css beágyzására: az elsőt akkor alkalmazhatjuk, mikor csak és kizárólag a print.css-t használjuk nyomtató médiumra, vagyis a gyakorlatban ez valahogy így néz ki:Ebben az esetben nyomtatóra csak a print.css lesz „küldve“, ami azt jelenti, hogy oldalunk csupasz (formázatlan) változatához képest kell a CSS fáljunkat felépítenünk.

A másik megoldás az, mikor a main.css–hez képest formázzuk a CSS-t (azaz ami másképp van nyomtatásban, pl. nem megjelenítendő, csak azt bíráljuk felül), a kódban ez így néz ki:Azt a megoldást érdemes alkalmaznunk, amelyik kisebb print.css-t eredményez, illetve praktikusabb kialakítani, karbantartani. Döntsük tehát el, mihez akarjuk, hogy a nyomtatható verzió jobban hasonlítson: a csupasz változathoz, vagy a képernyőn látottakhoz.

Kezdjünk neki

A következőkben az eddigi bevezető után az alapvető lépéseket vesszük sorra egy nyomtatáshoz való CSS kialakítása kapcsán. A továbbiakban a már meglévő oldal CSS-ére fogunk építeni, az abban meglevő részeket felüldefiniálva fogjuk felépíteni a CSS-t.

Hová tűnt a menü?

A felvezetőszövegből remélem mindenki számára egyértelmű, hogy a menüt, a fejlécet, meg egyéb díszítőelemeket nyomtatni felesleges. A megoldás kézenfekvő: tüntessük el őket egy display: none; értékkel. A kiválasztóknál soroljuk fel nyugodtan az összes elemet az oldalon, amit nem szeretnénk, hogy megjelenjen a nyomtatásban. Ez a fejlécen, láblécen, menün kívül lehet bármilyen elem - persze feltétel, hogy CSS segítségével ezt meg tudjuk jelölni (vagyis úgy kell felépíteni a HTML oldalt, hogy ez lehetséges legyen - ha CSS alapú az oldalunk megjelenése, akkor ez valószínűleg már így van).

Csak nyomtatáskor!

Olyanra is bizony sokszor van szükségünk, hogy az adott szöveg, kép stb. csak nyomtatáskor jelenjen meg, pl. a Weblabor oldalain ilyen a Copyright szöveg. A megoldás egyszerű: a main.css-ben kell az elem display tulajdonságát none-ra állitani, a print.css-ben pedig ezt vissza kell állítani láthatóra. Például:

Margók

A CSS 2 @page utasítása lehetővé teszi oldalak margójának beállítását minden oldalakat használó médium számára. Írjuk tehát bele a print.css-ünkbe a következő sorokat:A fentiek hatására az oldal tetején és alján 2 centiméteres, a két oldalán pedig másfél centiméteres margónk lesz. A @page utasítást mindazonáltal ajánlott elhagyni, mert nem garantált, hogy minden böngésző támogatja, a nyomtató pedig eleve oldalakat használó médium.

Címsorok

(X)HTML-ben címsor alatt a <hX> és </hX> elemek közé zárt tartalmat értjük. A DTP (kiadványszerkesztés) világából ismert szabály szerint az oldal sosem fejeződhet be címsorral, célszerű ezt alkalmaznunk nekünk is. A CSS 2 erre kínál megoldást, nézzünk egy példát:Ezzel elértük, hogy a címsor után soha ne következzék sortörés. Magyarán: ha itt nem lehet sort törni, akkor a címsor is átkerül a következő oldalra. Azt is beállíthatjuk, hogy pl. a <h1>, azaz az elsődleges címsorok mindig új oldalon kezdődjenek (hosszú szöveg esetén átláthatóbb, ha a legfontosabb címeket külön oldalon kezdjük), a többi (<h2> ... <h6>) maradhat azonos oldalon:Most, hogy ilyen jól megismerkedtünk e két tulajdonsággal, foglaljuk össze, milyen értékeik lehetnek:

• always – törjön sort
  
• avoid – ne törjön sort
  
• auto – törjön sort, amennyiben az szükséges
  
• left – törjön sort úgy, hogy az elem mindenképp bal (páros számú) oldalon jelenjen meg
  
• right – törjön sort úgy, hogy az elem mindenképp jobb (páratlan számú) oldalon jelenjen meg
  
• inherit – öröklődjön a tulajdonság
  

Figyelem! Nem minden böngésző támogat minden tulajdonságot. Internet Explorer 6, Firefox 1.x, Opera 8.x az első három értéket (always, avoid, auto) jól támogatja, a többit csak részben böngészőtől függően, így csak az első három használata javasolt csak.

Linkek nyomtatása

Egy klasszikus hivatkozás így néz ki: <a href="http://www.netman.sk">www.netman.sk</a>. (Ízlés szerint a target attribútummal is kiegészíthető.) A linkek nyomtatásakor a href attribútumot és a CSS 2 tartalomkezelő tulajdonságait fogjuk felhasználni:Mit is jelent ez? Az after annyit tesz: utána, vagyis amit most készülünk meghatározni, az a hivatkozás után fog következni. A content-tel pedig azt a tartalmat határozzuk meg, amit a CSS-nek ide kell beszúrnia. Az attr(x) kifejezésben az x a kiválasztónak (jelen esetben egy linknek, azaz az <a>-nak) egy tulajdonsága. Így mostmár összeállt a kép. Egy weblabor.hu-ra mutató link tehát nyomtatásban valahogy így fog kinézni:

Bővebb információért látogasd meg a Weblabor [http://weblabor.hu] oldalát!

Célszerű a hivatkozás szövegét és URL-jét ehhez hasonlóan formázni:Az after kiválasztó, illetve a content Internet Explorer 6 alatt nem fog működni, azonban mivel mellékhatása nincs, s a többi böngészőben praktikus a használatának a végeredménye, ezért használatuk javasolt.

Szöveg nagysága és típusa

Ügyeljünk arra, hogy a szöveg nagyságára vonatkozó értékeket ne pixelekben adjuk meg, ugyanis a nyomtató esetében ez nem olyan egyértelmű, mint a pontokban történő értékadás (a pixel mérete a nyomtatási felbontástól függ). Ajánlatos például 12pt–t használni, ugyanis ez még viszonylag könnyen olvasható, és nem foglal olyan sok helyet. Magyar nyelvben ajánlatos lehet még a 13pt a szükséges írásjelek (ékezetek) miatt.

Ajánlatos még valamilyen talpas betűt használni (pl. Times New Roman), mivel nyomtatott médiumnál a sorok így sokkal könnyebben olvashatóak. A feliratokat viszont, hogy elkerüljük az "egyhangúságot", bátran írjuk (írhatjuk) talpatlan betűtípussal.

Fehér háttér, fekete betű

Erre is ügyeljünk! Az oldalunk lehet, hogy szépen néz ki a képernyőn fekete háttérrel, fehér betűkkel, esetleg háttérmintával és lila szöveggel, de biztos ami biztos, egy ilyet mindig helyezzünk el a CSS-ben:Szándékosan nem background-color–t írtam. Ugyanis ha esetleg háttérképet használunk, a background-color: white; tulajdonság ezt nem "semlegesíti", viszont a background: white; igen. A background parancs ugyanis a background-color, background-image, background-repeat, background-attachement és background-position tulajdonságok rövidített (összevont) változata, így ha csak annyit adunk értéknek: white, egyértelmű, hogy a többi marad alapérték, ami background-image esetén none. Hozzá kell tenni, hogy alapbeállításban a nyomtatásnál nem lesz megjelenítve a háttérgrafika, de ha ez esetleg felül van bírálva a felhasználónál, akkor oldal háttértől függően persze, de gondot okozhat.

CSS a gyakorlatban

Elérkeztünk az utolsó fejezethez. Most lehull a lepel, ugyanis ami most jön, az nem más, mint az előzőekben leírt módszer gyakorlatban történő bemutatása, mégpedig a Weblabor oldaláról, a Weblabor print.css-ével:
Itt kiemelném a linkek megjelenítését a Weblabor nyomtatott oldalain:Aláhúzás és egyéb dekoráció nincs, a szín örökölt.

És most jön a varázslat. Elővarázsolunk egy zárószöveget (footer-t), ami csak és kizárólag nyomtatásban jelenik meg. Ehhez ez van a CSS-ben:A következő pedig a HTML-ben:Ez minden Weblaboros oldal alján ott van, csak ha megnézzük a képernyőre szánt CSS-t, láthatjuk hogy az a bizonyos display tulajdonság none értéke okozza a láthatatlanságát.

Összegzés

Az oldalak leggyakrabban nyomtatóbarát verziót is kínálnak tartalmaikból, viszont ezek általában új oldalként, leggyakrabban pop-up ablakban nyílnak meg. Ezen megoldás rengeteg hátránya és az általam bemutatott megoldás rengeteg előnye ösztönzött arra, hogy leírjam, így is lehet, sőt: így kéne. A cikk a CSS segítségével történő nyomtatóra való optimalizációt írja le, így egy kalap alatt képernyőn és nyomtatón is tökéletes a végeredmény.
Ha valamivel nem értesz egyet, szólj hozzá a cikkhez, és megbeszéljük.