我试图找出一个好方法,在网页上显示吉他和弦的可变宽度字体,最好只用html和css,如果可能的话。我试着把和弦排列在一个特定的字母上。
我想出了以下解决办法(
https://jsfiddle.net/u33v87ob/)
HTML:
<div class="chunk">
<span class="chord"></span>
<br>
<span class="lyric">As </span>
</div>
<div class="chunk">
<span class="chord">C</span>
<br>
<span class="lyric">I was going over the </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/