Initiale im Text

Andere Lösungen
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Initiale im Text

Post by Gonzo Gates »

Hallo Gemeinde,

in einer meiner Webseiten, habe ich Initiale, sowie im p-Tag erste Zeile anders formatiert. Sieht kuul aus.

Jetzt habe ich es auf CMSimple übertragen und es ist auch simpel.

in einer CSS-der eigenen Wahl (ich nehme dazu meine zentrale Datei) folgendes eintragen:

Code: Select all

/*+++++ INITIALE +++++*/
/* hinzugefuegt und dem geht - https://wiki.selfhtml.org/wiki/CSS/Tutorials/Initialen 1 - 4 
   Zeilenafressierung: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
*/
div.dor_initiale p::first-line {
	line-height: 1.2em; /* angepasst */
	font-weight: 600;
	color: rgba(68,68,68,.8); /* angepasst #444 */
}

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: 3em; /* hinzugefuegt - 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.2em 0.15em 0.2em; /* 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;
}
Das p-Tag wird über die Zuweisung der Klasse bei dem div-Tag adressiert. Vorher war die Adressierung in meiner Seite über eine ID mit '#rechts p::first-line' und '#rechts p:nth-of-type(1)::first-letter'.

Im Editor auf '</>' klicken und ein, zwei, drei,... p-Tags in ein div-Tag einbetten. dem div-Tag (hier) 'class="dor_initiale"' zuweisen (Leider hat es mit einem span-Tag nicht funktioniert. Da hat TinyMCE mir immer in die Suppe gespuckt, auch wenn ich noch so sehr in der 'init-Datei' herumgewurschtelt habe) - z.B.:

Code: Select all

<div class="dor_initiale">
<p>Ehne Mehne Muh und was die anderen Kühe so sagen ist mir furz egal! und wenn ich es sage, dann darf ich es sagen. Riggs! Sehen sie, was auf diesem Schild steht? Ja. Das gleiche, wie auf diesem, aber das ist mir furz egal (Adaptiert aus 'Leathel Weapon').</p>
</div>
oder

Code: Select all

<!-- Gefunden auf 'https://www.gedichte-lyrik-online.de/fruehling-kempner.html' -->
<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>
Wenn mehrere Absätze (p-Tags) innerhalb eines div-Tag stehen, wird immer nur der erste Absatz mit einer Initiale versehen. Alle Absätze haben aber die erste Zeile anders formatiert.

Ich hoffe nix vergessen zu haben.

Ich weiß, dass das CSS nicht perfekt ist, sieht aber gut aus und macht 'nen schmalen Schuh.

Ach ja, die gewünschte Schrift kann man sich natürlich über folgenden Eintrag im CSS einbinden und dann lobend an der richtigen Stelle erwähnen (Meine Schriftarten habe ich in einem zentralen Ordner in CMSimple abgelegt (https://cmsimple.org/forum/viewtopic.php?t=1244):

Code: Select all

/*#####################################################*/
/* Schriften DOR: hinzuhefuegt
/*#####################################################*/

@font-face {font-family: 'Schrift Name'; font-style: normal; font-weight: 400; src:url("../../fonts/[Schriftname].ttf") format("truetype");}
Gruß
Gonzo

Anmerkung: Ich weiß, das hier kein CSS-Untericht gegeben wird, aber ich wollte die Übertragung auf das CMS mal los weden.

Anmerkung2: Ich bin auf 'https://www.ge-webdesign.de/demotpl/?Pl ... rst_Letter' gestoßen, aber da werden die Initiale in ein span-Tag eingebaut und man muss den erten Buchstaben, die Ziffer oder die Zahl extra mit einem Style versehen. Meine (https://wiki.selfhtml.org/wiki/CSS/Tutorials/Initialen 1 - 4 und https://developer.mozilla.org/en-US/doc ... th-of-type) Variante holt sich den 1. Buchstaben und die erste Zeile per CSS in einem p-Tag und man kann mit einem span- oder div-Tag separieren, welcher Absatz eine Initiale bekommen soll. Habe ich auch schon in CMSimple ausprobiert und dem geht!

Zu meinem (Miss)Erflog bzgl. span-Tag und Tiny kann man in https://cmsimple.org/forum/viewtopic.php?t=1250 nachlesen
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Da hat mir Gonzo aber einen Floh ins Ohr gesetzt :roll: ;)

Habe mich das ganze Wochenende mit Initialen und entsprechenden Schriftarten herumgeschlagen. Wichtig war mir, dass nach der Einrichtung nur noch der erste Buchstabe eines Absatzes markiert und ihm per Editor mittels Format => Formate => Andere Formate die entsprechende CSS Klasse zugeordnet werden muss. Der Editor setzt den Buchstaben dann automatisch in <span> </span>.

Es gibt -zig tausende freie Schriftarten im Netz. Beim Einsatz auf der Website kann man jedoch böse Überraschungen erleben. Auf meinem (ur)alten iPad z. B. funktionieren einige Initialen- und Frakturschriftarten bei dieser Technik nicht.

Hier gibt es die Demo:

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

Vielen Dank - Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Initiale im Text

Post by Gonzo Gates »

Hallo Gert,
Gert wrote: Mon 12. Jun 2023, 09:44 Da hat mir Gonzo aber einen Floh ins Ohr gesetzt :roll: ;)
Leider habe ich auch so viele Flöhe im Ohr. Habe versucht mit Marienkäferlarven dagegen an zu gehen - hat nix gegracht. Die gehen nur auf Läuse los.

Bei einer meiner Seiten habe ich gedacht:"Mensch mach doch mal 'Simonetta' da rein". Ich fand die Schriftart ziehmlich kuul. Die Schrift hat mir das ganze Layout zersemmelt und ich musste, weil ich die Schrift haben wollte, in sämtlichen Klassen bzgl. Höhen- und Breitenangabe stundenlang herumwühlen!

Mein Problem mit I, Ä, Ü, Ö scheinst du ja gelöst zu haben. Oder nicht? Bei den meisten Schriften stehen die 'Tüddelchen' über dem Buchstaben und der Abstand bei 'I' ist l+r meistens sehr geringer. Ich check das mal...

Vielen Dank für die Lorbeeren, für die Mühe und ich hoffe geholfen zu haben.

Aber auf erste Zeile anders formatiert in einem p-Tag bist du nixht eingegengen

Gruß
Gonzu
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Gonzo Gates wrote: Mon 12. Jun 2023, 19:12 ... und der Abstand bei 'I' ist l+r meistens sehr geringer.
Bei schmalen "I" hilf meistens min-width und text-align:center für das umgebende Element. Sehr breite Buchstaben wie das "M" können sich dann noch mehr Platz verschaffen.

Ich habe das jetzt mal auf der Demoseite bei der Fraktur-Initiale hinzugefügt (ist jetzt breiter),

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Gonzo Gates wrote: Mon 12. Jun 2023, 19:12 Aber auf erste Zeile anders formatiert in einem p-Tag bist du nixht eingegengen
Nö - ist mir nicht wichtig, wer das will kann ja nach Deiner Anleitung im Quelltext arbeiten,

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Gonzo Gates wrote: Mon 12. Jun 2023, 19:12 Mein Problem mit I, Ä, Ü, Ö scheinst du ja gelöst zu haben. Oder nicht?
Eher nicht. Sieht halt doof aus bei gerahmten Initialen, und in der speziellen Initialschrift gibt es die gar nicht. Da bleibt dann nur das hier:

Code: Select all

<span class="UFM">A</span>e... 
... für Ä, wenn es schön aussehen soll oder eben, wie bei der speziellen Initialschrift, wenn es nicht anders geht,

Gert

PS: Auf meiner Demoseite, ganz unten, habe ich das Problem mal behandelt, hier nochmal der Link:

https://www.ge-webdesign.de/demotpl/?Pl ... _Buchstabe
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Initiale im Text

Post by Gonzo Gates »

Hallo Gert,

mein eigendliches Ziel ist, dass (Achtung Neue deutsche Rechtschreibung") man nicht jeder Initiale extra noch vorschreiben muss, wie sie sich in den Ausmaßen darzustellen hat, sondern, dass (!) alle innerhalb eines Textes die selben Maße haben.

Ich verstehe dein Proplem bzgl. der Schriften, denn ich habe Simonetta nur in einer Webseite (lokal) angewandt, aber es geht einigermaßen mit Initialen.

Dnn habe ich ein Pseudocodeing gebaut :idea:

Code: Select all

if (p-Tag-first-letter = 'I') {
  document.write.style.min-width = '150px';
  document.write.style.text-align = 'center';
} 
elseif (p-Tag-first-letter = 'Ä' | 'Ö' | 'Ü') { // Fraktur nicht beruecksichtigt
  document.write.style.padding = '10px 0';
  document.write.style.vertical-align = middle;
} 
elseif (p-Tag-first-letter = 'M') {
  document.write.style.padding = '0 3px';
} 
Wahrscheinlich führt das auch nicht zum Ervolk. :-(

Die Schriften sind halt alle ein wenig Eigenwillig.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Gonzo Gates wrote: Mon 12. Jun 2023, 21:44 Die Schriften sind halt alle ein wenig Eigenwillig.
Man kann das CSS für Initiale mit Hintergrund und Rahmen sicher universell gestalten, aber die Werte müssen für jede Schriftart angepasst werden. Ausserdem sind noch Schriftgrösse, Zeilenhöhe und Zeilenabstand des umgebenden Textes zu beachten, die ja bei jedem Template anders sein können. Das ganze gehört also auf jeden Fall ins Template.

Ich habe jetzt noch einmal meine Demoseite überarbeitet, vor allem das CSS für Initialen mit normaler Schrift, Hintergrund und Rahmen und der Frakturschrift, und ganz unten den Teil mit den Umlauten. Da kann man jetzt, völlig ohne Programmierung, per style="padding-top: __px;" einzelne Buchstaben anheben und absenken. Dazu muss man aber in den Quelltext gehen, wer das nicht will kann einfach die Ae-Oe-Ue Methode verwenden ;)

Gert

Hier nochmal der Link:

https://www.ge-webdesign.de/demotpl/?Pl ... _Buchstabe
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Initiale im Text

Post by Gert »

Gonzo Gates wrote: Mon 12. Jun 2023, 19:12 Mein Problem mit I, Ä, Ü, Ö scheinst du ja gelöst zu haben. Oder nicht?
Ja - jetzt ist es gelöst, und zwar ohne im Quelltext zu arbeiten, ohne JavaScript und ohne die Ae-Oe-Ue Krücke:

https://www.ge-webdesign.de/demotpl/?Pl ... be#Umlaute

Mal sehen, was ich jetzt damit anfange. Danke für die Anregung, hat Spass gemacht ;)

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Initiale im Text

Post by Gonzo Gates »

Hallo Gert,
Gert wrote: Tue 13. Jun 2023, 20:36 Mal sehen, was ich jetzt damit anfange. Danke für die Anregung, hat Spass gemacht
Schriftarten sind eben immer ein bisschen zickig, wenn man sie verwendet. Hast du ein Layout und änderst die Schriftart, dann bekommst du u.U. ein anderes Ergebnis (Musste ich mit Simonetta feststellen). Bei Initialen ist es m.E. noch schwieriger.

Dein 'D' (Wie bist du nur darauf gekommen?) in 'Kanzlei-Initialen' (Natürlich in meinem zentralen 'fonts'-Ordner) als Initiale habe ich übrigens in meine Website, geringfügig geändert, eingebaut und das 'papyrus.jpg' geklaut. Oh das reimt sich. "Und was sich reimt ist gut!", hatte mal der weise Dichter 'Pumuckl' gesagt

Danke für die Begeisterung. die Lösung und Chapeau!

Gruß
Gonzo

-------------------------------------------------------------------------------------------------------------------------------------------------------------

"Ist es nicht schrecklich, dass der menschlichen Klugheit so enge Grenzen gesetzt sind und der menschlichen Dummheit überhaupt keine?"
(Konrad Adenauer)
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Post Reply