我试图找出一个好方法,在网页上显示吉他和弦的可变宽度字体,最好只用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如果这个答案有用的话,你一定要去看看!

最佳答案

为什么不简单地依赖伪元素和数据属性:

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>

关于javascript - 在网络上对齐吉他和弦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50092108/

10-14 14:46
查看更多