Responsive Initialen erstellen

Initialen (über mehrer Zeilen gehender erster Buchstabe eines Absatzes) sind im Web ein relativ selten genutztes Stilelement, das aber durchaus was hermachen kann. In diesem kurzen Beitrag zeige ich euch, wie ihr sie relativ einfach umsetzen könnt.

Als ich für ein Projekt Initiale umsetzen sollte, habe ich zuerst schnell eine kleine CSS-Lösung gebastelt. Hat in einigen Browsern auch funktioniert, in anderen stimmte die Position nicht. Auf der Suche nach einer einfachen Lösung habe ich dann dropcap.js von Adobe gefunden. Das Skript spuckt Pixelwerte aus, weshalb es nicht wirklich super für responsive Design geeignet ist. Wenn der Nutzer den Viewport verändert, während er eine Seite aufgerufen hat, dann ist es nicht unwahrscheinlich, dass sich auch die Schriftgröße der Website anpasst. Die Initiale mit Pixelwerten würde aber so bleiben wie davor.

Nun habe ich zuerst die folgende Lösung verfolgt: Einfach die Werte des Skripts kopieren, fest in das Stylesheet schreiben und in relative Werte umwandeln. Klappt auch super, nur ist mir neulich ein Problem mit dieser Lösung aufgefallen. Was ist, wenn der Nutzer eine andere Schrift verwendet oder der Font, für den die Werte erzeugt werden, nicht vorhanden ist oder geladen werden kann? Dann stimmen die Werte mit der neuen Schriftart natürlich nicht.

Also musste doch eine JavaScript-Lösung her – ich habe das Skript von Adobe ein wenig umgeschrieben, sodass es relative Werte erzeugt. Das Ergebnis findet ihr in meinem Gist.

Um das Skript einzusetzen, müsst ihr lediglich einen oder mehrere erste Buchstaben von Absätzen mit einem Element umschließen, dem ihr die Klasse dropcap mitgebt. Eingebunden und aufgerufen wird das Skript so:

<script src='./dropcap.js'></script>
<script>
   var dropcaps = document.querySelectorAll(".dropcap");
   window.Dropcap.layout(dropcaps, 3);
</script>
Code-Sprache: HTML, XML (xml)

Mit dem zweiten Parameter von window.Dropcap.layout() wird die Höhe der Initiale bestimmt (Anzahl der Zeilen). Über einen optionalen dritten Parameter könnt ihr festlegen, auf welcher Zeile die Initiale anfangen soll. Standardwert ist hier derselbe, der als zweiter Parameter angegeben wurde.

Damit das Skript wie gewünscht funktioniert, muss den Absätzen mit Initialen die Schriftgröße durch den html-Selektor zugewiesen werden.