2

I'm trying to render chords over lyrics using HTML and found a near perfect solution here on StackOverflow. My one problem with this solution is that it creates extra whitespace after lyrics if the chord name is longer than the associated word. This can be seen on the Csus4 of the first "Imagine" in the example at the end of this question.

To sum it up, I want to render chords over lyrics using HTML such that:

  1. chords are always above the right lyrics
  2. if screen is smaller than the line, lines overflow on word boundaries
  3. if the chords are larger than the text below it doesn't create space between the lyrics
  4. a chord can also be in the middle of a word

Edit:

  1. chords never overlap

I have searched StackOverflow and googled a lot but every solution I found fails one of these criteria. All help is greatly appreciated!

Edit: Solutions may also involve javascript though I hope this can be solved without needing javascript.

body {
  padding: 20px;
  font-size: 30px;
}

.line {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.chord-letter {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.no-space {
  margin-right: 0;
  border: solid 1px red;
}

.space {
  margin-right: 0.33em;
  border: solid 1px green;
}

.chord {
  color: gray;
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
  border: solid 1px blue;
}

.no-space .chord {
  margin-right: 0.33em;
}

.word {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
<div class="line">
  <div class="word">
    <span class="no-space">Ima</span>
    <div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
  </div>
  <span class="space">there's</span>
  <div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
  <div class="chord-letter space"><span class="chord">F</span>heaven</div>
  <div class="word">
    <span class="no-space">Ima</span>
    <div class="chord-letter space"><span class="chord">C</span>gine</div>
  </div>
</div>
Thyrum
  • 21
  • 4
  • If JavaScript was available, you could use mono font and position the chords using simple math. – IT goldman Jun 26 '22 at 12:47
  • @ITgoldman This is what I would use for an [ASCII](https://en.wikipedia.org/wiki/ASCII) representation of the music (which I was actually also planning on implementing) but it doesn't look as professional, doesn't support all fonts and in general takes up more horizontal (and thus, by lines overflowing, vertical) space. Also, javascript is available for my application (though I think the problem stated should also be solvable without javascript). – Thyrum Jun 27 '22 at 08:57

1 Answers1

0

Basically you just need to set the chords to be position: absolute so they won't be part of the flow. You'd still need to figure out what to do when they overlap.

body {
  padding: 20px;
  font-size: 30px;
}

.line {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.chord-letter {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.no-space {
  margin-right: 0;
  border: solid 1px red;
}

.space {
  margin-right: 0.33em;
  border: solid 1px green;
}

.chord {
  color: gray;
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
  border: solid 1px blue;
}

.no-space .chord {
  margin-right: 0.33em;
}

.word {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}


/* add these */

.word {
  padding-top: 50px;
}

.chord {
  position: absolute;
  top: 0;
}

.line {
  position: relative;
}
<div class="line">
  <div class="word">
    <span class="no-space">Ima</span>
    <div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
  </div>
  <span class="space">there's</span>
  <div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
  <div class="chord-letter space"><span class="chord">F</span>heaven</div>
  <div class="word">
    <span class="no-space">Ima</span>
    <div class="chord-letter space"><span class="chord">C</span>gine</div>
  </div>
</div>
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • As you mentioned, the chords must not not overlap. This is a must because otherwise th e music becomes unintelligible. I have no clue how I would do that though. – Thyrum Jun 27 '22 at 13:11