DEV Community

Cover image for Chords in HTML
Oryam
Oryam

Posted on • Updated on

Chords in HTML

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.

image

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)

Collapse
 
munghkawng profile image
munghkawng

this helps me a lot thanks