Ad

Align Guitar Chords On Web

- 1 answer

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:

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!

Ad

Answer

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>

Ad
source: stackoverflow.com
Ad