<music/> — Rationalizing chord/ lyric pairings

When chord symbols lose alignment with the lyrics, they lose their meaning. With WP, the pairings regularly fall out of alignment for countless reasons:

Figure 27. Lyric-chord charts with misaligned text (it gets much worse, especially with proportional fonts)

Shows the F#m chord above the word "Me" preventing the next chord "G" from aligning with the word "eat"

Markup was used to make the chord <c/> and lyric <l/> relationships more explicit.

Figure 28. <lyric/> lines, with lyric fragments <l/>, and chord <c/>symbols next to each other so they don't get lost

    <l>In </l>
    <l>remembrance of </l>
    <l>Me </l>
    <l>eat this </l>

XPath was used to manage horizontal and vertical offsets.

Figure 29. CSS rendering with fully-automated offsets

Shows the G chord correctly aligned with the word "eat"

All the CSS gymnastics cause cursor-positioning problems. Adding an edit mode solved the problem:

Figure 30. music[@view="edit"] markup

<music view="edit">
    <l>In </l><c>D</c><l>remembrance of </l><c>F#m</c><l>Me&nbsp;&nbsp;</l>
    <c>G</c><l>eat this </l><c>A</c><l>bread</l>

Figure 31. music[@view="edit"] rendering

Shows the chords and words on one line to simplify editing