在 Web 上对齐吉他和弦

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>

在 Web 上对齐吉他和弦

Align Guitar Chords on Web

html

javascript

css

seo