Andreas Karlsson

/

Om webbutveckling

Magento / WordPress / CodeIgniter / jQuery / Prototype /

Jag heter Andreas Karlsson och jobbar som webbutvecklare på Karlsson & Lord. Du når mig enklast genom andreas.karlsson@indiebytes.se eller 073-512 78 09.

CSS för anfanger och kapitäler

Anfanger och kapitäler har den senaste veckan varit ett aktuellt ämne här på bloggen. Det första inlägget förklarade begreppen och det andra beskrev hur jag lagt in egna knappar i WordPress för att minska det merjobb som införandet av anfanger och kapitäler på bloggen har inneburit. Knapparna i sig skapar dock varken anfanger eller kapitäler, det måste anges i stilmallen hur <span class="anfang"> och <span class="caps"> ska formateras. Här kommer lite hjälp för att snabbt komma igång…

Anfanger

För att få till en snygg anfang krävs det att du experimenterar en hel del med värdena. Typsnitt och webbläsare är garanterat spöken du kommer att få tampas mot. Jag vet till exempel mina anfanger inte ser särskilt bra ut i min Nokia E71 och det finns säkert fler fall där de inte ser bra ut (rapportera gärna). Men för att komma till sak, betrakta följande som ett utgångsläge att på egen hand jobba vidare med:

.anfang {
    color: #c30;
    display: inline;
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    margin: 0.30em 0.15em 0em 0em;
    text-transform: uppercase;
    }

Kapitäler

Stilmallen för kapitälerna är i jämförelse en barnlek, men även här kan det vara läge att testa sig fram:

.caps {
    font-size: 0.8em;
    text-transform: uppercase;
    }

Frågor och skryt

Lämna gärna en kommentar om du har någon fråga eller bara vill visa upp vad du har lyckats åstadkomma! Lycka till!

9 Responses / CSS för anfanger och kapitäler

Markus 20 januari 2009 at 19:42

Tja,

alltid nice med CSS-tips, men är det inte ”font-variant: small-caps;” du är ute efter? Detta gör i dagens webbläsare samma sak som det du gör (dvs skalar versaler), men vi kanske kan hoppas på framtidens webbläsare väljer small-caps varianten av typsnitt om de är installerade, istället för att skala versalerna.

Svara
Markus 23 januari 2009 at 18:45

Ah, tänkte inte på det. Det ser helt klart bättre ut med fakecaps, iaf i det test som finns på den sidan.

Har du funderat på att använda smallcaps till förkortningar? Tror det är så att man ska skriva förkortningar som är tre eller färre bokstäver i versaler, men fyra och fler med smallcaps.

Oskar 21 januari 2009 at 18:45

Intressanta tips, har aldrig tänkt på att nyttja anfanger, men kanske blir nått i framtiden.

Svara
Danne D 25 januari 2009 at 01:26

Sjusst tips tackar!

Svara
Andreas Johansson 25 januari 2009 at 11:37

Är det inte snabbare/smidigare/bättre att använda pseudo-classen p:first-letter { } för anfanger? Då slipper man för det första hela processen med extra spans samt att det är ett mer ”CSS2 korrekt sätt att göra” (som vissa skulle vilja säga).

Svara
John Ankarström 27 maj 2009 at 15:11

Nja, det beror på. Då måste man ju ange att man endast vill ha på inläggs <p>:er, och bara den första. Med standardformen blir alla initialer i <p> angfanger, och det kan bli bra mycket omständigare.

John Ankarström 27 maj 2009 at 15:08

Tack så mycket! Riktigt bra, speciellt tillsammans med knapparna som du beskriver. Använder de på min blogg WordPresser.

Svara

Lämna ett svar till Markus Avbryt svar

*

*