Weboldalkészítő suli #33 - Hivatkozások lábjegyzetként

|

Legutóbb elkészítettük oldalaink „nyomtatható változatát”. Most egy kis javascriptes segítséggel hivatkozásainkból lábjegyzeteket hozunk létre.

Előző leckénk legnagyobb részében azt néztük meg, hogy milyen fő különbségek vannak a képernyőn és a papíron megjelenítendő, megjelenő oldalak között, illetve hogy mi mindenre kell odafigyelnünk, főként akkor, ha szeretnénk honlapunk oldalait „közvetlenül” – vagyis újragenerálás nélkül – nyomtathatóvá tenni. Ahogyan már akkor is említettük, a problémák már ott elkezdődnek, hogy sajnos nagyon kevés lehetőségünk van arra, hogy távolról beállítsuk, felülbíráljuk a különféle nyomtatási beállításokat, legyen szó akár a papírméretről, a lapok orientációjáról, a margókról vagy különféle háttérképek és –színek nyomtatásáról. Ezek közül ráadásul a CSS 2.1-ben legfeljebb a margót tudjuk állítani, bár azokat külön az első, a páros és a páratlan oldalakra is. Pontosabban csak tudnánk állítani, mivel ezen stílustulajdonságokkal a Safari és a Firefox legújabb (nem béta) verziói nem foglalkoznak, nyomtatáskor kizárólag az Oldalbeállítás funkciónál megadott margókat veszik figyelembe. Remélhetőleg a böngészőgyártóknál kiemelt helyen kezelt és emlegetett szabványkövetésnek köszönhetően ezen a területen is javulni fog a helyzet. (Bár azt, hogy a „szoftveres lapméretekből” hogyan lesz a nyomtatókban ténylegesen akkora papír, azt elég nehéz elképzelni.)

 

 

Nyomtatás stíluslapja csak az „általánostól” való eltéréseket kell, hogy tartalmazza

 

 

Nyomtatásra csiszolva

 

A Weboldalkészítő suli hagyományait követve, nálunk a nyomtatható változat nem új oldalak létrehozását fogja jelenteni, hanem meglévő oldalainkhoz készítünk egy új, nyomtatókra optimalizált stíluslapot. Ezeket a stíluslapokat pontosan úgy fogjuk hozzácsatolni oldalainkhoz, ahogyan azt több mint két éve, tanfolyamunk 6. leckéjében már megtanultuk:


‹link type="text/css" rel="stylesheet" href="css/lorem32pr.css" media="print" /›

Egészen az előző leckéig a media attribútumnak kizárólag az „all” értéket adtuk, vagy egész egyszerűen elhagytuk, ami pontosan ugyanazt a hatást eredményezte, vagyis minden lehetséges médiumra ugyanazokat a beállításokat használtuk. Egészen idáig, pontosabban az oldalak első nyomtatásáig akkor sem láttunk volna semmi változást, ha a media attribútumhoz a „screen” értéket rendeltük volna hozzá, hiszen a honlapunkat eddig csak a képernyőn akartuk megjeleníteni. (Elviekben lehetőségünk van külön stíluslapot rendelni kimondottan vakok számára készült speciális kijelzőkhöz [braille], nyomtatókhoz [embossed] vagy felolvasóprogramokhoz [speech]. Ha viszont valaki azt szeretné, hogy honlapja „akadálymentes”, vagy ahogy a köznyelv hívja, „vakbarát” legyen, akkor ehhez egy kicsit többet kell tennie, mint speciális stílus(oka)t rendelni az oldalakhoz. Aki szeretne többet tudni erről a témáról, mindenképpen keresse fel a W3 konzorcium Web Akadálymentesítési Kezdeményezéssel foglalkozó oldalát a www.w3.org/WAI/ címen.)

 

 

A nyomtatáshoz kicsit más beállításokra van szükség

 

 

Mostantól kezdve azonban egyáltalán nem mindegy, hogy „elsődleges” stíluslapunk csatolásakor milyen értéket adunk a media attribútumnak, hiszen ettől függ, hogy miként kell felépítenünk a nyomtatáskor használatos stíluslapot. A stíluslapok kaszkád jellege miatt ugyanis ha „all”-t használunk, vagy ha elhagyjuk, ami ezzel egyenértékű, akkor az ebben megadott stílusok ugyanúgy érvényesek lesznek nyomtatáskor is, tehát új stíluslapunkon csak azt kell leírnunk, hogy miben szeretnénk ettől eltérni. Akkor azonban, ha az „all”-t „screen”-re cseréljük, az ebben szereplő stílusok nem lesznek érvényben nyomtatáskor, hanem a böngészők alapértelmezett stíluslapjai adják a kiinduló állapotot – ahogyan azt, valamint, hogy mit is jelent pontosan a „kaszkád jelleg”, Spányik Balázs már bemutatta a sorozat 7., Kaszkádvilág című részében.

 

 

Így az egyes „fülek” szépen egymás alatt fognak megjelenni

 

 

Ez utóbbi megoldást legtöbbször csak akkor éri meg használni, ha a dizájn vagy más ok(ok) miatt oldalunk túlontúl összetett (esetleg túlbonyolított), számtalan lebegtetett, átpozicionált elemet tartalmaz. Ilyenkor ugyanis sokkal könnyebb nulláról újraépíteni az oldalaink stíluslapját, mint átszabni a képernyőre optimalizáltat, még akkor is, ha sok elemnek esetleg újra meg kell adni pontosan ugyanazokat a stílustulajdonságokat. Persze azzal is jelentős mértékben egyszerűbbé tehetjük a saját dolgunkat, ha a külön kezelendő blokkokat a HTML-kódban megfelelően elkülönítjük, és ellátjuk az azonosításhoz szükséges egyedi azonosító- vagy osztálynevekkel.

 

 

Cikkünket teleszórtuk hivatkozásokkal, hogy próbára tegyük a programunkat

 

 

Miután szerencsére a konferenciánk honlapja egyáltalán nem sorolható a túldizájnolt kategóriába, és a HTML-kódját is sikerült ezidáig megfelelően kordában tartanunk, ezért mi inkább az előbbi megoldást választjuk. Éppen ezért az oldalainkhoz mostantól kezdve két stíluslapot csatolunk, egy általánosat, és egyet a nyomtatáshoz:


link type="text/css" rel="stylesheet" href="css/lorem32.css" media="all" /›
link type="text/css" rel="stylesheet" href="css/lorem32pr.css" media="print" /›

Bár ahogyan azt korábban jeleztük, a böngészők egy része nem igazán foglalkozik vele, mi azért reménykedünk abban, hogy ez záros időn belül megváltozik, és ezért először is megadjuk, hogy nyomtatáskor felül és alul 2-2, balra és jobbra pedig 1,5–1,5 centiméteres margót szeretnénk hagyni a tartalom körül: @page {margin: 2cm 1.5cm; }

Eddig a méreteket csak pixelben (px) és az adott szöveges elemhez választott betűmérethez igazodva (em) adtuk meg (illetve használhattuk volna még az ex-et is, ami megegyezik a tipográfiában használt betűszem-magassággal, az adott betűtípusú és -méretű „x” karakter magasságával). Elviekben eddig is alkalmazhattunk volna más mértékegységeket, azonban a képernyőn igen ritkán szoktuk a méreteket hüvelykben (in), centi- (cm) és milliméterben (mm), a nyomdászatban használt pontban (1 pt = 1/72 hüvelyk) és picában (1 pc = 12 pont) megadni, hiszen ezek erősen függnek az adott eszköz felbontásától. Azonban nyomtatáskor már lehet, sőt egyes esetekben kimondottan érdemes ezeket a mértékegységeket is használni.

 

 

A legegyszerűbb megoldás, ha a hivatkozások címeit a böngészővel íratjuk ki

 

 

A margók megadása után egy kicsit szabjuk át a ‹body› elemünket – ami ráadásul az öröklődésnek köszönhetően más elemekre is hatással lesz. Így többek között változtassuk meg az oldalon használt szövegek alapértelmezett betűtípusát ún. talpas betűkre (font-family: Georgia, Times, serif;). Ezek ugyanis nyomtatásban jobban olvashatók, szemben a talp nélküli betűkkel (font-family: Verdana, Geneva, sans-serif;), amelyek viszont a képernyőről történő olvasáskor kellemesebbek a szemnek. Ezenkívül a korábbi 12 pixeles betűméretet cseréljük 12 pontosra (ami helyett írhatnánk 1 pc-t is, hiszen 12 pt = 1 pc), valamint szüntessük meg a kékes háttérszínt, színátmenetet.

Hasonlóképpen, szépen szisztematikusan kezdjük el kicserélni a betűméreteket pixelről pontra, a betűk színét fehérről és vajszínről feketére és sötétszürkére, valamint kapcsoljuk ki a háttereket, de például a fejléc címsorainak betűtípusát ne változtassuk meg, azokat hagyjuk meg a cirádás Xenippának, ahogyan a cikkek címsorainál is tartsuk meg a Xirwena betűtípust.

 

Nem kívánt törlendő

 

Oldalainkon számos olyan elem található, amelyekre nincs szükség nyomtatáskor. Ilyenek például a menük, a Flash-alapú vagy animált GIF-ekből álló hirdetések, a különféle interaktív elemek (például képgaléria, közösségi oldalak alkalmazásai), vagy főként nagyobb honlapoknál, portáloknál a különböző (al)oldalajánlók. Ezeket a legegyszerűbben úgy tüntethetjük el, ha a display stílustulajdonságukat none-ra állítjuk. Az már ízlés kérdése, hogy ezt valaki úgy teszi meg, hogy vesszővel elválasztva felsorolja az összes elrejtésre szánt elemet és ezekhez egyben rendeli hozzá a display: none;-t, vagy az eredeti stíluslap logikáját követve egyesével kapcsolja ki ezeket, esetleg – és ez a legkevésbé javasolt – létrehoz például egy noprint nevű osztályt (.noprint {display: none;}), és ezt rendeli hozzá minden olyan objektumhoz, amit nem szeretne viszontlátni nyomtatáskor.


Kicsit érdekesebb a helyzet az olyan esetekben, amikor nyomtatáskor jelentősen el kell térnünk a képernyőn látható látványtól, mint például a konferencia tervezett programját tartalmazó oldalon, vagy mondjuk egy képgalériánál, amikor kattintásra változik a látható tartalom. Ilyenkor mondhatni vissza kell állítanunk az „eredeti állapotot”, vagyis láthatóvá tennünk minden egyes elemet, például meg kell szüntetni azok egymásra pozicionálását (position: static;), hiszen papíron – legalábbis egyelőre – kicsit nehéz megoldani, hogy egy adott rész megnyomásakor megváltozzon a tartalom.

 

 

Nem a legszebb, de mindenképpen a legegyszerűbb megoldás így kiíratni a hivatkozások címeit nyomtatáskor

 

 

Hasonlóképpen vigyáznunk kell az olyan helyeken, ahol a – várhatóan nyomtatásra nem kerülő – háttérképek vagy –színek információt tartalmaznak, vagy legalábbis segítik az oldal áttekinthetőségét. Főként az előbbi esetek jelenthetnek komoly, néha nem, vagy legalábbis nem egyszerűen áthidalható problémát. Erre nem is igazán lehet általános tanácsot adni, mindig az adott helyzet dönti el, hogy mi a legjobb megoldás. De ha igazán fontos, hogy nyomtatáskor is teljesen korrekten jelenjen meg az oldal, akkor az ilyen helyeken lehetőség szerint még akkor is kerüljük a háttérképek és –színek használatát, ha a képernyőn történő megjelenítéskor egyébként nagyon kényelmesnek tűnik.

 

 

Láthatóvá tett címek

 

De nemcsak eltüntetni kell nyomtatáskor az egyes elemeket, hanem megjeleníteni olyanokat, amelyek egyébként ott vannak, csak papíron megjelenítve sokszor elvesznek – mint például a különböző hivatkozások címei. Amíg képernyőn nézünk egy oldalt, addig nem probléma, hogy egy hivatkozás fölé vigyük az egeret, majd a státussorban megnézzük, hogy hova is mutat. Azt korábban már megoldottuk, hogy a képernyőn láthatóvá tegyük, milyen típusú hivatkozásról is van szó, valamilyen típusú dokumentumra, esetleg külső oldalra mutatóról, de az oldalt kinyomtatva sokszor jó lenne látni a pontos elérési utat.

 

 

Kis programunk a linkekből szépen indexelt lábjegyzeteket hoz létre

 

 

Ennek legegyszerűbb és legkényelmesebb módja, ha a hivatkozások mögé „stílusosan” odaíratjuk a címet is. A stílusosan helyett mondhatnánk inkább azt, hogy stílussal, hiszen a stíluslapon megmondhatjuk, hogy a hivatkozások mögött szeretnénk megjeleníteni azt, hogy hova is mutatnak: div#cikk a:after { content: " [" attr(href) "]"; }

 


Nemcsak a lábjegyzetindexeket, hanem a lábjegyzetbe összegyűjtött hivatkozásokat is formáznunk kell

 

 

Ezzel először is azt mondjuk meg a böngészőknek, hogy a cikk azonosítóval ellátott ‹div› elemen belül található valamennyi hivatkozás mögé szeretnénk valamit illeszteni (div#cikk a:after), majd azt, hogy oda egy tartalmat szeretnénk beszúrni (content), méghozzá szögletes zárójelek közé írva a hivatkozás href attribútumának értékét (" [" attr(href) "]").

 

 

Az egyes linkek mögött csak egy lábjegyzet-hivatkozás látszik

 

 

Ez így tényleg nagyon egyszerű és kényelmes, azonban van egy nagy hátránya: hosszabb címek esetén igencsak csúnyává és nehezen olvashatóvá teheti szövegünket, főként olyan esetekben, amikor egy, az oldalon többször előforduló kifejezéshez minden egyes alkalommal hozzárendeljük ugyanazt az oldalt. Ilyenkor sokkal elegánsabb, ha a szövegben csak egy lábjegyzet-hivatkozást helyezünk el, ami az oldal végén elhelyezett lista megfelelő elemére mutat.

 

 

A képernyőn elrejtjük a hivatkozások listáját, de a HTML-kódban azért ott van, és csak a nyomtatásra vár

 

 

Ehhez először is létre kell hoznunk egy tömböt, amelyben összegyűjtjük a hivatkozások címeit (248. sor), majd össze kell gyűjtenünk a ‹div›-ben található valamennyi hivatkozást (249. sor). Ezt követően minden egyes elemről nézzük meg, hogy a benne található hivatkozás szerepelt-e már korábban (255–258. sorok), ha nem, akkor a következő sorszámmal vegyük fel a tömbünkbe (260–263. sorok), majd a megtalált vagy újonnan felvett sorszámot egy ‹span› elembe ágyazva szúrjuk be a hivatkozás mögé (265. sor). Miután átnéztük a teljes listát, hozzunk létre egy új felsorolást (269. sor), amelybe szépen vigyük fel a tömbben szereplő összes címet (271–275. sorok), majd ezt a felsorolást, ami ugyebár csak egyszer tartalmaz egy címet, szúrjuk be a cikk azonosítójú ‹div›-ünk végére (276. sor).

 

 

A nyomtatáskor a cikk mögötti listában megtalálható lesz az oldalon előforduló valamennyi hivatkozás

 

 

Ezután már nincs is más dolgunk, mint a nyomtatás stíluslapján szépen megformázni mind a hivatkozások mögé beszúrt ‹span›-okat, mind a cikk végére illesztett felsorolást.


A cikkben szereplő kódok és példaoldalak letölthetők innen.

 

 

 

 

 

 

 

 

Hirdetés
0 mp. múlva automatikusan bezár Tovább az oldalra » Advertisement

Úgy tűnik, AdBlockert használsz, amivel megakadályozod a reklámok megjelenítését. Amennyiben szeretnéd támogatni a munkánkat, kérjük add hozzá az oldalt a kivételek listájához, vagy támogass minket közvetlenül! További információért kattints!

Engedélyezi, hogy a https://pcworld.hu értesítéseket küldjön Önnek a kiemelt hírekről? Az értesítések bármikor kikapcsolhatók a böngésző beállításaiban.