Initiale im Text

[Gonzo Gates]

Hallo Gert

ich drehe bei Ziffern als iniale gerade am Rad.

Ich möchte keine Lösung haben. Das hier dient nur der Information.

Ich habe ein Gedicht und die Strophen sind eingehend mit 1 und 2 gekennzeichnet.

Code: Select all

<h1>Frühling</h1>
<div class="dor_initiale">
<p>1 Wenn der holde Frühling lenzt<br>Und man sich mit Veilchen kränzt<br>Wenn man sich mit frischem Mut<br>Schnittlauch in das Rührei tut<br>Wallen durch des Menschen Säfte<br>Neue, ungeahnte Kräfte –<br>Jegliche Verstopfung weicht<br>Alle Herzen werden leicht<br>Und das meine fragt sich still<br>Ob mich dies Jahr einer will?</p>
</div>
<div class="dor_initiale">
<p>2 Ströme, milde Frühlingsluft<br>In das Haus hinein,<br>Ströme, milder Frühlingsstrahl<br>Auch ins Herz hinein. –<br>In die Herzen hart wie Stein,<br>kalt wie Kupfergeld,<br>Schmelze drei Lawinen drein,<br>Hochmut, Selbstsucht, Geld</p>
</div>
<p>Das Gedicht „Frühling“ stammt aus der Feder von <a href="https://de.wikipedia.org/wiki/Friederike_Kempner" target="_blank" rel="noopener">Friederike Kempner</a> (* 25. Juni 1828, † 3. Februar 1904).</p>

Ich arbeite hier immer noch mit

Code: Select all

div.dor_initiale p:nth-of-type(1)::first-letter { /* Erste Zeile - Erster Buchstabe - Ü und I oder die 1 spucken mir in die Suppe */
  display: block; /* hinzugefuegt */
  height: 1.3em; /* hinzugefuegt - nix */
  width: 50px; /* hinzugefuegt - nix - 3em auch nix */
	/*color: rgba(68,68,68,.7); #444 */ 
	color: rgba(225, 220, 202,1); /* (#e1dcca  grau-ton - Kein gruen-ton! -> sieht scheisse aus */
	text-shadow: 2px 2px rgba(68,68,68,.8); /* hinzugefuegt #444 -> grau-ton */
	text-transform: uppercase; /* hinzugefuegt */
	background: rgba(225, 220, 202,.3); /* angepasst */
	font-size: 300%;
	font-style: italic; /* hinzugefuegt */
	float: left;
	line-height: 1.3em; /* weniger */
	font-weight: 600; /* vorher bold */
	padding: 0.1em 0.28em 0.15em 0.1em; /* angepasst */
	margin: 0.06em 0.2em 0.06em 0; /* angepasst */
	border: 0.04em dashed rgba(68,68,68,.8); /* #444;*/
	/*border-radius: 10% / 50%;*/
	border-radius: .15em;
	box-shadow: 0 0 0 .06em rgba(235, 230, 212,1); /* angepasst */
	font-family: Rubik, "Noto Serif Cond", Consolas, "Edwardian Script ITC", "Brush Script MT", cursive;
	}

Mal schauen, wie da herumbastele oder ich lasse es, denn es ist ja auf meiner 'Testarossa'-Subsite

Nochmal Danke

Gruß
Gonzo

[Gert]

Hallo Gonzo,

da Initialen ja nix so ganz modernes und eher auf alten Schriftrollen zu finden sind habe ich jetzt mal ein passendes Template entwickelt:

https://www.ge-webdesign.de/demotpl/?Pl ... _Buchstabe

Ganz unten habe ich jetzt auch noch eine Variante für Gedichte und Liedtexte hinzugefügt. Bei Anpassungen sollte man darauf achten, dass bei Initialen mit Hintergund und/oder Rahmen eine Schriftart mit gleichhohen Zahlen verwendet wird. Die Schriftart Georgia z. B. ist da eher nicht geeigent

Gert

[Gonzo Gates]

Hallo Gert,

Matthias Claudius (Asmus) ist bei uns in Wandsbek eine hoch angesehene Person gewesen, auf die noch vieles hinweist.

Vielen Dank für die Erwähnung.

Ich finde aber die irische Musikuntermalung des Gedichts nicht so gut.

Mal schauen 'li::marker' verpasse ich auch noch ein anderes aussehen!...hm...ist schon mal passiert...

Unter uns...das mit den Initialen war eigendlich nur ein Spielkram von mir und wahrscheinlich auch von dir

Gruß
Gonzo

[Gonzo Gates]

Hallo Gert,

ich habe mir nochmal das CSS für Gedichte angesehen und dort schmeißt du eine Grafik hinein

Code: Select all

/* 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: #fff 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;
}

Warum benutzt du nicht einfach das?

Code: Select all

background: rgba(102,102,102,.8);

Da kann man sich die Chose mit der Grafik sparen (Die haben wir früher zu Hauf genutzt, auch in Tabellen) und das sollten heutige Browser, wenn man mal von den Textbrowsern 'lynx', 'links' und 'elinks' absieht, alle darstellen können. Wir sind nicht mehr in der Zeit, als man im CSS Browserweichen einbauen musste.

Gruß
G0nz0

[Gert]

und dort schmeißt du eine Grafik hinein ... Warum benutzt du nicht einfach das? ...

Die Grafik (bggranit.jpg) hat eine Struktur, auch wenn das bei den kleinen Flächen nicht so auffällt,

Gert