Guitar tabulature with HTML & CSS

Question

I am trying to create guitar tabulature with html/css.

I have this basic layout you can see here

Style

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:sans-serif;
}

.wrapper {
    height:100px;
    width:600px;
    margin: 70px auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}


.string {
    height:1px;
    width:100%;
    background:black;
}

Html

<div class="wrapper">
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
</div>
<div class="wrapper">
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
    <div class="string"></div>
</div>

codepen

I would like to be able to place notes (numbers) on the strings like

------0-
-----0--
----0---
---2----
--2-----
-0------

also chords like

-0------
-0------
-0------
-2------
-2------
-0------

What would be the easiest way to achieve this?

Answer 1

I would do this with less of code relying on transformation to adjust the position. Simply pay attention to the different value to have a perfect alignment:

.wrapper {
  margin-top:30px;
  height: 96px; /* (16px)*6 */
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(100%/6 - 1px),#000 calc(100%/6 - 1px) calc(100%/6))
    0 -8px; /* (16px)/2 */
  position:relative;
}

.note {
  position:absolute;
  font-family:sans-serif;
  top:0;
  left:0;
  padding:0 4px;  /*4px will control distance between notes*/
  line-height:16px; /* Line-height not height!*/
  width:10px;
  background: #fff;
  transform:translate(calc(var(--x,0)*100%),calc(var(--y,0)*100%));
}

<div class="wrapper">
  <span class="note">5</span>
  <span class="note" style="--x:0;--y:2">3</span>
  <span class="note" style="--x:1;--y:5">8</span>
  <span class="note" style="--x:2;--y:4">9</span>
  <span class="note" style="--x:3;--y:3">1</span>
  <span class="note" style="--x:4;--y:2">9</span>
  <span class="note" style="--x:5;--y:1">7</span>
  <span class="note" style="--x:7;--y:5">7</span>
  <span class="note" style="--x:2;--y:0">2</span>
</div>

You can make it more responsive using em unit:

.wrapper {
  margin-top:30px;
  height: 6em; 
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(100%/6 - 1px),#000 calc(100%/6 - 1px) calc(100%/6))
    0 -0.5em; 
  position:relative;
}

.note {
  position:absolute;
  font-family:sans-serif;
  top:0;
  left:0;
  padding:0 0.2em;
  line-height:1em;
  width:0.5em;
  background: #fff;
  transform:translate(calc(var(--x,0)*100%),calc(var(--y,0)*100%));
}

<div class="wrapper">
  <span class="note">5</span>
  <span class="note" style="--x:0;--y:2">3</span>
  <span class="note" style="--x:1;--y:5">8</span>
  <span class="note" style="--x:2;--y:4">9</span>
  <span class="note" style="--x:3;--y:3">1</span>
  <span class="note" style="--x:4;--y:2">9</span>
  <span class="note" style="--x:5;--y:1">7</span>
  <span class="note" style="--x:7;--y:5">7</span>
  <span class="note" style="--x:2;--y:0">2</span>
</div>

<div class="wrapper" style="font-size:30px">
  <span class="note">5</span>
  <span class="note" style="--x:0;--y:2">3</span>
  <span class="note" style="--x:1;--y:5">8</span>
  <span class="note" style="--x:2;--y:4">9</span>
  <span class="note" style="--x:3;--y:3">1</span>
  <span class="note" style="--x:4;--y:2">9</span>
  <span class="note" style="--x:5;--y:1">7</span>
  <span class="note" style="--x:7;--y:5">7</span>
  <span class="note" style="--x:2;--y:0">2</span>
</div>

In case you need better support for old browser you can get rid of calc() and CSS variables:

.wrapper {
  margin-top:30px;
  height: 6em; 
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 0.95em,#000 0.95em 1em)
    0 -0.5em; 
  position:relative;
}

.note {
  position:absolute;
  font-family:sans-serif;
  top:0;
  left:0;
  padding:0 0.2em;
  line-height:1em;
  width:0.5em;
  background: #fff;
}

<div class="wrapper">
  <span class="note">5</span>
  <span class="note" style="transform:translate(0,200%)">3</span>
  <span class="note" style="transform:translate(100%,500%)">8</span>
  <span class="note" style="transform:translate(200%,400%)">9</span>
  <span class="note" style="transform:translate(300%,300%)">1</span>
  <span class="note" style="transform:translate(400%,200%)">9</span>
  <span class="note" style="transform:translate(500%,100%)">7</span>
  <span class="note" style="transform:translate(700%,500%)">7</span>
  <span class="note" style="transform:translate(200%,0)">2</span>
</div>