Zeilenumbruch an der falschen Stelle

[Linuchs]

Moin,

meine Liedtexte enthalten Akkorde (Gitarre, Ukulele) vor manchen Silben. Manche Akkorde stehen am Ende der Zeile und die zugehörige Silbe in der nächsten Zeile, so sieht es aus:

Der HTML-Code:

und kein Glück ver- <span class="taktstrich">|</span> <b><b>C</b></b>säumt.

.akkorde b {
  display:      inline-block;
  position:     relative;
  white-space:  nowrap;
}
.akkorde b b {
  position:     absolute;
  white-space:  nowrap;
  left:         -.5em;
  bottom:       .3em;
  font-family:  monospace;
  font-family:  EuroPlate;
  font-weight:  normal;
  color:        #f00;
  font-size:    80%;
  font-size:    100%;
  z-index:      2;
}

Wenn ich den Akkord „untersuche“, sehe ich das:

Hat Firefox da Zeilenumbrüche eingefügt? Ich kann mir den Zeilenumbruch nach <b><b>C</b></b> nicht erklären.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Wenn ich den Akkord „untersuche“, sehe ich das:

Wenn du willst, dass wir was „untersuchen“, solltest du wissen, was zu tun ist.

Hat Firefox da Zeilenumbrüche eingefügt?

Nö, glaub nicht. Das ist nur die Darstellung des DOMs im Entwicklertool.

Kwakoni Yiquan

[Linuchs]

solltest du wissen, was zu tun ist.

Bisschen problematisch, geschützte (GEMA) Werke öffentlich zu präsentieren. Ist nur zum Proben für unsere Bandmitglieder gedacht.

Hoffentlich halten sich Suchmaschinen an

<meta name="robots"  content="noindex, nofollow">

Werde die Ordner noch durch .htaccess und .htpasswd schützen. Aber gut:

http://remso.de/dgrs/112/index.htm?nr=112

[Felix Riesterer]

Lieber Linuchs,

Hoffentlich halten sich Suchmaschinen an

<meta name="robots"  content="noindex, nofollow">

tun sie selbstverständlich nicht. Wo ein Geschäft gemacht werden kann, wird es auch gemacht. Das ist wie ein Naturgesetz. Insbesondere die Datenscraper für das Trainieren von KI-Modellen kümmert sich herzlich wenig um noindex und nofollow.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Linuchs,

dein <b><b></b></b>-Wunderwerk und "säumt" sind zwei Inline-Nodes. Ein Umbruch ist dazwischen zulässig. Also macht es der Browser, wenn er es für nötig hält.

Das b-Element steht für "bring attention to" und ist sicherlich ungeeignet für diesen Zweck.

Du musst dafür sorgen, dass die mit Akkord versehen Silbe und die Akkordangabe ein Element sind. Eine Möglichkeit, Akkorde anzuzeigen, besteht im <ruby>-Element, das Du dann passend stylest. Es ist aber eigentlich semantisch ungeeignet, darum würde ich eher zu einem Custom Element raten, wie Du es nach Gunnars Rat ja auch für Zeilen benutzt. Takte könnte man durch ein Custom Element ebenfalls kompakter erfassen - leider können Custom Elemente keine void-Elemente sein und <x-t /> ist nur in XHMTL möglich, nicht in HTML. Eventuell kann man mit einer DTD etwas hexen, aber man sollte es nicht zu weit treiben mit dem Customizing…

Das Pausenzeichen habe ich jetzt nicht farblich gesetzt, dafür könnte man <x-p></x-p> verwenden (braucht dann aber ein aria-label="Pause" für Zugänglichkeit). Ggf. ist das auch für den Taktstrich und die Akkorde nötig!

<x-l>
  <x-t><x-a chord="C">Einmal</x-a></x-t>
  <x-t><x-a chord="G7">um</x-a> die ganze</x-t> 
  <x-t>Welt, und die</x-t>
  <x-t><x-a chord="C">Taschen</x-a> voller</x-t> </x-l>
<x-l>
  <x-t>Geld, dass man</x-t>
  <x-t><x-a chord="G7">keine</x-a> Liebe</x-t>
  <x-t>und kein Glück ver-</x-t></x-l>
<x-l>
  <x-t><x-a chord="C">säumt.</x-a></x-t></x-l>
<x-l>
  <x-t>𝄽 𝄽 Viele</x-t>
  <x-t><x-a chord="G7">fremde</x-a> Länder</x-t> 
  <x-t>seh’n, auf dem</x-t></x-l>
<x-l>
  <x-t><x-a chord="C">Mond</x-a> spazieren</x-t>
  <x-t>geh’n, davon</x-t> </x-l>
<x-l>
  <x-t><x-a chord="G7">hab’</x-a> ich schon als</x-t>
  <x-t>kleiner Bub ge-</x-t></x-l>
<x-l>
  <x-t><x-a chord="C">träumt</x-a>.</x-t>
  𝄽 𝄽 𝄽 𝄽 </x-l>

x-l {
  display: block;
  margin: 0.7em;
  font-style: italic;
  font-weight: bold;
  color: blue;
}
x-l x-t {
  display: inline;
}
x-l x-t::after {
  content: ' |';
  color: gray;
  font: bold 100% sans-serif;
}
x-a {
  position: relative;
}
x-a::before {
  content: attr(chord);
  position: absolute;
  color: red;
  font: italic bold 100% sans-serif;
  display: inline-block;
  top: -0.7em;
  left: -0.5em;
  width:0;
}

Rolf

[Rolf B]

Update: War natürlich Unsinn <x-t></x-t> zu verwenden. Wenn man schon ein Element für Takte definiert, dann sollte man auch den Takt komplett hineinsetzen. Sieht besser aus und die Lesbarkeit ist besser.

Man könnte versucht sein, das chord-Attribut auf das x-t Element zu legen. Das bewirkt dann aber, dass man Akkordwechsel nur zum Taktbeginn machen kann (oder doch x-a braucht, um während des Takts den Akkord zu wechseln).

So sähe es aus - ich habe „Glück“ mit dem ?-Akkord markiert, um zu zeigen, dass man auch x-a verwenden kann 😉

<x-l>
  <x-t chord="C">Einmal</x-t>
  <x-t chord="G7">um die ganze</x-t> 
  <x-t>Welt, und die</x-t>
  <x-t chord="C">Taschen voller</x-t> </x-l>
<x-l>
  <x-t>Geld, dass man</x-t>
  <x-t chord="G7">keine Liebe</x-t>
  <x-t>und kein <x-a chord="?">Glück</x-a> ver-</x-t></x-l>
<x-l>
  <x-t><x-a chord="C">säumt.</x-a></x-t></x-l>
<x-l>
  <x-t>𝄽 𝄽 Viele</x-t>
  <x-t chord="G7">fremde Länder</x-t> 
  <x-t>seh’n, auf dem</x-t></x-l>
<x-l>
  <x-t chord="C">Mond spazieren</x-t>
  <x-t>geh’n, davon</x-t> </x-l>
<x-l>
  <x-t chord="G7">hab’ ich schon als</x-t>
  <x-t>kleiner Bub ge-</x-t></x-l>
<x-l>
  <x-t chord="C">träumt.</x-t>
  𝄽 𝄽 𝄽 𝄽 </x-l> 

x-l {
  display: block;
  margin: 0.7em;
  font-style: italic;
  font-weight: bold;
  color: blue;
}
x-l x-t {
  display: inline;
  position: relative;
}
x-l x-t::after {
  content: ' |';
  color: gray;
  font: bold 100% sans-serif;
}
x-a {
  position: relative;
}
x-t[chord]::before,
x-a[chord]::before {
  content: attr(chord);
  position: absolute;
  color: red;
  font: italic bold 100% sans-serif;
  display: inline-block;
  top: -0.7em;
  left: -0.5em;
  width:0;
}

Rolf

[Linuchs]

Hallo Rolf,

erstmal großen Dank für deine Mühe. Dein Vorschlag macht den HTML-Code sehr schlecht lesbar und damit fehleranfällig. Aber die Anregung dieser Schachtelung probiere ich aus.

Zur Zeit sieht der Code im Editor so aus:

<p class="akkorde refrain">
<time data-von="00:07.00">(vP)(vP) (0)Einmal | [-5]um die ganze | Welt, und die | (0)Taschen voller | Geld,
                          daß man | [-5]keine Liebe | und kein Glück ver- | (0)säumt. (vP)</time> | 
<time data-von="00:22.00">(vP)(vP) Viele | [-5]fremde Länder | seh′n, auf dem | (0)Mond spazieren | geh'n
                          davon | [-5]hab' ich schon als | kleiner Bub ge- | (0)träumt.(vP)</time>
<time data-von="00:37.75">| (vP)(vP)(vP)(vP)</time>
</p>

Ich weiß inzwischen, dass mein damals erfundenes <time> ein offizieller HTML-Tag ist. Aber er ist in dutzenden Dateien enthalten und schadet offensichtlich nicht.

Die Akkorde bedeuten (0) = Tonika, (-5) = Subdominante / fünf Halbtöne runter, (5) = Dominante. Die Lieder können nämlich mit dem Parameter tonart=G aufgerufen werden, das hat die höhere Priorität und wird per Javascript gesetzt.

(vP) ist leicht zu erraten: viertel Pause.

Gruß, Linuchs

[Robert B.]

Moin Linuchs,

kurze Erinnerung: HTML-Code wird im Forum ausgezeichnet als

~~~html

und nicht

~~~htm

Ich habe das jetzt zwei Mal für dich korrigiert.

Viele Grüße
Robert

[Rolf B]

Hallo Linuchs,

d.h. du macht im JavaScript einen Replace von | in <span class="taktstrich">|</span>?

Oder anders gesagt: Du generierst die endgültige HTML Version aus deinem Pseudocode? In dem Fall ist

Dein Vorschlag macht den HTML-Code sehr schlecht lesbar und damit fehleranfällig.

doch komplett irrelevant. Das, was der Browser am Ende anzeigt, ist Objectcode, kein Sourcecode, und Objectcode ist nicht zum Lesen da. Solange dein Konverter funktioniert, ist es wurscht, wie wüst das generierte HTML aussieht.

Du musst demzufolge ohnehin den Inhalt parsen. Dann kannst Du doch den textContent ein <time> Elements am | splitten und die Bruchstücke eingehüllt in <x-t>...</x-t> wieder ausgeben. Wenn das Bruchstück mit einer Akkord-Angabe beginnt, kannst Du dem x-t Element das chord-Attribut geben. Wenn eine Akkordangabe mittendrin ist, ist's schwieriger, dann musst Du das Wort dahinter in ein <x-a>...</x-a> einhüllen und dort das chord-Attribut setzen.

Andererseits führe ich mich gerade selbst ad absurdum. Wenn es Objectcode ist, braucht man nichts zu basteln, was bessere Lesbarkeit erzeugt. Dann kann man | auch einfach als Span mit class Attribut generieren. Aber für das Zusammenhalten der Akkorde kommst Du nicht drumherum, den Akkord als eine Einheit mit dem darauf folgenden Wort zu generieren.

(vP) ist leicht zu erraten: viertel Pause.

Hm. Aber der (vP) zu 𝄽-Konverter scheint zu zicken. Hinter "säumt" steht ein vP, diese Pause findet sich nicht in deinem Beispieloutput. Die beiden Pausen, die dem „Einmal“ vorangehen, fehlen auch. Die sollen vielleicht absichtlich fehlen, aber hilft das Pausenzeichen dem Sänger nicht bei der Erkennung, dass hier ein Auftakt vorliegt?

Rolf

[Linuchs]

Hallo Rolf,

Du generierst die endgültige HTML Version aus deinem Pseudocode?

Ja. Merkwürdig, dass bei dir Pausen fehlen, ich vermisse keine unter Ubuntu mit dem Firefox 130.0

Der erstellt mir auch die PDF-Dateien, hier die zugehörige:

http://remso.de/dgrs/112/112_C_text.pdf

Normalerweise verteile ich Papier an unsere Bandmitglieder, das Online-Ding ist ein Versuch, die zum Proben zu motivieren.

Aber für das Zusammenhalten der Akkorde kommst Du nicht drumherum, den Akkord als eine Einheit mit dem darauf folgenden Wort zu generieren.

Sieht wohl so aus.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

dass bei dir Pausen fehlen

Sie fehlen in dem von Dir erstellten Bild zu Beginn des Thread. Dein Quellcode hat (vP)(vP) vor dem Einmal - ich würde also erwarten, dass diese Pausen auch im Output erscheinen, den Du zeigst.

Deine Seite habe ich nicht aufgerufen.

Rolf

[Linuchs]

Hallo Rolf,

zu Beginn des Thread

Ach so, während meine Frage läuft, habe ich natürlich weitergearbeitet ...

Gruß, Linuchs

[Robert B.]

Moin Linuchs,

Ich weiß inzwischen, dass mein damals erfundenes <time> ein offizieller HTML-Tag ist. Aber er ist in dutzenden Dateien enthalten und schadet offensichtlich nicht.

es gibt einen Unterschied zwischen „offensichtlich“ und „anscheinend“ 😉 Daher ist immer noch von der Verwendung davon abzuraten und es standardkonform zu implementieren, d.h.

• x-…-Elemente in (X)HTML als HTML
• XML-Namensräume, wenn XHTML als XML verarbeitet werden soll

Viele Grüße
Robert

[Linuchs]

Hallo Rolf,

deine Idee ist die Lösung und meine Umsetzung extrem einfach.

Im Editor markiere ich die Akkorde / Silben, die NICHT umgebrochen werden sollen mit ^ (Anfang) und ° (Ende), also

| ^(0)Wenn° man nur als Kind schon wüßte,
| ^(0)was° man tun und lassen müßte,
| ^[-5]wär′° das Leben leicht. (vP)</time>
| (vP)(vP)(vP)(vP)</time>
| ^[-5]Ob° man alle weiten Ziele
| ^[-5]und° das Schönste der Gefühle
| ^(0)ir-°gendwann erreicht? (vP)</time>

Javascript macht daraus <x-a> und </x-a> und dessen CSS-Eigenschaft ist nowrap.

Danke.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

warum die manuelle Markiererei? Wenn Du eine Akkord-Sequenz findest, suche einfach das nächste Whitespace (' ', '\n', '\t', '-'). Eventuell musst Du auch noch das Stringende mit berücksichtigen (oder häng einfach vorher ein " " an die Zeile an 😉)

Unterscheide, ob Du ein '-' oder ein Whitespace gefunden hast, abhängig davon nimmst Du das gefundene Zeichen mit ins "Wort" oder nicht. Und dann packst Du den Fund in <x-a> </x-a> ein.

Das geht ganz gut mit einer Regex: /\((?<accord>-?\d)\).*?(?<delim>-|\s|$)/dg. Die d-Option aktiviert die Indizes-Ermittlung, so dass Du genau weißt, wo die Treffer sind.

Heute ist's mir aber zu spät, um eine passende Transform-Funktion drumrum zu schreiben.

Rolf

[Linuchs]

Hallo, Rolf,

warum die manuelle Markiererei?

Hast Recht, den Start kann ich vor jeden Akkord setzen.

Aber das Ende markiere ich doch mit ° und ersetze es durch

// Ende von Akkord/Silbe ​ unsichtbares Leerzeichen
setAkk_textHTML = setAkk_textHTML.replaceAll("°", "</x-a>&#8203;");

Bei Zeilenumbruch fehlt zwar das Trennzeichen -, dafür sind Silben innerhalb eines Wortes in der Zeile nicht sichtbar getrennt.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Rolf B

dein <b><b></b></b>-Wunderwerk […]
Das b-Element steht für "bring attention to" und ist sicherlich ungeeignet für diesen Zweck.

Da b keinerlei Gewichtung verleit, kann man das durchaus zur Auszeichnung der Akkorde nehmen. Aber verschachtelte b sind eindeutig eine Krücke.

Eine Möglichkeit, Akkorde anzuzeigen, besteht im <ruby>-Element, das Du dann passend stylest. Es ist aber eigentlich semantisch ungeeignet

Wieso? ruby ist für Annotationen. Im Chinesischen und Japanischen verwendet für Ausprache in Bopomofo bzw. Hiragana. Akkorde sind Annotationen zum Text. ruby-Markup wäre meine Wahl dafür.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

mein erster Versuch basierte auch auf ruby. Das rt Element war allerdings etwas störrisch, ich musste es auf display:inline-block setzen.

Ich fand dann aber die Idee, Takte in <x-t></x-t> einzuhüllen und den Akkord über ::before und ein chord-Attribut zu setzen, praktischer. Wobei sich dann die Frage nach der Zugänglichkeit stellt - ::before wird vorgelesen, nicht wahr? Das lässt sich dann schlecht belabeln. Ich glaube aber auch, dass eine blinde Person ohnehin nicht vom Blatt spielen kann und für das Erlernen der Begleitakkorde eine andere Art der Informationsvermittlung braucht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wobei sich dann die Frage nach der Zugänglichkeit stellt - ::before wird vorgelesen, nicht wahr?

AFAIK ja – in manchen Screenreadern. Ich würde meine Hand nicht dafür ins Feuer legen, dass es alle tun. Möglicherweise können Nutzer ihre Screenreader auch gemäß ihren Vorlieben konfigurieren.

Ich glaube aber auch, dass eine blinde Person ohnehin nicht vom Blatt spielen kann und für das Erlernen der Begleitakkorde eine andere Art der Informationsvermittlung braucht.

Hier stecken gleich drei Fehler:

• Du setzt Screenreader-Nutzer mit blinden Nutzern gleich.
• Du „glaubst“, was bestimmte Personen können oder nicht können.
• Du „glaubst“, was bestimmte Personen brauchen oder nicht brauchen.

Was auch immer du da für Annahmen machst, sie sind vermutlich (zumindest für einen Teil der betreffenden Personen) falsch. Mache keine Annahmen über Nutzer, sondern stelle sicher, dass Webseiteninhalte auch mit assistiven Technologien funktionieren.

Wie Heydon Pickering unlängst in seinem Vortrag The Folly of Chasing Demographics bei Inclusive Design 24 2024 sagte: “Design for the tools, not what you think you know about the users.” (ab 11:53)

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Du glaubst…

ja, glaube ich. Um vom Blatt zu spielen oder zu singen, MUSS man sehen können. Sich den Blattinhalt vorlesen zu lassen, während man musiziert, passt einfach vom Rhythmus her nicht.

Wer die Akkorde zum Lied auswendig lernen möchte und das nicht durch Sehen tun kann (oder möchte), ist beispielsweise mit einem Audio, das die Akkorde passend zum Lied spielt und dabei die Akkordnamen ansagt, besser bedient.

Rolf

[Robert B.]

Moin Rolf,

Sich den Blattinhalt vorlesen zu lassen, während man musiziert, passt einfach vom Rhythmus her nicht.

doch, das nennt sich im Rap Freestyle 😝

Viele Grüße
Robert