ugrás a tartalomhoz

CSS lépésről-lépésre: nyomtatás

netman · 2005. Okt. 2. (V), 20.00
CSS lépésről-lépésre: nyomtatás
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:

@media print {
 body {color: black; background-color: white;}
}
Persze lehetőségünk van egy külön CSS fájlt is hozzárendelni bizonyos médiumokhoz:

<link rel="stylesheet" href="style.css" type="text/css" media="screen, print" />
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:

<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
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:

<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
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.

#header, #footer, #menu, #breadcrumb {
    display: none;
}
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:

#copyright {
    display: block;
}

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:

@page {
    margin-left: 1.5cm;
    margin-right: 1.5cm;
    margin-top: 2cm;
    margin-bottom: 2cm;
}

/* vagy rövid alakban: */

@page {
    margin: 2cm 1.5cm;
}
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:

h1, h2, h3, h4, h5, h6 {page-break-after: avoid;}
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:
h1 {page-break-before: always;}
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:

a:after {content: " [" attr(href) "] ";}
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:
a:link, a:visited, a:hover, a:active {text-decoration: underline; color: black;}
a:after {text-decoration: none;}
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:

body {color: black; background: white;}
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:
a {
    text-decoration: none;
    color: inherit;
}
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:
.print-footer {
    font-size: 10px;
    border-top: 2px solid black;
    margin-top: 2em;
    padding: 1em;
}
A következő pedig a HTML-ben:
<div class="print-footer">
Ennek az oldalnak az eredeti elérhetősége: <strong>http://weblabor.hu/</strong><br />
A Weblabor (HU ISSN 1785-9573) lapjain megjelenő tartalmak a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 licenc alatt érhetőek el, és használhatóak fel. A licenc a <strong>http://creativecommons.org/licenses/by-nc-sa/2.0/</strong> címen olvasható.
</div>
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.
 
netman
A felvidéki születésű (Matkovsky Péter) Budapesten él és dolgozik frontend fejlesztőként a (kuix) berkein belül.
1

Kiegészítés

yaanno · 2005. Okt. 3. (H), 08.08
Igen hasznos cikk. Egy alternatív megoldás a linkek nyomtatásához: footnote links - igaz, ebben javascriptnek is van szerepe.
2

Kompatibilitás

Poetro · 2005. Okt. 3. (H), 12.46
Azon böngészőknek, akik nem ismerik a média megjelölést is lehet megoldás, legalábbis arra, hogy ne a nyomtatható külalakkal jelenjen meg a tartalom:

<link href="main.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="print">
<!--
@import url(main_print.css);
-->
</style>
Ebben az esetben ugye mivel nem ismeri a media megjelölést feltehető, hogy a böngésző nem ismeri az @import css direktívát se, ezért a nem illeszti be a nyomtatandó változat css-ét ezzel nem rombolva szét a külalakot.
--------
Poetro
11

Kompatibilitás

Balogh Tibor · 2005. Okt. 5. (Sze), 06.02
Ez nem lesz jó, helyette a cikkben ajánlott megoldás használata javasolt. A nyomtatóbeállításokat tartalmazó stíluslapban is a következő beállítás használata:

@media print {
   ... további css beállítások
   ... nyomtatáshoz
}
Ekkor, ha nem ismeri a böngésző a media beállítást, az egész további beállításokat figyelmen kívűl fogja hagyni. Az import utasítást ettől még ismerheti (IE 5.5).
Lehet, hogy IE 5.5 alatt pont ennek a beállításnak a hiánya miatt jelenik meg a weblabor úgy, ahogy.

Megnéztem, ha a weblaboron kijavítanák a print.css fájlt, akkor az ie 5.5-ben is szép színes lenne. Már ha nem cél az ie5.5 használók kizárása a weblapról.
3

Linkek nyomtatása

Tome · 2005. Okt. 3. (H), 15.06
Az after kiválasztó, illetve a content Internet Explorer 6 alatt nem fog működni...
Meg lehet oldani ezt a problémát is: Javaslatok a linkek nyomtatásban történő megjelenítésére
4

Firefox hiba

Darkfish · 2005. Okt. 3. (H), 19.05
Azonban itt megjegyzendő, hogy a Firefox az overflowot hibásan kezeli, és ezért néha többoldalas doksikat egyoldalasnak kezel, a "maradék" meg kicsúszik az oldal alján. + nálam mindenáron csak fekvő A4-es formátumban hajlandó dolgozni.
5

Konkrétabban?

Bártházi András · 2005. Okt. 3. (H), 19.51
Mit értesz az alatt, hogy a Firefox az overflow-t hibásan kezeli? A fekvő/álló média megadásának lehetősége nincs implementálva a Firefoxban, azért nem működik (plusz nagyon bizonytalanul mondom, de azt hiszem a CSS 2.1-nek nem is része az oldal orientációja).

-boogie-
6

Mást. :-)

Darkfish · 2005. Okt. 4. (K), 00.28
Bocs rosszul emlékeztem. Nem az overflow-t. Konkrétan ezt:
[Bug 154892] Splitting Absolutely positioned frames not implemented

Az meg rendben volna, hogy fekvő/álló média beállítása nincs implementálva, de akkor minek rakják ki a gombot a képernyő tetejére?
7

Bug és média

Bártházi András · 2005. Okt. 4. (K), 07.56
A bugot illetően nem egyértelmű számomra, hogy tényleg frame-ekről beszél-e, vagy általában abszolút pozícionált elemekről. Ha frame-ekről, akkor a megoldás nagyon egyszerű: nem használunk frame-eket. Publikus oldalon ma már nincs értelmük. Egy publikus weblap esetében, ahol a tartalom a lényeg (cikkoldal), ott a div-ek esetén is felesleges abszolút pozícionálást használni, ezért annyira én nem találom kritikusnak ezt a problémát.

Ami a fekvő/álló médiát illeti, te a nyomtatás közben kiválaszthatóságról, én pedig a CSS-ből kikényszeríthetőségről beszélek. Nekem még semmilyen gondom nem volt a nyomtatás közben kiválaszthatósággal, mind álló, mind fekvő A4 méretben szépen tud nyomtatni. Talán a nyomtatódriverrel van probléma, nem tudom.

-boogie-
8

Nam baj

Darkfish · 2005. Okt. 4. (K), 10.20
Persze nem okoz különösebb gondot, csak azért írtam, hogy aki belefut ne csodálkozzon. Mit mondjak én is rettentően örültem, hogy miután átírtam egy bonyolultabb oldalt cssre, utána már nem kellett a nyomtatással vacakolnom. Az egyetlen gond az volt, hogy ügyfelek továbbra is keresték a "Nyomtatható változat"-ot. :-)
ps.: fekvő-álló úgy látszik, valóban csak nálam gond, azonban másnál is jelentkezik, hogy görgővel lapozva csak 1.5 oldalakat lehet "lapozni" utána a scrollbarra kell klikkelni, de ez nem nyomtatási, és legkevésbé css gond.
9

Megint

Bártházi András · 2005. Okt. 4. (K), 20.54
Az megint egy teljesen másik (ismert) gond, amit említesz.

-boogie-
10

Előnyök, hátrányok

Bártházi András · 2005. Okt. 4. (K), 21.03
A cikkből hiányzott számomra a konkrét előnyök, hátrányok összegyűjtése. A sablonrendszerek korában, amikor egy külön nyomtatási oldal elkészítése 15 perc miért éri meg, hogy mégis a CSS alapú megoldást válasszam? Mi a helyzet akkor, ha egy hosszú cikket több oldalra tesz ki az ember lapozhatóan (ekkor ugyanis bármit csinálok, CSS-ből nem fogom tudni elővarázsolni a többi oldalt)?

Félreértés ne essék, én is (lásd Weblabor és még pár további site) a CSS alapú nyomtatási oldal mellett vagyok. A külön nyomtatási oldalnak talán egyszerűen nincsen értelme, illetve vannak olyan dolgok, melyek tényleg csak a CSS segítéségével oldhatóak meg (a címsorok új oldalakra tördelése, stb.). A lapozható oldalakat JavaScript segítségével megtrükközhetjük, az oldalon kinn lehet a teljes szöveg - bár ez egy nem túl szép megoldás.

-boogie-
12

php?

daniel takacs · 2005. Okt. 5. (Sze), 14.40
Ezen már én is gondolkoztam (egy javascriptes egyoldalas megjelenítést sikerült nekem is produkálni - valóban szerencsétlen megoldás, nem csak a szabványok és más hasonlóak miatt...). A PHP nem segíthet a dolgon? Nem néztem utána, de nem hiszem, hogy nem lehet kialakítani egy nyomtatóbarát megoldást úgy, hogy PHP+CSS kombinációt alkalmazunk. (Gondolok itt olyanra, hogy ha a cikkeket egy szövegfájlból olvassuk be, el lehetne helyezni egy jelölőt, ami után a PHP oldaltörést rak be, de a CSS elrejti... mondjuk. Ez csak egy ötlet, és nagy valószínűséggel nem nekem jutott először az eszembe...:)
16

Van megoldás valószínűleg

Fedor · 2005. Okt. 6. (Cs), 11.21
A http://totalcar.hu/ -n megoldották, mert minden oldalt le lehet tölteni két részletben, meg oldaltörés nélkül is. Azt nem tudom, hogy az oldaltörést css-sel csinálják -e, de a teljes megjelenítéshez küldenek egy "full" változót az url-ben. Ez elég logikus megoldásnak tűnik amúgy.

Üdv,
Fedor
19

Cikk tartalma

Bártházi András · 2005. Okt. 6. (Cs), 17.07
A cikk tartalma pont arról szól, hogy ne így csináljuk.

-boogie-
20

Másképp

Bártházi András · 2005. Okt. 6. (Cs), 17.15
Először is a szerver oldali programozás != PHP. Maga a PHP nem segíthet ezen a dolgon, egy szerver oldali segítséggel megtámogatott megoldásról lehet azonban szó.

A JavaScriptes megoldás alatt azt értem, hogy a HTML-ben benne van a teljes cikk szövege, azonban mindig csak egy-egy oldal látszik. Amikor a következő oldalra kattint, akkor JavaScript segítségével megmutatjuk neki a következő oldalt. A nyomtatáshoz tartozó CSS-ben nincsenek elrejtve az oldalak, hanem minden nyomtatódik. Ezt meg lehet csinálni szépen.

-boogie-
15

Több oldalas cikk

Jano · 2005. Okt. 6. (Cs), 11.19
Azt hiszem van egy olyan META elem amivel alternatív verzióra mutató URL-t lehet megadni, ez megoldás lehet a több oldalra tördelt cikkeknél, hiszen ez az URL lekérheti a szervertől egy oldalon.

Miért jobb mint a külön sablon? Mert ezt nem kell a felhasználónak külön kérnie, előkeresnie. Ha a nyomtatásra kattint egyből jól nyomtatódik ki neki az oldal.
21

Alternatív tartalom

Bártházi András · 2005. Okt. 6. (Cs), 17.16
Erre gondolsz: Links in HTML documents (W3C)

-boogie-
23

Ötvözet

yaanno · 2005. Okt. 9. (V), 16.51
A sablonrendszerek korában, amikor egy külön nyomtatási oldal elkészítése 15 perc miért éri meg, hogy mégis a CSS alapú megoldást válasszam? Mi a helyzet akkor, ha egy hosszú cikket több oldalra tesz ki az ember lapozhatóan (ekkor ugyanis bármit csinálok, CSS-ből nem fogom tudni elővarázsolni a többi oldalt)?

András ez egy jó kérdés, pláne ha kiegészítjük azzal, hogy többféle exportálási lehetőséget akarunk megvalósítani egy webhelyen, pl. docbook, opml stb. Ekkor érdemes azon elgondolkodni, hogyan ötvözhető a css+export a nyomtatható változatok elkészítéséhez. Jó példa erre mondjuk a Drupal.org kézikönyve: http://drupal.org/node/270 - itt többféle exportálási lehetőség van, a nyomtatható változathoz saját css-el. Ez végülis döntés kérdése: ha akarok többféle exportálási lehetőséget, és ha akarok nagyobb egészeket nyomtatni, akkor egy sajátos nyomtatható exportot készítek (+css), ha pedig csak az aktuális oldalt akarom kinyomtatni, akkor a cikkben szereplő megoldást választom; a kettő mehet szerintem párhuzamosan is, kb így tehát:

- aktuális oldal nyomtatása (ha több oldalas a cikk stb.): print.css
- teljes dokumentum nyomtatása (ha több oldalas a cikk): export+print.css
13

popup miért nem?

Fedor · 2005. Okt. 6. (Cs), 11.06
"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."

Miért olyan rossz a popup? SZVSZ jobb, ha az eredeti oldal - benne a menükkel - nyitva marad, hogy ne kelljen újra betölteni, ha tovább akarnék navigálni a site-on belül, és új ablakban nyílik meg a nyomtatható verzió, ami akár lehet az eredeti oldal is, amelynek egy url-ben küldött változó mondja meg, hogy melyik css-t használja.

Üdv,
Fedor
14

Nem tűnik el az eredeti

Jano · 2005. Okt. 6. (Cs), 11.14
A nyomtatható CSS alternatíva pont azt küszöböli ki, hogy a lapot el kelljen hagyni. Amikor a user a böngésző nyomtatás funkciójára klikkel, egyszerűen a printerből a nyomtatott forma jön ki, anélkül, hogy "nyomtatható verzió" gombot kéne keresni, anélkül, hogy popupot kéne nyomtatás után bezárnia, anélkül, hogy popup vagy javascript tiltás esetén esetleg teljesen meghiúsulna a nyomtatása!
17

Bocs...

Fedor · 2005. Okt. 6. (Cs), 11.24
Igazad van, csak átfutottam a cikket, de most figyelmesebben elolvasva tényleg.

Üdv,
Fedor
18

Kettévágott <div>

Anonymous · 2005. Okt. 6. (Cs), 16.37
Nagyon jó, hasznos volt elolvasni a cikket. Kezdőként én is a külön ablakban megnyíló nyomtatási nézetet akartam alkalmazni, de ez az igazán jó megoldás. Annál is inkább, hogy css-el építettem fel az oldalt.
Viszont van egy problémám, mégpedig, hogy nyomtatáskor egy <div> kettévágva jelenik meg. Hogy tudnám elérni, hogy ez ne történjen meg? Egy oldalon több ilyen <div> is lehet egymás alatt. Nem lebegnek a <div>-ek.

Előre is kösz,
Kovács György
skeletron_ (no spam pls) at freemail dot hu
22

Válasz magamnak

Skeletron · 2005. Okt. 7. (P), 20.50
Üdv!
Én írtam az előző hozzászólást, azóta regisztráltam....

Találtam egy megoldást:
megnéztem, hogy egy oldalra max. hány <div id="kontener"> fér el, a kiírató cikluson belül számoltam a <div>-eket, amikor elérte a megadott számot, beszúrt egy üres <div id="page">-et, ennek adtam meg a page-break-after tulajdonságának az always értéket. Ezt helyesen kezeli, mind az IE mind a FF.
A fő css fájlban a "page" megjelenítését 'kikapcsoltam'.

Persze hogy ne legyen fenékig tejfel, az IE eggyel kevesebbet tud egy oldalra nyomtatni, mint a FF... -> böngészővizsgálat stb stb...

Kösz mégegyszer a cikkért, mert tényleg segített:)
24

Na ne már!

Nagy Gusztáv · 2005. Okt. 11. (K), 09.11
(Ez a hozzászólásom a szerver oldalon tördelőknek is szól.)

Én, mint felhasználó TILTAKOZOM az ellen, hogy te szerver oldalon akard megállapítani, hogy én, mint felhasználó milyen oldalméretet, nyomtatóbeállítást stb. alkalmazok.
Az oldalanként töltögetést is UTÁLNI FOGOM, minf felhasználó. Gondoljatok bele, milyen "nagyszerű" lenne egy 20 oldalra kiférő lapot (és nem mondtam sokat) egyenként megnyitni, nyomtatóbeállítást csinálni majd nyomtatni. Szerintem felejtsétek el ezt.

Nagy Gusztáv
http://nagygusztav.hu
25

PDF

Jano · 2005. Okt. 11. (K), 12.13
Szerintem akkor elfogadható a szerver oldalon történő tördelés, ha a nyomtatható változat egy PDF fájl lesz. Minden más esetben felesleges erőlködés mert tényleg minden nyomtatónál, felhasználónál más lehet a beállítás.
26

Na ne már!

Balogh Tibor · 2005. Okt. 11. (K), 12.21
A több oldalas cikkeknek egyetlen oka van: rejtett módon növelni az oldalletöltések számát. Sumák módszernek tűnik. Ha van egy cikk, azt egybe szeretem látni én is, mind papiron mind képernyőn.
27

Innen van bevétele

Jano · 2005. Okt. 11. (K), 12.31
A tartalomszolgáltatóknak tetszik vagy nem de ebből van bevétele. Ha neki nincs bevétele téged se fog megbízni, hogy fejlessz neki szerkrendszert stb.

Viszonylag korrekt megoldás amit totalcar-on alkalmaznak, hogy linkre kattintva egy oldalon jelenik meg a doksi.
28

Innen van bevétele?

Balogh Tibor · 2005. Okt. 11. (K), 12.54
tartalomszolgáltatóknak tetszik vagy nem de...

A oldalletöltés latens növelése csalás, ugyan úgy mint amikor a látogatottságot mérő kódot a weboldalon két vagy több helyen szerepeltetik.

Az, hogy mi korrekt vagy mi nem, azt ki-ki döntse el saját maga.

Persze ezt a dolgot nem tartom tűzzel-vassal üldözendő dolognak attól, hogy nekem nem tetszik. Ugyan úgy jól el vagyok attól is, ha neked nem tetszik, hogy nekem nem tetszik. :)
29

banner letöltés

Jano · 2005. Okt. 11. (K), 13.35
Konkrétan a bannerek letöltésének többszörözéséről van szó, nem csak statisztikai számok növeléséről. Azt a hirdetőnek kell már eldöntenie, hogy az adott oldalon alkalmazott technika neki megfelel-e.
31

Ergonómiai szempontok?

fabi · 2006. Feb. 2. (Cs), 10.08
Ergonómiai szempontok? Esetleg valaki már halott erről valamit?

Egy hosszú cikket azért szokás több oldalra törni weboldalakon, mert abban az esetben ha a felhasználok egy oldalon látják az egészet akkor kevésbé olvassák végig a cikket. Szóval azt akarom ezzel mondani, hogy ha egy felhasznló meglátja, hogy hosszó a cikk kisebb valószinüséggel kezd bele. De ha több oldalra bontjuk a cikket akkor nagyob valószinséggel vetti bele magát az olvasásba. (Az oldalaknak alcimeket is szokás adni. És az következő oldalra mutató link a következő oldal alcime, ami szintén kiváncsivá teheti az embert és igy ösztönönoz a tovább olvasásra.)
Abban igazatok van hogy több banner fog megjelenni, és ez a tartalomszolgáltatónak és hírdetőknek egyaránt jó. De ha akarják akkor egyetlen hosszú oldalon is megtörhetik a szöveget és annyi reklámot zuznak be ammenyit akarnak. A statisztikában arra is kiváncsiak hogy mennyire olvassák végig a cikket. (Tiszteséges esetben pedig az oldalletőtéseknél figyelembe veszik, hogy egy db. cikk több oldalletöltést generál.)
A pergamen hosszúságú oldalak pedig nem is túl szépek. (Ez nyilván a szubjektív véleményem.)
Találkoztam, több esetben azzal a problémával is, hogy a megrendelőnek nagyon tetszet a desgin, minden ugy tünt rednben van. Csak amikor felkerült az oldalra, egy hosszab lélegzetű szöveg akkor kiakadt, hogy milyen ocsmány let az ő szeretet oldala.
35

Viszont

BenTLor · 2006. Júl. 6. (Cs), 14.06
De ha jól értem(nem néztem meg még pontosan hogy működik) akkor ez úgy megy, hogy betöltöd a cikket, és a cikken belül lehet linkre kattintani, mire új ablakban letölti az egész cikket? mert akkor ígyisúgyis kétszer töltöd le, akár lapozol, akár nem:)
32

Több oldalas megjelenítés, egy gombos nyomtatás

Anonymous · 2006. Ápr. 20. (Cs), 17.14
Gondoljuk csak végig, hogy pl PHP-val hogyan jelenítünk meg egy cikket több oldalon... Egyszerűen megmondjuk, hogy most melyik oldal jön...
Ennyi erővel szépen minden oldal egy <div> tag-be is kerülhet egymás után és az oldal generálásánál megmondjuk, hogy épp melyik <div> látszik a képernyőn.
A többi is benne lesz a böngészőnek küldött fájlban, de csak nyomtatásban látszik majd.
Ennek csak az a hátránya, hogy ha ugyanazon cikkben lapozunk, akkor megint ki kell küldeni az egészet a usernek. Erre talán egy JS kód is lehet megoldás, ami egyszerűen módosítja a <div> láthatóságát.
30

lapdobas

toro · 2005. Okt. 18. (K), 15.08
nekem ez a "page-break-before: always;" dolog nem akar mukodni

a tobbi leirt dolog megy, es probalkozom az oldaltores beinditasaval de az nem akar osszejonni
ket tabla koze teszek egy <h6 class="break"> taget, ahol a break definicioja csak a fenti oldatorest tartalmazza. De egy oldalra jon ki minden.
Masnak hasonlo tapasztalata? (Ff+IE alatt probaltam)

Akinek sikerult mar: a printer panelen is megjelenik mar a tobb oldal (azaz, ha oldalakat akarnek csak nyomtatni es nem a teljes dokumentumot akkor azt is megtehetnem)?
33

Nyomtatási probléma

Gully Foyle · 2006. Jún. 14. (Sze), 15.41
Nem tudjátok véletlenül, hogyan lehet eltüntetni a kinyomtatott lap aljáról, hogy honnan lett nyomtatva? A cikkek esetében ez az info ugyebár http://weblabor.hu... stb.
34

a böngésző teszi ki a fejlécet/láblécet

Táskai Zsolt · 2006. Jún. 14. (Sze), 15.56
így css-ből nem befolyásolható. a böngésző nyomtatási beállításaitól függ.
36

képek méretezése

regica · 2008. Feb. 24. (V), 12.59
Képek méretezésével van problémám, ha valaki tudja a megoldást pls segítsen.
FF és IE teljesen eltérően méretezi a képet.
Probáltam px, pt, cm -ben megadni a méretet de böngészőtől függően eltérő méretben kerül nyomtatásra.
Jó megoldásnak tünt %-ban megadni a méretet de az IE pl. 50% -nál a következő képet a maradék 50% 50%-ra méretezi és így tovább.
css:

	.print img, .print img a {
		float: left;
		border: 1px solid #ccc;
		margin: 5px;
		padding: 10px;
		width: ?;
		height: auto;
	}
html:
<span class="print"><img src="kep_1.jpg"></span><span class="print"><img src="kep_2.jpg"></span><span class="print"><img src="kep_3.jpg"></span><span class="print"><img src="kep_4.jpg"></span>
37

papír aljára igazítás

hetes · 2009. Jan. 23. (P), 23.41
Adott egy div, nevezzük footernek, benne a szokásos blabla meg elérhetőségek. Azt szeretném, hogy ez a div nyomtatáskor a lap aljára kerüljön, afféle láblécként. Nem kéne minden oldalon ismétlődnie, elég lenne ha csak az utolsón lenne, de ott a lap alján. Na most próbáltam adni neki egy "position: absolute; bottom: 0px;"-et, de így csak IEben működött, a firefox magasról tojt rá. Erre létezik valami megoldás css-ből? Táblázatokkal nem szeretném összegányolni.
38

Az oldal kodjanak a vegere

hron84 · 2010. Már. 11. (Cs), 19.26
Az oldal kodjanak a vegere pakolod.

Hopp, necroposting, nem baj, az archivum majd orul neki.
39

Oldaltörés beszúrása phpvel .v css

omelon · 2010. Aug. 19. (Cs), 20.31
Sziasztok!

Van arra phpben vagy cssben lehetőség hogy a nyomtatásnál bármi történik egy oldaltörés lesz ha ezt parancsot kiadom??
40

page-break-after, page-break-before

Poetro · 2010. Aug. 19. (Cs), 21.46
Lásd page-break-after, page-break-before.