Herstellung von Anfangsbuchstaben Teil II: Ausgelassene Initialen

Sowohl erhabene als auch nicht erhabene Initialen können einer Webseite einen besonderen Reiz verleihen, indem sie den Lesern einen monumentalen Buchstaben bieten, der das Leseerlebnis einleitet. Nachdem Sie sich in Teil I dieser Serie mit Über über erhabene Initialen und deren Gestaltung für das Web vertraut gemacht haben, sollten Sie nun bereit sein, sich den größeren Herausforderungen zu stellen, die auf Sie bei ausgelassenen Initialen, auch Dropcaps genannt, warten.

HTML & CSS, ohne JavaScript

In dieser Serie von Initial Letters haben wir uns der Herausforderung gestellt, erhabene Initialen und Kapitälchen mit reinem HTML und CSS darzustellen, ohne JavaScript™ für Media-Queries auf kleinen bis großen Bildschirmen oder zur dynamischen Anpassung von Schriftgröße und Zeilenabstand. Obwohl JavaScript hilfreich sein könnte, ermöglicht uns der Verzicht auf JavaScript eine schlanke Lösung mit weniger Ressourcen und ein Layout, das keine Probleme macht, wenn auf Nutzer JavaScript deaktiviert ist.

Wie erhabene Initialen lassen sich auch Kapitälchen am einfachsten mit separatem CSS erstellen und verwalten, in dem Sie die Font, die Größe, die Zeilenhöhe (Zeilenabstand) und den Stil festlegen. Bei Initialien fügen Sie jedoch eine float-Eigenschaft hinzu. Wir verwenden first-child und Anfangsbuchstabewie in Teil I dieser Serie, um automatisch Dropcaps zu erzeugen, ohne span tags in den HTML-Code einfügen zu müssen.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3.3em;}

p:first-child::first-letter { font-family: Didot; font-size: 10.2em; float: left; text-transform: uppercase; margin-top:0.13em; margin-right:0.05em; margin-left:-0.03em; }

em { color:#930;}

<p>here is a conventional drop cap sized large, and sitting beneath the first line of text. The top of the <em>H</em> aligns with the top of the first line of text, but the bottom of the <em>H</em> aligns with a lower baseline.</p>

Die H fungiert als Fallkappe aufgrund der first-child::first-letter Zuordnung und Großbuchstabengestaltung. Dank der DidotDie Schrift Schriftmit ihren wispy Serifen hat eine hohe Statur, ohne dass ihre Serifen das Layout beschweren.

Die Erstellung von Dropcaps und ihre Ausrichtung innerhalb der rechteckigen Grenzen des umgebenden Textes, wie oben gezeigt, ist nur ein Ansatz. Dieser Ansatz sieht elegant aus und erinnert an einige der traditionelleren Methoden zur Darstellung von Initialien im Printdesign. Aber wir sind hier nicht im Druckdesign, sondern im Webdesign, und obwohl Konventionen hilfreich sind, können Sie sie brechen, solange die Lesbarkeit und die Lesbarkeit erhalten bleiben, um ein positives Nutzer Erlebnis zu schaffen.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:0.08em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>here is a drop cap created with a pair of pseudo-classes. Note how the next line of type flows underneath the letter <em>H</em>, effectively wrapping around the drop cap. The negative-left margin helps align the serif of the <em>H</em> with the paragraph. A little bit of math and testing helps us align the base of the <em>H</em> with the second line of our paragraph.</p>

<p>With a new paragraph created, we get a normal-sized <em>W</em> at the beginning of the sentence.</p>

Dieses Kapitälchen ist an der Grundlinie ausgerichtet, ragt aber über die erste Textzeile hinaus. Obwohl das Kapitälchen H im HTML nicht großgeschrieben werden muss, da das CSS es zu einem Großbuchstaben macht, müssen Sie beachten, dass im zweiten Absatz das W großgeschrieben werden muss.

Wir haben gesehen, wie es aussieht, wenn wir die Versalien der ersten Textzeile unterbrechen, jetzt wollen wir sehen, was passiert, wenn die Versalien eine Grundlinie unterbrechen. Ja, das Ausrichten von Kapitälchen an einer Grundlinie gilt als akzeptable, ja sogar als traditionelle Praxis im Druckdesign, aber wir wollen etwas Abwechslung und Spaß haben. Schließlich sind wir hier im Web.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; }

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; color:#066; margin-left:–0.15em; margin-top:–0.1em}

em { color:#930;}

<p>over here is a drop cap with a negative left margin hanging the drop cap outward, optically aligning the <em>O</em>. You can even change the color, to make it lighter than your body text, so it recedes into the background. Ordinarily, you&rsquo;ll only need one drop cap, oftentimes placed at the very beginning of your text section. But, if you want to have a raised cap or drop cap in a pull quote, you&rsquo;d need a separate class.</p>

Sie können dafür sorgen, dass sich das Initial an das Grundlinienraster hält, oder das Grundlinienraster durchbrechen. Achten Sie aber immer auf Nutzer und stellen Sie sicher, dass der Text lesbar ist. Experimentieren Sie mit der vertikalen Ausrichtung und der Zeilenhöhe sowie mit der Farbe, damit das Initial groß aussieht, ohne das Layout zu dominieren.

Auf die Details achten

Jedes Drop Cap muss in Bezug auf Größe, Zeilenabstand (Zeilenhöhe) und Ränder anders gehandhabt werden, da jeder Buchstabe anders aussieht und ist - und jeder Schrift ist anders. Bei einem nahezu unbegrenzten Angebot an Web Fonts für Ihre Dropcaps kann dies die Sache verkomplizieren. Sie müssen die Abstände und Größen anpassen, bis alles richtig aussieht. Und wenn Sie sich für eine andere Schrift entscheiden, müssen Sie möglicherweise mit den Anpassungen von vorne beginnen. Aber halt, das ist noch nicht alles: Auch wenn es in einem Browser gut aussieht, kann es in einem anderen Browser zu Komplikationen kommen.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:–0.12em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>and here is a drop cap <em>A</em> set among body text with less leading, known as line-height in CSS. The drop cap still aligns to the second line of text, but the first line could benefit from some kerning.</p>

Auf den ersten Blick sieht die statuarische Didot-Springmütze elegant aus, aber je weiter man die erste Zeile des Absatzes liest - oder besser gesagt, je mehr man über das erste Wort stolpert - desto mehr wird man sich an der Lücke im Wort Und stören.

Sie können negative Ränder verwenden, um den Abstand zwischen Buchstaben zu entfernen und Lücken zu schließen. Beachten Sie den Unterschied zwischen der Eigenschaft margin-right des vorherigen Beispiels und der des folgenden sowie das daraus resultierende Layout.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; margin-top:–0.25em; margin-left:–0.01em; margin-right:–0.1em;}

em { color:#930;}

<p>and here is a drop cap <em>A</em> that sits ever so gently below the baseline, and it has better kerning between the <em>A</em> and the <em>nd</em> that follows. The sacrifice? We had to make the drop cap smaller and perform some calculations to get the kerning just right.</p>

Mit einer negativen margin-right-Eigenschaft schließt sich das And und liest sich besser, aber wir mussten die Tropfenkappe zwischen den Grundlinien verschieben.

Auch wenn es im Firefox™-Browser gut aussieht, wie im vorherigen Beispiel zu sehen ist, wird Google Chrome™ - wie hier gezeigt - ein zerknittertes Und darstellen, das aufgrund der negativen Eigenschaft margin-right schrecklich aussieht.

Wir könnten einige Dinge tun, um die unterschiedliche Darstellung in verschiedenen Browsern zu berücksichtigen. Wir könnten zur absoluten Größenangabe wechseln und Pixel statt ems verwenden, um zu sehen, ob wir die Abstände besser und präziser verwalten können. Oder wir könnten uns eine andere Schrift ansehen, um zu sehen, welche Ergebnisse wir erhalten. Da wir mit ems schon so weit gekommen sind, gehen wir den Weg des geringsten Widerstands und ziehen eine Schrift in Betracht, die weniger eckig ist, da die Abstände zwischen den Buchstaben das Problem sind, das wir lösen wollen. Wir werden die Didot-Familie zugunsten von etwas Blockhafterem wie der ITC Bauhaus® Schrift aufgeben.

body { font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: "Bauhaus W01 Heavy"; font-size: 9em; float: left; text-transform: uppercase; margin-top:–0.14em; margin-right:0.01em; margin-left:–0.05em; }

em { color:#930;}

<p>and here the drop cap is set in the ITC Bauhaus typeface, which has a more rectangular <em>A</em> that aligns with its surrounding text cleanly.</p>

Wenn eine Schrift nicht für Ihre Tropfenkappe geeignet ist, versuchen Sie eine andere. Ein kräftiges und fettes ITC Bauhaus Drop Cap gibt der Sache eine andere Note und passt besser zu seiner Umgebung hier im Firefox-Browser.

Genau der gleiche HTML- und CSS-Code wird in Chrome ein wenig anders dargestellt. Ja, wir erhalten einen verbesserten Buchstabenabstand zwischen dem A und dem nd, aber die Zeilenhöhe und die Ränder werden anders dargestellt.

Laufende Arbeit

Die hier und in Teil I gezeigten Beispiele basieren alle auf reinem HTML und CSS, ohne JavaScript. Und obwohl sich die Verwendung von JavaScript zur dynamischen Anpassung der feinen Details als hilfreich erweisen könnte, könnten wir mit der Zeit eine bessere Handhabung von Anfangsbuchstaben in der Web-Typografie sehen. Wenn neue HTML- und CSS-Standards implementiert und in Webbrowsern nutzbar werden, könnten sie eine einfachere Kennzeichnung sowohl von erhabenen Initialen als auch von Kapitälchen ohne Pseudoklassen und ohne JavaScript im Backend ermöglichen. Aber selbst dann ist die Wahrscheinlichkeit groß, dass ein rigoroses Testen von einem Browser zum anderen erforderlich ist: Nächste.

In Teil III dieser Serie von Initial Letters geht es um das Testen verschiedener Browser mit HTML und CSS, die Größenbestimmung mit Pixeln und die Behebung von Browserproblemen mit Zeilenhöhe und Polsterung. Wir werden auch tiefer in das Web Fonts eintauchen und Layouts mit Drop-Cap-Skripten und Schrägstrichen sowie dem berüchtigten Übergröße Anfangsbuchstaben. Es macht Spaß, mit Schriften zu experimentieren, bis Sie den richtigen Buchstaben für Ihre Initialen gefunden haben - und das in allen Browsern einheitlich. Genauso wie die Suche nach dem richtigen Font. Genießen Sie den Prozess.