Anfang med CSS
En anfang är en överdrivet stor begynnelsebokstav i ett stycke. En sådan man brukar se i de lite mer påkostade sagoböckerna eller kanske i poetiska texter och liknande.
Här tänker jag ge lite tips på hur man kan göra detta i en webblayout, med XHTML och CSS.
Exempel på anfang
Använda first-letter
I CSS finns pseudoelementet first-letter som är avsett att påverka första bokstaven i ett block. Att skapa en snygg anfang med detta, som fungerar i båda webbläsarna, är dock svårt. Explorer trilskas gärna här. För att det inte ska påverka alla stycken, bör du i så fall sätta first-letter vid en klass, t.ex. p.anfang:first-letter.
Använda <span>
Här har jag istället exprimenterat med elementet <span> som får märka upp första bokstaven i varje stycke som ska ha anfang. Tilldela sedan denna tagg en klass, förslagsvis med namnet ”anfang”.
<p><span class="anfang">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
Span-elementet formges sedan som ett blockelement, så att du kan ”flyta” det till vänster om stycket och sätta egenskaper som t.ex. bredd och höjd. I den enklaste varianten formger du med de helt vanliga textegenskaperna (teckensnitt, storlek och färg).
Exemplet nedan visar vilka inställningar du kan testa. Eventuellt får du finjustera marginaler och dimensioner efter hur din normaltext ser ut.
.anfang1 {
font-family:"arial black",sans-serif; font-size:36px;
color:#800000; text-align:center; line-height:28px;
display:block; float:left; height:28px; width:28px;
border:1px solid #800000; background-color:#ffd9d9;
padding:7px 7px; margin:5px 6px 0 0 }
En annan variant med <span> är att använda en bakgrundsbild som ersätter bokstaven i <span>-elementet. Bokstaven finns fortfarande kvar, men knuffas bort av indraget rent visuellt.
.anfang2 {
text-indent:-9000px; display:block; float:left;
height:63px; width:81px;
background: #fff url(grafik/anfang_L.gif) no-repeat;
padding:0; margin:5px 5px 0 0 }
2009-05-24 (10:35)
XHTML och CSS
