As an amateur guitarist, I use chord websites, and sometimes I think about how to implement it with HTML and CSS. I mean, the tricky part of keeping the chords in the right position relative to the letter it points on.
One day came across a cool HTML element, <ruby/> that can solve this problem.
The
<ruby>HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.
A codepen to play with
By the way, by inspecting chords website you can see that they are using different methods.
Top comments (1)
this helps me a lot thanks