Bebilderung des Textanfangs per CSS

In vielen Zeitschriften kann man es sehen; auch die Tageszeitungen haben diese Technik drauf:

Den ersten Buchstaben des Textes groß zu schreiben und ihn mit einer anderen, meist besonders auffälligen Schriftart in Szene zu setzten. Eine Technik, die man auch mit Hilfe von CSS umsetzten kann.

Der erste Buchstabe soll groß und und schön dargestellt werden. Der folgende Text soll sich um diesen Buchstaben herum platzieren.

Die Vorstellung die wir haben sieht also so aus:

Vorschau

Wie ist dies nun zu erreichen?

Zunächst einmal schauen wir uns den HTML-Code an. Hier muss folgendes vorbereitet werden:

<p><span class="textanfang">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci </p>

Das p-Tag steht hierbei ganz normal für den Textabsatz, den Paragraphen. Doch das L, also der erste Buchstabe des Textes wird gesondert behandelt. Und zwar durch das span-Tag. Dies ist zur Verdeutlichung einzelner Worte, oder in diesem Falle eine einzelnen Buchstabens gut.

Wenn man sich es so im Browser anschaut tut sich noch nichts. Also muss das Stylesheet bearbeitet und dem span-Tag verschiedene Werte zugeordnet werden.

Im Stylesheet hat man allgemein sein p-Tag so oder ähnlich definiert:

p{

font-size: 0.7em;

color: #000;

}

Nun folgt das span-Tag. Man hatte die zugehörige Class im HTML-Code “textanfang” genannt und so muss sie auch im CSS-Code heißen.

.textanfang {

...

}

Was kommen nun für Werte herein?

text-indent:-9999px ist der Erste, denn man will den eigentlichen Buchstaben L, der im Browser erscheint ja durch ein Bild ersetzen. Mit Hilfe dieser Angabe verschwindet der Text, bzw. geht aus dem Bildschirmrand hinaus.

float:left wäre das Nächste. Damit stellt man sicher, dass sich das spätere Bild immer an dem linken Platz befindet.

margin-right:5px und margin-top:5px Damit verschafft man dem späteren Bild den Platz nach rechts und oben, damit es nicht so gedrungen wirkt.

Das gleiche gilt für die beiden Angaben padding-top:2px und padding-right:5px. Hiermit soll der Platz zum folgenden Text vergrößert werden.

Die width:70px und height:50px Angabe muss mit der Bildgröße übereinstimmen.

Die letzte Angabe ist die wichtigste. Das Bild wird definiert: background:transparent url(https://benediktrb.de/files/pfad/zum/bild/bildname.jpg) no-repeat. Dabei unterscheidet sich die Pfadangabe natürlich von Benutzer zu Benutzer. Wichtig ist, dass man das Bild nicht wiederholt, also no-repeat, weil es ja nur einmal angezeigt werden soll.

Zusammmen sieht es also so aus:

.textanfang {

text-indent:-9999px;

margin-right:5px;

margin-top:5px;

float:left;

padding-top:2px;

padding-right:5px;

width:Breite des Bildespx;

height:Höhe des Bildespx;

background:transparent url(https://benediktrb.de/files/pfad/zum/bild/bildname.jpg) no-repeat;

}

Natürlich sind alle margin und padding variabel. Man kann so viel Platz schaffen, wie es für die eigenen Zwecke von Nöten ist.

Und nun ist der Erfolg auch im Browser zu sehen.

Falls man kein Bild möchte, sondern einfach nur den Buchstaben größer schreiben will kann man durch wenige Änderungen am obigen Code schnell erreichen. Und zwar muss der span-Tag “textanfang” etwas anders definiert werden.

.textanfang {

margin-right:5px;

margin-top:5px;

float:left;

padding-top:2px;

padding-right:5px;

line-height:60px;

font-size:60px;

}

Die Angaben text-indent und background sind rausgenommen. Klar, man will den Buchstaben ja auch sehen.

Hinzu gekommen sind die Angaben line-height:60px und font-size:60px. Dies formatiert den Buchstaben einfach nur in seiner Höhe und die Höhe der Spalte in die der Buchstabe steht.



4 Kommentare zu ‘Bebilderung des Textanfangs per CSS’

  1. Webstandard-Team sagte am 26. April 2007 um 13:30 Uhr:

    Ohne Grafik geht es auch, wenn auch weniger schön ;o) Dafür gibt es :first-letter, damit kannst du dir das span mit class=”textanfang” sparen

  2. Benedikt sagte am 26. April 2007 um 18:03 Uhr:

    Schon, aber da man ja meist mehrere Textabsätze in einem Artikel hat würde doch bei jedem Abstatz der erste Buchstabe so groß geschrieben werden. Oder täusche ich mich da?

  3. fin sagte am 27. Mai 2007 um 12:28 Uhr:

    Das wäre dann div.post:first-child p:first-letter

    (oder so … getestet hab ichs jetzt nicht. und IE-kompatiblität ist fragwürdig)

  4. Benedikt sagte am 27. Mai 2007 um 14:12 Uhr:

    Also CSS4You sagt, dass fast alle Browser dieses Attribut kennen.

Hinterlasse einen Kommentar