Azaz hogyan értsük meg a Fahrner Image Replacement (azt jelenti, hogy Fahrner féle képcserélős móka) működését?
Kezdjük ott, hogy megmondjuk, hogy mi is az a Fahrner Image Replacement (FIR). A FIR az egy olyan CSS-es trükk, aminek segítségével egy tetszőleges szövegrészletet képpel kitakarunk. Ennek a technológiának köszönhetően egyszerűen és hatékonyan oldhatunk meg baromi sok accessibility-jellegű problémát egy oldalon (olvass utána, nem nehéz).

Mi pedig meg akarjuk érteni a működését. Hiszen a működés elve nélkül csak buta robot módjára alkalmazzuk, ha alkalmazzuk, plusz ha valami gebasz van, akkor borul minden.

Miből áll egy FIR-es megoldás?
A HTML oldalon:

  • egy konténer elemből
  • egy, a konténeren belül található, üres, maszkoló elemből
  • szöveges infóból
  • egy maszkoló képből

Azaz ez úgy néz ki, hogy pl:

<div><span></span>almamáter</div>

És a fentiek alapján mind tudjuk, hogy mi micsoda, ugye? (súgó: <div> – konténer elem, <span> – konténeren belüli üres elem, „almamáter” – a szöveges infó.)

Nomármost. Ez így önmagában nem csinál semmit, nem látszik belőle semmi, ki lesz írva, hogy almamáter.
Ezért kell ide a CSS, ami majd segít nekünk.
Ja igen, van példánk is, ami a végeredéményt mutatja.

De ahhoz, hogy tudjuk, hogy mik a következő lépések, tudnunk kell, hogy hogyan is működik a FIR (ezért írodott ez a post). A maszkoló kép méreteivel azonos méretű konténer elem fölé pozicionálunk egy, konténeren belüli üres elemet, ami kitakarja a konténer elemben található szöveget. Node hogyan kerül a belső elem a szöveges rész felé? Nagyon egyszerű: a konténer elem pozicionálása relatív lesz, míg a belső üres elemé abszolút, ami egy relatív pozicionálású elemhez képest pozicionálódik abszolút, tehát akármi történik, a belső elem koordinátái mindig az őt tartalmazó elem szerint koordinátáihoz képest lesznek megjelenítve.

Elsőre ez baromi zavarosnak hangzik, de a valóságban közel sem az.
Képzeld el az univerzumot, benne egy kaminot és a kamionon belül egy dobozt. Ha a dobozt szeretnéd a kamion konténerének egyik sarkába pakolni, akkor a koordináták megadására két mód lehetséges: Vagy az univerzumhoz képest, vagy a kamionhoz képest adod meg a pozicióit. Amennyiben az univerzumhoz képest igazítasz, akkor abszolút pozicionálsz, azzal a veszéllyel, hogy ha a kamion arrébb megy, akkor a doboz ott fog lógni az univerzum közepén. Illetve lehet a kamionhoz képest pozicionálni, így akármerre indul a kamion az univerzumban, a doboz mindig abban a koordinátában fog lenne a kamionban, ahova mondtuk, hogy legyen. Ehhez először meg kell mondani a kamionnak, hogy, most ő mondja a frankót és az ő koordinátáit vesszük alapul. Azaz: megmondjuk a kamionnak, hogy akkor az ő poziconálása akkor most relatív, míg a doboznak meg azt mondjuk, hogy az ő poziciója abszolút. Mivel a doboz buta, ezért ha körülnéz csak azt fogja látni, hogy a kamion adja a koordinátákat és ő ezek szerint fog igazodni.

Ugye, hogy nem érted. ;]

Jajj igen, arra nem válaszoltam, hogy akkor mégis, hogyan takarja ki az abszolút pozicionált belső üres elem a képpel a szöveges tartalmat. Egyszerű. A belső üres elemnek ugyanakkora méreteket adunk, mint a konténer elemnek, illetve egy háttérképet, ami a maszkoló kép lesz. És mivel abszolút pozicionál a konténer elemhez képest, ezért ő kerül legfölülre, mert az abszolút pozicionált elemek rajzolódnak meg legutoljára, így kitakarják a szöveget, jól.

Lássuk, hogyan néz ki ez bekódolva, először a konténer elemre vonatkoztatva (a példának adatait figyelembe véve):
div
{
width: 154px; // ilyen széles a maszkoló kép
height: 34px; // ilyen magas a maszkoló kép
position: relative; // ő a kamion, őhozzá igazítunk.
overflow: hidden; // mivel különböző csiribiri böngészőkön lehet a szövegméretet állítani és mivel félő, hogy azt nagyra véve kilógna a lóláb betűszár, ezért megmondjuk, hogy a szélességben és magasságban megadottaknál a tartalom semmiképp se legyen nagyobb, vágódjon le, tűnjön el, huss.
}

És ebből még mindig nem látszik semmi.
Mert a belső üres elemnek még nem is mondtunk semmit. Tegyük hát meg!

span
{
width: 100%; // legyen olyan széles mint amekkora az őt tartalmazó elem
height: 100%; // és legyen olyan magas is
position: absolute; // a koordinátákat az őt tartalmazó elem szerint számolja (alapértelmezettként a 0;0-s koordinátába)
background-image: url(maszk.png); // kapjon háttérképet, amivel kitakarhatjuk a szöveget
background-position: 0 0; // a háttérképet opcionálisan igazíthatjuk is ha úgy tetszik
background-repeat: no-repeat // ne ismétlédőjön a háttérkép, ha kifutna (nem fog)
}

És ezek után elméletileg működni látszik.
És örülünk, mert talán kicsivel közelebb jutottunk a FIR működésének megértéshez!

Megjegyzés: Tudom, béna meg minden, de: Ezt ugye nem csak div-vel meg span-nal lehet eljátszani, hanem mondjuk a-val is, feltéve hogy ügyelünk rá, hogy CSS-ben megmondjuk neki, hogy display: block, mert inline elemként nem nagyon fog a FIR működni nála. Ilyesmi, na. A lényeg, hogy nem a tag, hanem a formázás számít. Lehet az listaelem, vagy strongozás is, na. na!

Megjegyzés #2: Gondoltam, hogy valamelyik sarlatán felveti a text-indentes mókát (az abból áll, hogy egy szöveg tartalmazó elemnek méretet és hátteret adnunk, az overflowját hiddenre tesszük és a szöveget egy perverz mértékű text-indenttel (teszemazt 432432432432 px) kvázi kitolja az elem látható területéből). Ez ugye egy hatékony módszer, mert nem kell plusz egy üres tag és nem kell bénázni a pozicionálásokkal, viszont ha az operauser kikapcsolja a gébetűvel a képeket, akkor ő nem fog látni semmit a szövegekből, ergo ez a megoldás nem használható és rossz. Olyan megoldás kell, aminek mindenki örül.

Popularity: 5% [?]