CSS: Wie Gitarren-Akkorde platzsparend in den Text einfügen?

Ich erstelle HTML-Dokumente mit Liedtexten zum Ausdrucken. Die Texte sind so groß wie möglich. Also viele Strophen, umso kleiner der Text.

Nun möchte ich Akkord-Angaben hinzufügen. Die führen dazu, dass die Zeilenhöhe enorm anschwillt und der Text nicht mehr auf A4 passt:

Welches CSS stellt die Akkorde höher, aber behält die Zeilenhöhe? Hier habe ich experimentiert:

akk_c::before {
  color:          red;
  background:     #eee;
  vertical-align: super;
  font-family:    arial, sans-serif;
  font-size:      80%;
}
akk_c::before   { content: "C"; }

Answer 1

[medmonk]

Deine bisherige Umsetzung ist nicht valide und es dir obendrein einfacher machen kannst, wenn du den Wert des Akkords in einem data Attribut ablegst. Das jeweilige Wort wird dann in einem <span> verschachtelt und mit CSS formatiert.

HTML:

<div>
  <p> 
   Sie putzen
   <span class="chord" data-chord="C">klirrend</span>
   am Geschirr...
  </p>
</div>

CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

Durch den obigen Aufbau wird der Akkord absolut am <span> Element ausgerichtet. Es spielt daher keine Rolle, auf was du den Zeilenabstand (line-height) einstellst. Der Akkord wandert automatisch mit, da er sich am <span> hängt.

Du kannst dafür auch das <i> Element zweckentfremden, so wie man es gerne zwecks Einbindung von Icons macht. Wäre dann nochmal etwas kürzer.

<i class="chord" data-chord="C">klirrend</i>

Woher ich das weiß: Berufserfahrung – Full-Stack Developer

Comments

[verreisterNutzer]

Perfekt, besser kann man es nicht erklären.

[guteantwort626]

Deine bisherige Umsetzung ist nicht valide

Meinst du wegen der eigenen Definition eines HTML Elements? Das wäre in HTML5 valide, wenn statt eines _ ein - verwendet werden würde, siehe https://www.mediaevent.de/html/custom-elements.html

[medmonk]

@guteantwort626

Ich weiß das man eigene Elemente anlegen kann. Es ging tatsächlich um die Schreibweise. Dasselbe Schema gilt ja auch beim data Attribut.

[10tel]

Sieht gut aus, funktioniert leider nicht. (Bin schon beim nächsten Lied)

Wenn der <span class="cord" data-cord="C">Maibaum</span> wieder am <akk_f>Dorfplatz</akk_f> <akk_c>steht</akk_c> <i>(wenn der <akk_c>Maibaum</akk_c> wieder am <akk_f>Dorfplatz</akk_f> <akk_c>steht</akk_c>)</i>

Beim [Firefox:Untersuchen] wird der style für .cord vollkommen ignoriert, woran kann das liegen?

 <style>
.chord {
 position: relative;
 margin-left: 11px;
 background: #fee;
}
.chord[data-chord]::before {
 content: attr(data-chord);
 padding: 3px 5px;
 position: absolute;
 top: -9px;
 left: -13px;
 color: red;
}
 p {
   margin-bottom: .2em;
 }
 </style>

[10tel]

@10tel

span wurde akzeptiert, span.cord aber nicht ... komisch

span {
  min-width: 5px;
  background: #fee;
}
span.chord {
  position: relative;
  margin-left: 11px;
}
span.chord[data-achord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

[10tel]

@10tel

acord = chord (hatte ich ausprobiert, vielleicht ist chord ein Systembegriff - nein)

[medmonk]

@10tel

Du musst den Quellcode so übernehmen, wie ich ihn vorgegeben habe. Schmeiß in CSS das unnötige span raus, ebenso deine akk_f usw.

wird der style für .cord vollkommen ignoriert, woran kann das liegen?

Die Klasse heißt chord (englisch für Akkord ;) ). Du musst deine „akk” durch ein <span> oder <i> Element ersetzen und anschließend jeweils im data Attribut den gewünschten Akkord einträgst. Dann funktioniert es auch.

Dein HTML sollte dann so aussehen:

<i class="chord" data-chord="f">Dorfplatz</i> 
<i class="chord" data-chord="c">steht</i>(wenn der 
<i class="chord" data-chord="c">Maibaum</i> wieder am 
<i class="chord" data-chord="f">Dorfplatz</i> 
<i class="chord" data-chord="c">steht)</i>

Dein CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

[10tel]

@medmonk

Zwischenbericht: Danke, dein Vorschlag funktioniert, wenn er allein im Dokument ist. Nun suche ich, warum das nicht funktioniert in meinem Umfeld.

[10tel]

@10tel

Fehler gefunden. Ich schrieb cord mit 4 Buchstaben, du chord mit 5 Buchstaben. Ist mir erst aufgefallen, als eine korrekte Zeile im Editor unter einer fehlerhaften Zeile stand. Die fehlerhafte war kürzer.