Responsive chords above lyrics

Question

I would like to use HTML and CSS (and if really necessary, some JS) to find a responsive way to put chords above lyrics. I already checked this post: Styling text to make it appear above the line (for chords above the lyrics) Here is what I have so far:

        body {
          padding:20px;
          font-size: 30px;
        }
        .chord{
            position    : absolute;
            top         : -50px;
            width       : 0;
            font-style  : italic;
            font-weight : bold;
            font-size: 50px;
        }

        .chord-lyrics{
            position: relative;
            display: inline-block;
            margin-top: 50px;
        }


    C Imagine there's 
    Cmaj7no
    Fheaven

The goals:

always keep the chord above the right lyrics
if screen is smaller than the line, each word must overflow on the next line
if the chords are larger than the text below it should create space between the lyrics EDIT:
a chord can also be in the middle of a word

For now, everything works fine for 1. and 2. but not for 3. and this last one is also really important!

Thanks

user_5818622 · Answer

Another possibility is to use Flexbox:

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

.container {
  max-width: 450px;
}

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

.chord-letter {
  display: flex;
  flex-direction: column;
  padding: 0 5px;
  align-items: center; /* center chord */
}

.chord {
  font-style: italic;
  font-weight: bold;
  font-size: 25px;
}


  
    C Imagine there's
    Cmaj7no
    Fheaven

This code is fully responsive. Each chord-text-combo will be moved to the next line if there's not enough space.

Here is a Fiddle for you to play with.

user_9034824 · Answer

Using position: absolute removes the elements from the flow of the page and prevents them from having an effect on the other elements.

If you change this to position: relative you can get something close to what you're looking for.

Just as a footnote, using px measurements isn't responsive. You should look to use ems, rems or even vw/vh!

        body {
          padding:20px;
          font-size: 30px;
        }
        .chord{
            position    : relative;
            top         : -50px;
            left        : 50px;
            width       : 0;
            font-style  : italic;
            font-weight : bold;
            font-size: 50px;
        }

        .chord-lyrics{
            position: relative;
            display: inline-block;
            margin-top: 50px;
        }


    C Imagine there's 
    Cmaj7no
    Fheaven

user_3976712 · Answer

I'd rather do smthg like that :

div.part {
    float  : left;
    margin : .3em;
    
}
div.chord {
    font-weight : bolder;
    font-style  : italic;
}
div.lyric {
    text-align  : center;
}

  
      C
      Imagine
  
  
       
      there's
  
  
      Cmaj7
      no
  
  
      F
      heaven

user_11151040 · Answer

Alternatively, "flexbox" can be used.

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

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

.chord {
  font-style: italic;
  font-weight: bold;
  font-size: 50px;
}

.chord-lyrics {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: end;
}

.space {
  margin-right: .3em;
  margin-top: .3em;
  margin-bottom: .3em;
}


  C Imagine
  there's
  Cmaj7no
  Fheaven
  C Imagine
  there's
  Cmaj7no
  Fheaven
  C Imagine
  there's
  Cmaj7no
  Fheaven
  Fheaven

For your second question:

In overflows, the word and the chord behave as a whole, and the chord and word are always centered.

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

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

.chord {
  font-style: italic;
  font-weight: bold;
  font-size: 50px;
}

.chord-lyrics {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.space {
  margin-right: .3em;
  margin-top: .3em;
  margin-bottom: .3em;
}


  C Imagine
  there's
  Cmaj7no
  Fheaven
  C Imagine
  there's
  Cmaj7no
  Fheaven
  C Imagine
  there's
  Cmaj7no
  Fheaven
  Fheaven

user_8144073 · Answer

Thanks to everyone, here is what I was able to do:

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;
}


   
      Ima
      Cgine
   
   there's
   Cmaj7no
   Fheaven
   
      Ima
      Cgine

It is:

Fully responsive
Allow chords inside a word
Avoid breaking the words on wrapping

Responsive chords above lyrics

5 Answers