Semantic song markup with visual "chord stacking"

Question

I am looking for a HTML-based representation for song texts with chords above the syllables, in the following fashion:

      Am   C        D     F
There is a house in New Orleans

Now, I don't care how exactly the HTML looks like in the end, but there is an important constraint: the purpose is not only display, but also storage in a semantically meaningful representation. Specifically, the songs are converted from a LaTeX-based syntax and should be recoverable in their original form, as well as being readable in HTML and easily processable. So no fancy structure just for the purpose of presentation, and no JavaScript (yes, I have looked at how UltimateGuitar does it, that is exactly not what I want). I need every element to have a direct correspondence to some logical part, as in the original format.

On the other hand, this gives me a hard time designing a CSS that presents the stacked chords. The basic rule is that you have "boxes" consisting of a text part and a chord part, and the width of the whole box should be the maximum of either parts, which each can consist of arbitrarily long text:

Am         Cmaj7/G  Am G        F Am/G      E7  F#sus4 A
longstuff  short    multichord  more   end.     e  -   ternal

The boxing structure is known in advance, so you can assume it as given:

((Am) (longstuff)) 
((Cmaj7/G) (short)) 
((Am G) (multichord))
((F Am/G) (more))
end.
((E7) ())
((F#sus4 A) (e))ternal

Note that in the last box, the word is hyphenated to compensate for the two chords on the first syllable. I fear this makes it very hard for CSS, so it might be represented in a slightly different way, e.g.

((F#sus4 A) (e) (ternal))

You can come up with alternatives, as long as they still have concise semantic meaning. Here is what I have come up with so far:

.verse {
    line-height: 3rem;
    font-family: serif;
}

.cbox {
    border: 1px solid;
}

.chord {
    position: absolute;
    transform: translate(0, -1.1rem);
    font-weight: bold;
    font-family: monospace;
    user-select: none;
    font-size: large;
}


    Test
    AbcX
    AbcXyzwv
    AbcXyzwabc
    sd
    

    Test
    Abc DeXyzwv
    sd
    

    Abxyz
    Abc#sus4/CZyzw xyz
    Amxyzw
    

    Dxyz
    E7
    two
    E7three

The sizes and borders are chosen for debugging. As you can see, the width of the top (chord) part is not taken into account (because position: absolute prevents that).

I have tried some other variants, including this one: longstuff, where data-w is the number of letters in the chord name to be used in the min-width of the span, and data-c being put into a before pseudo-element, but I still didn't succeed at getting the width right.

For the hyphenation issue, I have no idea at all.

And I will likely be using XHTML, although I guess this won't make much of a difference.

user_5351721 · Answer

I'd suggest using CSS grid to help keep things from overlapping.

You can specify a grid template of 1 column and 2 rows, and then use classes to tell the content which row it should fit into. The grid will fill nicely and create implicit new columns as needed. It even will work if you have a series of chords or text in a row, without needing to wrap chord/text pairs in a wrapping element.

For the hyphenation, if possible, I'd add an additional class to syllables that need hyphenation, and then create the hyphens using a pseudo element in CSS.

Here's a working example. Hope this is helpful. This was a fun challenge.

.line {
  display: grid;
  justify-content: start;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 0 0.6em;
  margin-bottom: 1em;
}
.chord {
  grid-row-start: 1;
}
.text {
  grid-row-start: 2;
}
.hyphenated:after {
  content: ' - '
}


  Am
  longstuff
  Cmaj7/G
  short
  Am G
  multichord
  F Am/G
  more
  end.
  E7
  F#sus4 A
  e
  ternal





  
    C
    Frosty the
    C7
    snowman
  
  
    was a
    F
    jolly
    F#dim
    happy
    C
    soul
    C7
  
  
    with a
    F
    corncob
    F#dim
    pipe and a
    C
    button
    A7
    nose
  
  
    and two
    Dm7
    eyes made
    G7
    out of
    C
    coal.
    C7

Edit: A downside to the above approach is that the content is hard to understand if unstyled.

A more semantic approach could be to combine CSS Grid with content defined in custom data-* attributes and CSS variable fallbacks. This way the chords stay stored as attributes rather than marked-up text interspersed with the lyrics.

.verse {
  line-height: 2;
}
.lyric {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  line-height: 1;
}
.lyric[data-chord] {
  --chord: attr(data-chord);
}
.lyric:before {
  content: var(--chord, '\00a0');
}


  Frosty the
  snowman
  

  was a
  jolly
  happy
  soul
  
  

  with a
  corncob
  pipe and a
  button
  nose
  

  and two
  eyes made
  out of
  coal.

This creates a one-column, two-row, inline grid for each .lyric span. The value of --chord is set to the value of the data-chord property only on elements that have that property. It's then used in all .lyric elements to set the content of the :before pseudo-element, with a fallback to a non-breaking space if the variable is undefined. This is important because it pushes the text into the bottom row for .lyric spans that don't have a chord, and keeps the text horizontally aligned.

Semantic song markup with visual "chord stacking"

1 Answers