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>

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.

Das könnte auch interessant sein

4 Kommentare zu »Responsive Initialen erstellen«

  1. Bernhard

    Interessante Umsetzung aber das JavaScript ist schon verdammt groß für so eine stilistische Änderung. Wie hast du es denn per CSS versucht? Ich habe jetzt mal auf die schnelle folgendes CSS für deine Seite probiert und das sieht in Chrome und IE11 recht gut aus:

    .entry-content p:first-letter {
        font-size: 315%;
        display: inline-block;
        line-height: 1;
        float: left;
        padding-right: 10px;
    }
    1. Florian

      Sowas in der Richtung hatte ich probiert:

      .dropcap {
          float: left;
          padding: 0px;
          font-size: 3.353em;
          height: 2.2802rem;
          line-height: .8em;
          margin-top: 0.45rem;
      }

      Stimmt schon, perfekt ist die Lösung über JavaScript nicht, nur die Sache mit den anderen Fonts hatte mich da etwas zum Nachdenken gebracht … 🙂

      1. Bernhard

        Ich vermute mal, dass das Problem bei deiner Variante das Margin auf das Inline-Element ist. Oder ist .dropcap an anderer Stelle als Block-Element definiert? Und hast du wirklich um den ersten Buchstaben noch ein Element mit dieser Klasse gesetzt?

        1. Florian

          Ja, um den ersten Buchstaben ist ein span. Klappt ja auch super, passt sich halt nur nicht an, wenn aus irgendeinem Grund ein anderer Font geladen wird.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.