带有HTML和CSS的吉他制表法

Question

我正在尝试使用html / css创建吉他制表法。

我有这个基本的布局，你可以在这里看到

样式

* {
    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>

码笔

我希望能够在像这样的字符串上放置音符（数字）

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

也像和弦

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

实现这一目标的最简单方法是什么？

Answer 1

我会用更少的代码依靠转换来调整位置来完成此操作。只需注意不同的值即可实现完美对齐：

.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>

您可以使用单位使其更具响应性em：

.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>

如果您需要更好地支持旧浏览器，您可以删除calc()CSS 变量：

.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>