在网络上对齐吉他和弦 [英] Align Guitar Chords on Web

问题描述

我正在尝试找出一种以可变宽度字体在网络上显示吉他和弦的好方法，如果可能的话，最好只使用HTML和CSS。我试图通过将和弦排在特定字母上方来做到这一点。

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.

我想出了以下解决方案（
https://jsfiddle.net/u33v87ob/ ）：

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?

修改：对于后代，这是原始问题的扩展，您应该肯定看看这个答案是否有用！

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

推荐答案

为什么不依靠伪元素和数据属性：

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>

这篇关于在网络上对齐吉他和弦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！