Search code examples
javascripthtmlcssseo

Align Guitar Chords on Web

I am trying to figure out a good way to display guitar chords on the web in a variable-width font, preferably using just HTML and CSS if possible. I'm trying to do this by lining up the chord above a specific letter.

I've come up with the following solution ( https://jsfiddle.net/u33v87ob/ ):

HTML:

<div class="chunk">
  <span class="chord"></span>
  <br>
  <span class="lyric">As&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">C</span>
  <br>
  <span class="lyric">I was going over the&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">Am</span>
  <br>
  <span class="lyric">far fam'd Kerry Mountains,</span>
</div>

CSS:

.chunk {
  float: left;
}

From a display perspective this works perfectly. However, search engines read it like this, which means that I lose out on search results for the lyrics:

As CI was going over theAmfar fam'd Kerry Mountains

Trying to copy+paste results in garbled output as well. I would rather copied text look like:

CAm
As I was going over the far fam'd Kerry Mountains,

Is there some way I can accomplish this?

Edit: For posterity, here is an extension on the original question which you should definitely check out if this answer is helpful!

Solution

  • Why not simply relying on pseudo element and data attribute:

    p {
 margin-top:50px;
}
span.chunk {
 position:relative;
}
span.chunk:before {
  content:attr(data-chord);
  position:absolute;
  top:-15px;
}
    <p>
As
<span class="chunk" data-chord="C">I was going over the</span> 
<span class="chunk" data-chord="Am">far fam'd Kerry Mountains,</span></p>