English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Technique: Chords Formatting

There are many ways to display chords in song lyrics on the web. Often the PRE text is used, formatting the lyrics in non-proportional font, which keeps the chords on their positions above the text.

   Yesterday

   F        Emi      A7                Dmi    Dmi/C 
   Yesterday all my troubles seemed so far away 
   Bb     C                       F 
   now it looks as though they're here to stay 
   C/E Dmi  G7       Bb    F 
   oh  I believe in yesterday.

However, sometimes we may need a better-looking solution to display lyrics with chords using a proportional font. Let me show one possible way to do that.

Each part of text which a chord belongs to is tagged as span. Chords are placed inside the text, beeing tagged as strong. Their brackets are tagged as span to be hidden later.

   <div class="chordline">
      <span><strong><span>[</span>F<span>]</span></strong>Yesterday</span>
      <span><strong><span>[</span>Emi<span>]</span></strong>all my</span>
      <span><strong><span>[</span>A7<span>]</span></strong>troubles seemed so</span>
      <span><strong><span>[</span>Dmi<span>]</span></strong>far away</span>
      <span><strong><span>[</span>Dmi/C<span>]</span></strong>&nbsp;</span>
   </div>
   ...

This is how the lyrics looks without formatting:

Yesterday

[F]Yesterday [Emi]all my [A7]troubles seemed so [Dmi]far away [Dmi/C] 
[Bb]now it [C]looks as though they're [F]here to stay
[C/E]oh [Dmi]I beli[G7]eve in [Bb]yester[F]day.

Part of the text with the chord, marked as span, has position:relative (which makes its ancestors be positioned). Then, the part making chord sign is absolutely positioned (it's removed from the text, and no empty space is left). It is positioned to coordinates 1em above the left upper corner of the part of "chorded" text. See the CSS making the job:

    .chordline {
       line-height:2.5
       }
    .chordline span {
       position:relative;
       }
    .chordline span strong {
       position:absolute;
       top:-1em; left:0;
       font:bold 75%/1 sans-serif;
       color:green;
       }
    .chordline span strong span {
       display:none;
       }

The "chorded" part of text must contain — except the chord sign — at least one non-empty character, or it remains empty after the chord is removed and the positioning then works only in MSIE (God only knows why). If there is anything but a whitespace, it works everywhere.

And this is how the same code looks with CSS:

Yesterday

[F]Yesterday [Emi]all my [A7]troubles seemed so [Dmi]far away [Dmi/C] 
[Bb]now it [C]looks as though they're [F]here to stay
[C/E]oh [Dmi]I beli[G7]eve in [Bb]yester[F]day.

Using CSS, text can be broken into lines, it's selectable, its font size can be increased and decreased, while chords are still displayed at their position above the text.

I tested it in MSIE/Win, Gecko-browsers (Mozilla, Firefox, Camino), Opera, and Safari. The text, of course, can be formated in much more ways, the principles stay the same. See the source code for more details.