Iniciálé

Probléma

Az egyik legegyszerűbb és legnépszerűbb módszer a bejegyzések feldobására, ha iniciálékat helyezünk el bennük. Ezek állhatnak a bejegyzés elején, de akár minden bekezdés első betűjeként is. Akármit megváltoztathatunk a betűmérettől kezdve a betűtípusig, és ha mindez nem elég, még összetett, nagy képeket is beágyazhatunk a bejegyzéseinkbe.

Megoldás menete

Több lehetőségünk van. Az egyik, ha az első betűt egy span elembe ágyazzuk, és ennek a stílusát alakítjuk. A másik, ha képet akarunk beilleszteni, hogy lehagyjuk az első betűt, és egy kép elemet teszünk helyette. A harmadik, "automatikus" megoldás esetében nem kell semmi külön beillesztéssel bajlódnunk, mivel a CSS kezeli helyettünk egy pszeudo-elemen keresztül. Ez a legrugalmasabb módszer, mivel így a régebbi bejegyzések is automatikusan átalakulnak a nekünk tetsző formára. A DRY (ne ismételd magad) paradigma is ezt támogatja, mivel így mindössze egy helyen kell belenyúlnunk a kódba, nem minden bejegyzésnél egyenként.

Megoldás

A kép beillesztése egyértelmű. Miközben írjuk a bejegyzést, akár a szövegszerkesztő panelen keresztül, akár a HTML-kódban manuálisan az első betű helyett berakunk egy képet. Állítsuk balra zártnak (képre kattintva a beállítósoron, vagy inline stílussal: style="float:left;"), hogy a szöveg jobbról körbefuthassa. Ez kizárólag nagy, bonyolult iniciáléknál használt módszer, ha nem lehet másképp megoldani. Mivel a képek betöltése idő- és memóriaigényes folyamat, ha lehet, kerüljük.
Ha csak bizonyos bejegyzéseknél szeretnénk iniciálékat, vagy különféle bejegyzéseknél más és más stílusú kezdést tervezünk, a span elem lesz a segítségünkre. Az első betűt ágyazzuk be, és később formázzuk CSS-sel. Ha csak egy vagy két kivételes bejegyzésnél szeretnénk iniciálét, érdemes inline stílussal dolgozni, mivel gyorsabb és könnyebben kezelhető. Természetesen adhatunk a span elemnek azonosítót, amin keresztül később is átállíthatjuk a stílusát, viszont ez olyan esetekben javallott, ha külső stíluslappal dolgozunk. A Blogger nem ilyen, itt belső stíluslapok vannak (lehet ugyan külsőt is linkelni, de erről majd később), így nem sokkal vagyunk előrébb. Ha bizonyos bejegyzések kezdetén ugyanolyan iniciálékat tervezünk, adjunk a span elemeknek osztályazonosítót, így azok egyszerre formázhatóak.
Van némi megkötés az azonosítók terén. A CSS nem támogatja a több szóból álló kifejezéseket, és nem javasolt ékezetes betűket használni. Igaz, ez utóbbi szabály nem kötelező, de jobb az óvatosság, hátha bizonyos rendszerek nem támogatják. Érdemes egy kifejező, könnyen megjegyezhető szót használni. Ha több szóból álló kifejezésre van szükségünk, több konvenció létezik, hogyan írjuk: a Blogger a kötőjeles, kisbetűs formát részesíti előnyben. (A CSS kiválasztók, ahogy a HTML azonosítók, kis és nagybetű érzékenyek.) Használhatunk persze mást, nem kötelező ugyanazt. A bejegyzés írása közben tehát tegyük a span elembe az első betűt, és adjunk neki egy egyszerű class azonosítót. Például a hír jellegű bejegyzések kaphatnak class="hir" attribútumot.
Természetesen nem kötelező minden első betűt külön beágyaznunk, ha minden bejegyzést egységesen szeretnénk kezelni. Ilyenkor az eddigieket teljesen elhagyhatjuk, csak írjuk meg a bejegyzést, ahogy szoktuk. Érdemes, ahogy mindig, előbb egy biztonsági mentést készítenünk a blog sablonjáról, vagy teljesen új próbablogot indítani, és ott megnézni a formázásokat.

Akármelyik módszer mellett is döntöttünk, ha több  bejegyzéshez szeretnénk ugyanolyan iniciálét készíteni, időrabló volna mindent egyenként szerkeszteni. Ezért a Blogger rendelkezésünkre bocsátott egy kiváló szolgáltatást: a Személyre szabás menüben a Speciális lapon az utolsó pont, a Stíluslap (CSS) hozzáadása. (Emlékeztetőül: a Sablon menüpont alatt keressük.)

Stíluslap hozzáadása menü

Ahogy egyszer már volt róla szó, itt a már meglévő stíluslapok alá szúrhatunk be újabb deklarációkat, ezzel felülírva a régieket. Most jön a dolog nehezebbik része: hogyan állítsuk át az első betű stílusát?

Először ki kell találnunk, hogyan érhetjük el az első betűt. Ehhez a blogbejegyzés HTML-objektumot kell kijelölnünk. Ha a blogot megnyitjuk egy új lapon, képesek leszünk lekérni a DOM-ot (az Előnézetben vagy a Személyre szabásban képelemként jelenik meg, nem épp egyszerű onnan kiszedni a kérdéses elem osztályát). Ahogy itt szó volt róla, a fejlesztői eszközökben keressük ki a blogbejegyzéshez tartozó HTML-entitást. Egy div elem lesz, azonosítóval (post-body-szám) és osztállyal (post-body entry-content). Utóbbi kell nekünk, hiszen ez fog csoportokat jelölni, így az összes későbbi bejegyzésnél is változatlan. Egyelőre maradjunk a post-body osztályazonosítónál, mivel ez elég beszédes (bejegyzés teste... ez kell nekünk). Ha egy elem több osztálya tartozik, át kell gondolnunk, melyiket (vagy melyikeket) használjuk, nehogy a stílusunkat más elemekre is kiterjesszük. Némi körüljárás után magunk is beláthatjuk, hogy ez a jobb választás, de aki nem akarja végigböngészni a különféle modulok forráskódját, higgye el nekem.
Most jön a trükk és a CSS-szelektorok! Ha osztályazonosítóval ellátott span elemünk van, hivatkozzunk a post-body adott osztályba tartozó elemére (vagy adott osztályba tartozó span elemére). Ha nincs ilyen, a post-body első betűjét fogjuk kijelölni egy pszeudo-elemen keresztül. Rajta hát!
Ha egy szülőelem gyermekelemére hivatkozunk, a CSS-ben, több lehetőségünk van, attól függően, hogy közvetlen leszármazottat akarunk-e elérni, vagy az összeset. Jelen esetben az utóbbi lesz a járható út, mivel a bejegyzések szövege igazítható, és ilyenkor a rendszer a bekezdéseket egy-egy újabb div-be burkolja. Így a post-body közvetlen leszármazottai ezek az elemek, és ezeken belül keressük a span elemeket. Kattintsunk a felső szövegdobozba, és írjuk be:

.post-body span.hir {
  color: red;
}

Ennek működnie kell, ha van "hír" osztályba tartozó bejegyzésünk, ahol az első betűt span elembe ágyaztuk. A szülő elem után egy szóköz áll, ezt követi a leszármazott elem. Ha osztályazonosítóval hivatkozunk rá, .osztályazonosító a jelölés, ha az elem típusát szeretnénk, csak simán írjuk be. Tehát a <span class="hir"> elemek kijelölése span.hir. (Minden span, ami hír.) Természetesen az adott azonosítót írjuk be, amelyikre szükségünk van. A tulajdonság most nem érdekes, egyszerűen csak piros betűszínt kap, hogy lássuk, működik-e. Ha nem látunk változást, alkalmazzuk a változtatásokat, és nézzük meg a blogot külön lapon.
A másik, ha minden bejegyzés első betűjét át akarjuk alakítani. Ilyenkor a kijelölés egyszerűbb:

.post-body::first-letter {
  color: red;
}

A ::first-letter egy pszeudo-elem, ami, ahogy a neve is mondja, az adott objektum első betűjét jelöli ki. Oké, jól néz ki, de mi a helyzet a középre igazított bejegyzésekkel?

Valami nem stimmel...

Nem egészen az, amit vártunk. Azért, mert, ahogy mondtam, a középre igazítás beburkolja a szöveget egy-egy div-be, így a post-body-nak nincs közvetlenül elérhető első betűje. Nem baj, van első gyermeke, aminek már van első betűje! Ez egy újabb pszeudo-elem, méghozzá a :first-child. Kis változás, hogy nem a szülőt kell megadnunk neki, hanem a gyerekelemet. Ennélfogva a post-body első div eleme .post-body div:first-child. Érthető? Szóközzel választottuk el, tehát a szülő egyik adott gyerekelemét keressük. Amit úgy definiáltunk, hogy szülője első eleme. Ennélfogva megtaláltuk az adott osztály első adott elemét! Ennek kell tehát az első betűje: .post-body div:fist-child::first-letter. Wow! Kész keresztrejtvény. (Igen, ez még "egyszerű" anyag. A közepesen nehézhez már programozni is fogunk. Gondoljatok bele, mi lesz az emberpróbáló fejezeteknél!) Hol tartunk eddig?

.post-body::first-letter, .post-body div:first-child::first-letter {
  color: red;
}

A vesszővel elválasztott kijelölések mindegyikére alkalmazzuk az alább látható stílusokat. Így ha nem találunk egy első betűt a post-body-hoz, akkor keresünk egy első div-et, és annak az első betűjét alakítjuk.
Miért magyaráztam ezt ilyen részletesen? (Még még most jönnek a stílusok!) Hogy érthető legyen, és bárki magától is tudja alkalmazni, nem csak másolás-beillesztés, készen vagyunk. Így ha el is felejti valaki, kis logikával újra rájön a módjára. Sokkal gyorsabban lehet dizájnokat is készíteni, ha fejből írja az ember, nem másol.

Most jöhetnek a formázások, hiszen mindenki erre vár! Egy betűnél mit szeretnénk állítani? Színt (háttérszínt is). Méretet. Betűstílust. Vastagságot, döntött vagy sem, kisebb formázásokat (aláhúzás, árnyék, keret). Formázzuk!
A betűszín a már említett color, a háttér színe pedig a background-color. Maradjunk egyelőre a hagyományos színeknél, és ne akarjunk színátmenetekkel dolgozni, ilyen méretben nem is igen látni. Több módszer van, amivel megadhatjuk a színt: az egyik, ha web-safe színekkel dolgozunk, azoknak van sima angol neve, amiket a böngészők felismernek. Itt egy lista a használhatóakról (nem teljes, de azért jó). Ezt használtuk ki az előbbi példában is. Ha ez nem elég, megadhatjuk RGB-színkódokkal. Ezen alapul a színek hex kódja: a három (R: vörös, G: zöld, B: kék) színkomponens 0-255 között változó értéket vehet fel, ami egyenként 256 lehetőség, ami könnyen átírható 16-os számrendszerbe (00 a 0, FF pedig a 256, kis számrendszer-átváltós feladat). Így a hex kód egy 3x2 helyiértékes, 16-os számrendszerben felírt érték, ahol az első két érték a vörös, a második kettő a zöld, a harmadik kettő pedig a kék komponens arányát fejezi ki. Kettőskereszt előzi meg (#). Ha ez a színkódolás nem jön be nekünk, HSL-kódokat (szín, telítettség, fényerő) is használhatunk, ami inkább az árnyékolásoknál jön jól. Ha félig átlátszó színekre van igényünk, az RGB és a HSL kódok kiegészíthetőek egy negyedik taggal: RGBA vagy HSLA lesz belőlük. Az A az alpha, ami az átlátszóságot kezeli. Értéke 0-1 közötti tizedestört, de van, ahol százalékban is megadható. Az 1 a teljesen átlátszatlan (ez az alapértelmezés), a 0 a teljesen átlátszó. Ha tényleg átlátszó színre van szükségünk (de miért lenne?), a transparent szót használjuk helyette. Az én egyik kedvenc színkeverő eszközöm ez a honlap, ami elsősorban HSLA-ra készült, de megadhatóak RGBA értékek és hex kódok is. Imádnivaló, ahogy az átlátszóságot kezeli, külön állíthatunk hátteret, hogy megnézzük, mi jön ki.

See the Pen RovRMV by Szuzs (@szuzs) on CodePen.

Ha a hex kód ismétlődő (#5588aa), elég csak a felét megadni. És, mint látható, igen hülye színnevek is léteznek.
Nem feltétlenül van szükségünk színekre, lehet, hogy csak a betűméretet kell állítanunk. Szintén a bőség zavarában találjuk magunkat: megadhatjuk pixelekben, eredeti magasságához képest százalékban, az alapbetűmérethez képest, de akár a szülő elem betűméretéhez képest is. Melyik a jó módszer? Nincs ilyen! Amelyiket tudjuk kezelni, az lesz az igazi. Persze bizonyos technikák javallottabbak.
Ha konkrét értéket szeretnénk, a pixelek ajánlottak, pl. font-size: 16px;. Ez a legritkább esetben ideális, de mindenkinek ez jut eszébe először. De mi történik, ha meg kell változtatnunk a bejegyzések betűméretét? Mondjuk a látogatók panaszkodtak, hogy nehezen olvasható. 12 pontosról nagyítjuk 16 pontosra, és... Az iniciálé ugyanakkora, mint a szöveg. Használhatunk ilyenkor százalékot, ami az alap betűmérethez képest változtatja a szöveg méretét, de én szívesebben írok helyette em-et. Ez a legközelebbi szülőnél beállított betűmérethez képest változtatja a szöveg méretét. (A százalék nagy hátránya, hogy véletlen beállíthatunk mellette pl. pixelben betűméretet. Ilyenkor ahhoz képesti százalékos arányát fog számolni.) Ha ez túl rugalmas eszköz, a rem a HTML dokumentum alapbetűméretéhez viszonyítva adja meg a szöveg méretét. (Tipp: az em elég. Ne bonyolítsuk feleslegesen az életünket.) Vagyis a 12 pontos (pixeles) alap betűmérethez képest a 16 pontos 1,3-szoros nagyítás. Tehát 1.3 em lesz a kívánt betűméret. Ezt az arányt akkor is megtartja, ha a szöveg betűméretét megváltoztatjuk.

See the Pen BQMzPr by Szuzs (@szuzs) on CodePen.

Beállíthatnánk a sormagasságot is, de nem érdemes: az egész első sorra vonatkozna, és nagyon furán tud kinézni, ha az első két sor között más a sorköz, mint a többi sor között.
Következzenek a kisebb változtatások:

• font-family – Milyen betűtípussal írjuk.
• font-style – Normál vagy döntött (és ha döntött, milyen stílusban).
• font-variant – Normál vagy small-caps, vagyis a kisbetűk kis nagybetűkké alakulnak.
• font-weight – Normál vagy vastagabb (és mennyire).
• text-decoration – Aláhúzott, fent áthúzott, áthúzott, nincs áthúzás.
• text-transform – Nagyobb szövegnél van értelme inkább: az első betű nagy (capitalize), mind nagybetű, mind kisbetű.
• text-shadow – Legyen-e árnyéka a betűnek.

Nekünk leginkább az utolsó lehet érdekes, a többit elvétve szokás állítani. Kivétel az elsőt, de az egy nagyobb anyag, részletesen a következő cikkben lesz róla szó. Addig elég annyi, hogy minden már beolvasott betűtípust beállíthatunk itt (vagyis amit már máshol használtunk), illetve a minden böngésző által ismert betűcsaládokból is válogathatunk. Ha röviden akarunk sok tulajdonságot megadni, a font tulajdonságot használjuk: ez egy rövidítés. A feloldása: font-stlye font-variant font-weight font-size/line-height font-family ebben a sorrendben, így elválasztva. (Vagyis szóközökkel, a betűméretet a sorközzel pedig perjellel.) Az első és az utolsó érték megadása kötelező, a többi opcionális.

See the Pen MbLeBR by Szuzs (@szuzs) on CodePen.

Visszatérve az árnyékra: megválaszthatjuk, mennyire legyen eltolva a szövegtől (esetünkben a betűtől), mennyire szóródjon, és mi legyen a színe. Az első érték a vízszintes eltolásé, a második a függőlegesé, ezek kötelezőek és lehetnek negatívok is (ekkor felfelé és balra tolja az árnyékot). Utána jön a szóródás (blur), ez nem, ettől függ, mennyire lesz elmosott az árnyék széle (alapállásban 0). Végül a szín: ha nem adunk meg semmit, fekete marad. (Egyes böngészők, például Safari alatt ez az érték szintén kitöltendő, nélküle nem jelenik meg semmi.)
Az árnyékok színe nehéz ügy, mert passzolnia kell a betűszínhez és a háttérhez is. Viszont többet is egymásra tudunk rétegezni, amik akár különböző színűek is lehetnek, így rendkívül sokrétű effekteket érhetünk el. Érdekes példa, ha a betűszínt fehérre állítjuk, és az árnyéknak adunk erősen kontrasztos színt; vagy egy "világító" betűt készítünk.

See the Pen VmgjGP by Szuzs (@szuzs) on CodePen.

Persze a színek csak példák, nem a követendő egy és igaz út. Ha valakinek a pink illik a blogjához, használja azt. Ugyanúgy használhat pixeleket az eltolás megadásához, de az em ez esetben is hasznos, ha változtatni kívánjuk később a betűméretet. Az árnyékoknál gyakori, hogy konkrét pixelekkel toljuk el, ami betűmérettől független – ha erre van szükségünk, használjuk ezt. Továbbra is opció, hogy csak egy árnyékot állítunk be.

Összefoglalás

Ebben a cikkben szó esett mindenről, amire egy iniciálé készítéséhez szükségünk lehet, noha ugyanezekkel a módszerekkel hosszabb szöveget is kezelhetünk, vagy az első betű helyett az első sort, címeket, akármit. Megnéztük, milyen szelektorokkal tudjuk az első betűt kijelölni, majd átállítottuk a méretét, a színét (akár a háttérszínt is), a betűtípusát, majd adtunk neki árnyékolást is. Összefoglalva mindent:

See the Pen KNJMGJ by Szuzs (@szuzs) on CodePen.