Zeilenumbruch an der falschen Stelle

[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