Bei der Beurteilung studentischer E-Portfolioblogs ist mir eine kleinere typografische Spielerei aufgefallen: Dort meint jemand „Ideenwerkstatt„, schreibt aber „!deenwerkstatt“ und kommuniziert mit dem Ausrufezeichen auch eine gewisse Bedeutsamkeit des Beitrags. An anderer Stelle predige ich aber immer wieder die Trennung von Inhalt („Ideenwerkstatt“) und Darstellung („!deenwerkstatt“). Da liegt es natürlich nahe, dass der genannte Fall einem sofort aufstößt. Bleibt die Frage, wie man eine solche typografische Spielerei konsequent mit den Mitteln von HTML und CSS umsetzen kann?

Natürlich wird man sofort an den Einsatz der CSS-Pseudoelemente :before und :first-letter denken – das erste Zeichen mittels:first-letter ausblenden und das neue erste Zeichen mittels :before hinschreiben. Dumm ist nur, dass der erste Buchstabe auf diese Weise nur dann beeinflusst werden kann, wenn das betreffende Element ein Block-Element ist. D.h., was auch immer man mit „Klammernsetzung“ per <div> bzw. <span> strukturiert: das mittels :before-Pseudoelement und content-Eigenschaft eingefügte Zeichen wird zum ersten Zeichen des Absatzes und damit unsichtbar.
Offenbar muss man die Lösung etwas größer denken und anstelle des ersten Buchstabens das ganze Wort ersetzen. Das sieht dann in etwa so aus:

<html>
<head>
<title> CSS-Spielerei <title>
<style type="text/css">

h1.geigel:before {
content:"!deenwerkstatt";
}
h1.geigel:first-letter {
color:#ff0000;
}
#geigel {
visibility:hidden;
}
<style>
<head>
<body>

<h1 class="geigel"><span id="geigel">Ideenwerkstatt</span> mal etwas anders</h1>
</body>
</html>


Wenn man CSS ausschaltet, steht das richtige Wort da (Struktur!), wenn man es benutzt, steht „!“ anstelle von „I“ am Anfang des Wortes. Zumindest bei meinem Browser hat die obige Lösung noch einen kleinen Schönheitsfehler. Wer findet ihn und weiss vielleicht eine Lösung?



Leave a Reply

Zur Werkzeugleiste springen