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,

我有什么方法可以做到这一点吗？

编辑：对于子孙后代here is an extension on the original question，如果这个答案有用，你一定要查看这些内容！

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>

在网络上对齐吉他和弦

1 个答案: