Az iniciálé többé nem a kódexírók kiváltsága. Bármelyik weboldal inicializálható puszta CSS használatával.

Korábban erre a célra a <span> -taget használták, de valljuk be, nem ildomos a keresőrobotokat ilyen csúnyán megvezetni, mert többet az oldal felé sem néznek. Egy sornyi CSS-el elkerülhetjük a HTML forrás átírását és az ebből fakadó kellemetlenséget:

p:first-letter {font-size:4em;}Persze a selector-t kiegészíthetjük osztállyal is, ha nem szeretnénk minden bekezdésnek iniciálét adni. Kiemelhetjük iniciálénkat speciális betűtípussal, amit hála az Embedded Open Type egyre szélesebb támogatottságának, akár magunk is rajzolhatunk.

Mivel az első betűk általában nyomtatott nagybetűk, ezért felesleges a megnövekedett sorköz, és nem is esztétikus. Ezt egyszerűen eltűntethetjük a

line-height:0.5em;sor hozzáadásával. Meglepő módon bár a környező szöveg sormagassága 1em, ha a nagyobb méretű iniciálét is 1em-es sorközzel vettem fel, akkor visszakaptam azt a rést, amit eltűntetni kívántam.

Ha azt szeretnénk, hogy a karaktert több sornyi szöveg fussa körül, akkor lebegtethetjük

float:left;de ilyenkor vigyázni kell, hogy a lebegést a következő bekezdés előtt megállítsuk, különben egy lépcsőt kapunk.

p:first-letter {
float:left;
font-size:4em;
line-height:0.5em;
}

p {
float:none;
}Innentől a stílusnak csak a kreativitás és a rendelkezésre álló idő szab határt. 
 

A bejegyzés trackback címe:

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.