CSS-Typografie: Hurenkinder und Schusterjungen bei Zeilenumbruch?

[Linuchs]

Moin,

meine Liedtexte versehe ich mit Akkorden, so sieht es aus:

Die Akkorde am Zeilenende sollen auf die nächste Zeile. Der Akkord steckt in einem inline-block, zum nächsten Buchsteben gibt es KEINE Leerstelle, wieso wird da umgebrochen?

Bei Seitenumbrüchen gibt (gab?) es Hurenkinder und Schusterjungen. Gibt es sowas für Zeilenumbrüche auch?

HTML:

bald sind wir ein <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>Pärchen, / komm und lass mich nie a-<b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_d_dur.mp3';akkorde.play();">D</b></b>lleine, oh no, no, no, no, <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>no.

.akkorde b {
  display:      inline-block;
  position:     relative;
  white-space:  nowrap;
}
.akkorde b b {
  position:     absolute;
  left:         -.5em;
  bottom:       .3em;
  font-family:  sans-serif;
  color:        #f00;
  font-size:    110%;
  z-index:      2;
}

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

An Elementgrenzen kann jederzeit umgebrochen werden. A-lleine trennt man übrigens al-leine...

Schau dir mal das ruby Element an, das könnte dir nützlich sein. Gerüst:

al-<ruby data-audio='d_dur'>leine<rp>[</rp><rt>D</rt><rp>]</rp></ruby>

Das ruby-Element ist erfunden worden, um Anmerkungen über Text zu setzen. Primär für lateinische Umschreibungen von östlichen Schriftzeichen, aber es geht auch alles andere.

Die rp Elemente sind für den Fall da, dass der Browser ruby nicht kennt. Das ist heute vernachlässigbar, du kannst sie also auch weglassen. Im rt Element steht das, was über dem sonstigen Inhalt des ruby-Elements angezeigt werden soll.

al-<ruby data-audio='d_dur'>leine<rt>D</rt></ruby>

Das data-audio Attribut kannst Du auch nutzen, um im CSS sicherzustellen, dass Du das Akkord-Styling nur für die ruby-Elemente erzeugst, die auch Akkorde präsentieren:

ruby[data-audio] {
   ...
}

Du musst schauen, was Du da überhaupt noch stylen musst. Vermutlich die Schriftgröße und Farbe im rt Element, sonst nichts.

Dann würde ich auf dem Element, das den Liedtext enthält, einen click Händler registrieren, statt jedem Akkord den Click-Handler inline zu verpassen und alles drölfzig mal zu schreiben. Das kann so aussehen:

liedcontainer.addEventListener("click", akkordPlayer);

function akkordPlayer(event) {
   const akkord = event.target.closest("ruby");
   if (akkord == null || akkord.dataset.audio == null) return;

   akkorde.src = "mp3/akkord_" + akkord.dataset.audio + ".mp3";
   akkorde.play();
}

Rolf

[Linuchs]

Hallo Rolf,

statt ... alles drölfzig mal zu schreiben.

Nein,das wird von Javascript erledigt. Der HTML-Roh-Code sieht so aus:

    <p class="akkorde"><l>2</l>
    <time data-von="00:23.75">Doch (To)eines Tages traf ich sie im Mondschein, /
    ich lud sie ein zu einem Glase (Do)Rotwein. /
    Und wie ich fragte, Liebling, willst du mein sein, /
    gab sie mir einen Kuss, und das hieß (To)ja !</time>
    </p>

Die gewünschte Tonart ist ein URL-Parameter: &tonart=G

Aus jedem (To)=Tonika wird dann der rote Akkord, der auch angeklickt erklingen kann. (Do)=Dominante, (Su)=Subdominante.

Als Musik-Laie wüsste ich gerne, wie die anderen Akkorde zu einer (beliebigen) Tonart genannt werden, vielleicht hat ein Mitleser einen Link für mich? In schwierigen Liedern gibt es schon mal 6 oder 7 unterschiedliche Akkorde. Und dann kommt noch Tonartwechsel im Lied vor.

Der <time>-Tag wird von der Master-Audio-Spur zeitgesteuert, um den laufenden Text gelb zu hinterleuchten. Karaoke.

Die Idee mit dem ruby muss ich mir noch erarbeiten.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Als Musik-Laie wüsste ich gerne, wie die anderen Akkorde zu einer (beliebigen) Tonart genannt werden

Wie unlängst schon einmal sagte: mit römischen Zahlen.

vielleicht hat ein Mitleser einen Link für mich?

Klar doch: https://forum.selfhtml.org/self/2024/jan/17/in-welcher-reihenfolge-werden-domcontentloaded-abgearbeitet/1812823#m1812823.

Auch „die Idee mit dem ruby“ ist darin bereits zu finden.

---

Der <time>-Tag

ist missbräuchlich verwendet.

“The kind of content [of the time element] is limited to various kinds of dates, times, time-zone offsets, and durations, as described below”, sagt die Spec.

Wenn du statt data-von das datetime-Attribut verwendest und beim Wert mit der Stunde anfängst (<time datetime="00:00:23.75">), könnte man das vielleicht gerade so durchgehen lassen – mit beiden Augen zugedrückt.

Besser dürfte die Verwendung eines anderen Elementtyps sein: span.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Klar doch: https://forum.selfhtml.org/self/2024/jan/17/in-welcher-reihenfolge-werden-domcontentloaded-abgearbeitet/1812823#m1812823.

Ich hab mir den Thread nochmal angesehen. Dieses „Das ist ein Blues, Rhythmus B. Achtet auf den Tempiwechsel, der Rest kommt von selbst“ in der deutschen Synchronisation ist ja noch bescheuerter als damals angemerkt. Nicht nur, dass „Rhythmus B“ üperhaupt keinen Sinn macht; mit den „changes“ in „Watch me for the changes“ sind Akkordwechsel gemeint. (Das Tempo wechselt bei „Johnny B. Goode“ nicht.)

Bei Blockbustern sollte man doch vermuten, dass für die Synchronisation ein ordentliches Budget zur Verfügung steht. Warum lassen die dann Leute ran, die von Tuten und Blasen (also von Musik) keine Ahnung haben und den Film versauen?

Kwakoni Yiquan

[Tabellenkalk]

Hallo,

Warum lassen die dann Leute ran, die von Tuten und Blasen (also von Musik) keine Ahnung haben und den Film versauen?

Weil es oft, so auch hier, gar nicht auf das Gesagte ankommt. Der Witz sollte trotzdem angekommen sein...

Gruß
Kalk

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Als Musik-Laie wüsste ich gerne, wie die anderen Akkorde zu einer (beliebigen) Tonart genannt werden

Wie unlängst schon einmal sagte: mit römischen Zahlen.

Wenn dir Zahlen nicht zusagen, kannst du die Töne auch do, re, mi, … nennen.

vielleicht hat ein Mitleser einen Link für mich?

Auch das: https://de.wikipedia.org/wiki/Solmisation#Das_relative_System

Kwakoni Yiquan

PS: 🎶 Do Re Mi (Woody Guthrie)

[Gunnar Bittersmann]

@@Linuchs

meine Liedtexte versehe ich mit Akkorden, so sieht es aus:

Wozu muss man sich bei einem Lied mit nur zwei Akkorden die Akkorde aufschreiben? SCNR.

Kwakoni Yiquan

[Linuchs]

Wir sind Ukulele-Anfänger und da geht es darum, an welchen Stellen im Liedtext der Akkord gewechselt wird.

Profis können das intuitiv.