Initiale - der erste Buchstabe
Initiale bzw. Initial steht in der Typografie für einen ausgeschmückten, verzierten oder vergrößerten Buchstaben, der als Schmuckbuchstabe am Anfang eines Buchkapitels oder eines Absatzes steht, abgeleitet von lat. initialis für anfänglich oder am Anfang stehend. Mehr zum Thema: typolexikon.de »
Einsatz in CMSimple
Der Einsatz von Initialen passiert im Template. Wenn die Schriftart installiert ist (.ttf im Ordner fonts/ und @font-face in der stylesheet.css) und der jeweilige CSS Code in die stylesheet.css des aktiven Templates eingefügt ist, muss man nur noch den Anfangsbuchstaben markieren und ihm per Editor eine der CSS-Klassen zuweisen (Format => Formate => Andere Formate). Der Editor setzt den Buchstaben dann automatisch in <span> </span>.
Um die Eignung einer Schriftart als Initial zu prüfen, braucht Ihr die Grossbuchstaben. Nehmt die folgende Zeile in den Zwischenspeicher, bevor Ihr einen Link zu einer der Schriftarten verfolgt, bei Google Fonts könnt Ihr die dann in ein Feld einfügen:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü
Variante inline
Die einfachste Art ist die Verwendung inline, d. h. das Initial (der 1. Buchstabe) bleibt im Textfluss. Für diese Art des Initials eignen sich auch Schriftarten, bei denen die Grossbuchstaben ihren Raum überragen und sich über oder unter den nachfolgenden Buchstaben erstrecken.
Wie z. B. das grosse W in der hier verwendeten Schriftart Beau Rivage », die auf Google Fonts frei verfügbar ist. Als Fallback für den Fall, dass die Schriftart Beau Rivage nicht installiert ist, dient die weit verbreitete Serifenschrift Georgia.
Der CSS Code:
/* Schriftart Beau Rivage (BR) */
span.BR {
font-family: BeauRivage, georgia, serif;
font-size: 48px; font-weight: 400;
color: #620; text-shadow: 2px 2px 5px #000000cc;
padding: 0; margin: 0 5px 0 0;
}
Variante Blockelement links floatend
Die bekanntere Variante ist, den Text um das Initial herumfliessen zu lassen. Erreicht wird das, indem man das umgebende <span> Element per CSS als Blockelement definiert und dieses links floaten lässt. Bei dieser Variante sind die Initiale meist grösser und erstrecken sich über mehrere Zeilen.
Es gibt -zig tausende freie Schriftarten im Netz. Beim Einsatz auf der Website als Initial kann man jedoch böse Überraschungen erleben. Auf meinem (ur)alten iPad z. B. funktionieren einige Initialen- und Frakturschriftarten mit dieser Technik nicht, andere werden auf Android Systemen verzerrt oder versetzt dargestellt. Alle hier als Initial verwendeten Schriftarten habe ich auf allem, was mir so zur Verfügung steht, erfolgreich getestet.
Spezielle Initialenschriftart
Die Schriftart Kanzlei Initialen » ist eine frei verfügbare spezielle Initialenschriftart. Diese Initialenschriftart funktioniert nun endlich auch links floatend auf meinem (ur)alten iPad. Auch hier dient die weit verbreitete Serifenschrift Georgia als Fallback für den Fall, dass die Initialen Schriftart nicht installiert ist. Zur Anpassung an verschiedene Schriftarten kann man mit font-size und line-height spielen. Zum besseren Verständnis oder aus gestalterischen Gründen kann man dem Hintergrund eine Farbe zuweisen oder, wie hier, das ganze mit einem Hintergrundbild und einem Rahmen versehen. Um die Ausrichtung einzelner Buchstaben muss man sich hier keine Gedanken machen, bei diesen Schriftarten haben in der Regel alle Buchstaben die gleiche Höhe.
Der CSS Code:
/* Schriftart Kanzlei Initialen (KAI) */
span.KAI {
font-family: Kanzlei-Initialen, georgia, serif;
display; block; float: left;
background: #f6f6f0; color: #620;
font-size: 96px; line-height: 88px; font-weight: 400;
border: 4px double #998; border-radius: 5px;
padding: 1px 5px; margin: 0 9px 0 0;
}
Normale Schrift mit Hintergrund und Rahmen
Hier kommt die Frakturschrift UnifrakturMaguntia » zur Anwendung, die auf Google Fonts frei zur Verfügung steht. Die Unterschiede in der Höhe der Grossbuchstaben sollten nicht zu gross sein. Das ist wichtig, wenn Schriftarten als Initial verwendet werden, damit man sie an die Schriftgrösse des Textes anpassen kann. Es ist unglaublich nervig, wenn die Grossbuchstaben stark unterschiedliche Höhen haben, mal nach oben und mal nach unten ausschweifen. Vor allem wenn man mit Hintergründen arbeitet. Meistens sind es die Buchstaben F, J und Y, die nach unten ausbrechen, es gibt aber auch noch andere Kandidaten.
Das Problem mit den Umlauten:
(Für Frakturschrift Unkundige: Die Initialen sind die Buchstaben A und Ä)
Ähm - das sieht nicht schön aus. Wie man es auch dreht und wendet, die grossen Umlaute sind nicht vertikal zentriert. Lässt man den notwendigen Platz, sind die anderen Buchstaben nicht mehr vertikal zentriert. Optisch schön kann man das lösen, indem man Ä, Ö und Ü nicht verwendet und statt dessen auf Ae, Oe und Ue zurückgreift, wobei nur A, O und U als Initial verwendet werden. Bei den meisten speziellen Initialenschriftarten gibt es die Umlaute sowieso nicht.
Aehm ... - so sieht das dann aus. Kann man so machen, muss man aber nicht. In den Anfängen des Internet, als sich utf-8 noch nicht durchgesetzt hatte, haben wir unsere E-mails so geschrieben, um sicher zu gehen, dass die nicht mit diesen rhombischen Fragezeichen ankommen. Die optisch ansprechende Gestaltung verlangt eben manchmal orthographische Kompromisse, aber die gehe ich sowieso täglich ein, da ich mich zumindest teilweise der neuen Rechtschreibung verweigere 
Ähm - es geht aber auch anders: Einfach eine weitere Klasse .UFMbgDown {padding-top: 18px!important;} einführen, das Initial (das Ä) markieren und ihm die neue Klasse per Editor (Format => Formate => Andere Formate) zuweisen. Der TinyMCE hängt diese Klasse im umgebenden span-Tag an die vorhandene Klasse an:
<span class="UFMbg UFMbgDown">Ä</span>
Das Ä wird um 6px nach unten verschoben, wie im Initial am Anfang dieses Absatzes zu sehen. Auf diese Art kann man dann doch wieder die Buchstaben Ä, Ö und Ü korrekt und ansehnlich als Initiale mit Hintergrund und/oder Rahmen verwenden, auch ohne im Quelltext zu arbeiten und ohne die Ae-Oe-Ue Krücke.
Ja, es gibt auch Buchstaben, die nach unten ausschweifen, wie z. B. das J. Bei dieser Schriftart würde das ohne Sonderbehandlung nach unten "aus dem Rahmen fallen". Die Lösung: Eine weitere Klasse .UFMbgUp{padding-top: 6px!important;} verringert den oberen Abstand des Buchstabens (padding-top) von 12px auf 6px und versetzt den Buchstaben somit um 6px nach oben.
Der CSS Code:
/* Schriftart Unifraktur Maguntia mit Hintergrund (UFMbg) */
span.UFMbg {
font-family: UnifrakturMaguntia, georgia, serif;
display: block; float: left; box-sizing: border-box;
height: 100px; min-width: 96px; text-align: center;
background: #ecece6; color: #620;
font-size: 80px; line-height: 80px; font-weight: 400;
border: 4px solid #bba; border-radius: 5px;
padding: 12px 12px 0 12px; margin: 0 9px 0 0;
}
span.UFMbgDown {padding-top: 18px!important;}
span.UFMbgUp {padding-top: 6px!important;}
Normale Schrift ohne Hintergrund und Rahmen
Bei Initialen ohne Hintergrund und Rahmen gibt es die Probleme mit den Umlauten in der Regel nicht, weil die Buchstaben nicht innerhalb eines definierten Feldes korrekt ausgerichtet sein müssen. Die hier verwendete Keltisch-Irische Schriftart Eagle Lake » ist auf Google Fonts frei verfügbar. Als Fallback für den Fall, dass die Schriftart Eagle Lake nicht installiert ist, dient auch hier die weit verbreitete Serifenschrift Georgia.
Keltisch-Irische Schriftarten sind als Initiale sehr attraktiv, auch ohne einen aufwändigen Hintergrund und/oder Rahmen. Auf 1001freefonts.com » stehen viele weitere Keltisch-Irische Schriftarten zur Verfügung, allerdings sind nicht alle uneingeschränkt frei verwendbar. Man sollte also die unterschiedlichen Lizenzbedingungen beachten, um nicht in Konflikt mit irgendwelchen Urheberrechten zu geraten.
Der CSS Code:
/* Schriftart Eagle Lake (EL) */
span.EL {
font-family: EagleLake, georgia, serif;
display: block; float: left;
color: #620; text-shadow: 2px 2px 5px #000000cc;
font-size: 80px; line-height: 72px; font-weight: 400;
padding: 0; margin: 0 9px 0 0;
}
Gedichte und Liedtexte
Dieses Design geht davon aus, dass eine Strophe ein Absatz ist und die Zeilenumbrüche mit <br> erzeugt werden. Am Anfang jeder Strophe steht die Nummer, ohne Leerzeichen dahinter.
Als erstes weist man der Strophe (dem Absatz) die Klasse "p.lyrics" zu, indem man irgendwo in die Strophe (den Absatz) klickt und dann im Editor Format => Formate => Blockformate benutzt. Dann markiert man die Nummer am Anfang der Strophe und weist ihr die Klasse "span.lyrics" zu (Format => Formate => Andere Formate). Das Ergebnis sollte dann so aussehen:
Der Bauer nach geendigtem Prozeß
(youtube - neues Fenster oder Tab)
Matthias Claudius (* 15.08.1740, † 21.01.1815)
1Gottlob dass ich ein Bauer bin
Und nicht ein Advocat
Der alle Tage seinen Sinn
Auf Zank und streiten hat
2Und wenn er noch so ehrlich ist
Wie sie's nur selten sind
Karr ich doch lieber meinen Mist
Bei Regen und bei Wind
3Denn davon kommt die Saat herfür
Ohn' Hülfe des Gerichts
Aus nicht wird etwas denn bei mir
Bei ihm aus etwas nichts
4Gottlob dass ich ein Bauer bin
Und nicht ein Advocat
Und fahr ich wieder zu ihm hin
So breche mir das Rad
Der CSS Code:
/* Absatz */
p.lyrics {
font-family: RobotoCondensed, arial, sans-serif;
font-size: 18px; line-height: 1.4em; font-style: normal;
padding-left: 40px;
}
/* Initial (Nr. der Strophe) */
span.lyrics {
font-family: 'times new roman', serif;
display: block; float: left; box-sizing: border-box;
width: 30px; height: 30px; text-align: center;
background: #666 url(images/bggranit.jpg); color: #fff;
border: 0; border-radius: 3px;
font-size: 20px; line-height: 24px; font-weight: 900; font-style: normal;
padding: 2px 0 0 2px; margin: 4px 0 0 -40px;
}
Es jedoch ist fraglich, ob sich der ganze Aufwand wirklich lohnt, denn eine geordnete Liste lässt sich per li::marker zwar eingeschränkt, aber doch ganz ordentlich stylen.
Geordnete Liste:
- Gottlob dass ich ein Bauer bin
Und nicht ein Advocat
Der alle Tage seinen Sinn
Auf Zank und streiten hat - Und wenn er noch so ehrlich ist
Wie sie's nur selten sind
Karr ich doch lieber meinen Mist
Bei Regen und bei Wind - Denn davon kommt die Saat herfür
Ohn' Hülfe des Gerichts
Aus nicht wird etwas denn bei mir
Bei ihm aus etwas nichts - Gottlob dass ich ein Bauer bin
Und nicht ein Advocat
Und fahr ich wieder zu ihm hin
So breche mir das Rad
Der CSS Code:
ol li::marker {font-family: 'times new roman', serif; font-size: 20px; font-weight: 900; color: #610;}
