Выровняйте гитарные аккорды в сети

Question

Я пытаюсь найти хороший способ отображения гитарных аккордов в Интернете шрифтом переменной ширины, желательно, если возможно, используя только HTML и CSS. Я пытаюсь сделать это, выстроив аккорд над определенной буквой.

Я придумал следующее решение ( 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;
}

С точки зрения дисплея это работает отлично. Тем не менее, поисковые системы читают это так, что означает, что я проигрываю в результатах поиска текстов:

As CI was going over theAmfar fam'd Kerry Mountains

Попытка копирования + вставки также приводит к искаженному выводу. Я бы предпочел скопированный текст выглядеть так:

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

Есть ли способ, которым я могу сделать это?

Редактировать: Для потомков, вот расширение на оригинальный вопрос , который вы обязательно должны проверить, если этот ответ полезен!

Answer 1

Почему бы просто не полагаться на псевдоэлемент и атрибут данных:

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>