Увлекло меня это дело — описание гитарных аккордов, по научному — аппликатура. Начало было положено в предыдущим топике про запись аккордов и теперь получило своё развитие.
Я учел пожелания и сделал новую версию.
Теперь метка прижимаемой струны — это точка • (& bull;) вместо © (& copy;).
В прошлой версии не было поддержки отображения баррэ — теперь есть и большое, и малое баррэ.
Добавлена поддержка Google Chrome.
В данной версии номера пальцев прижимающих струну по-прежнему отображаются рядом с меткой. Вариант с использованием шрифта позволяющего отображать метки с цифрой внутри возможно будет, но сейчас могу предложить только такой вариант.
Баррэ
Получилось сделать баррэ. Теперь можно описывать аккорды как с большим, так и малым баррэ.
Как это выглядит в Html
Привожу часть кода, аккорд с малым баррэ.
<div id="Dm" class="accord float-l">
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>0</span></li>
<li><span>X</span></li>
<li><span>X</span></li>
</ul>
<div class="grif">
<div class="porojek verx"></div>
<ul>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span>•</span><small>3</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">Dm</div>
</div><!-- /accord Dm -->
<div id="Am" class="accord float-l" >
<ul>
<li><span>0</span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>0</span></li>
<li><span>X</span></li>
</ul>
<div class="grif">
<div class="porojek verx"></div>
<ul>
<li><span> </span></li>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>3</small></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">Am</div>
</div><!-- /accord Am -->
<div id="F" class="accord float-l" >
<p>Большое баррэ</p>
<div class="nomer-lada"><ol type="I" start="1"><li> </li></ol></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="grif">
<div class="porojek verx"></div>
<div class="barre"></div>
<ul>
<li><span>•</span><small>1</small></li>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>1</small></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>4</small></li>
<li><span>•</span><small>3</small></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">F</div>
</div><!-- /accord F -->
<div id="Db" class="accord float-l w4" >
<p>Малое баррэ</p>
<div class="nomer-lada"><ol type="I" start="1"><li> </li></ol></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>X</span></li>
</ul>
<div class="grif">
<div class="porojek verx"></div>
<div class="barre na3"></div>
<ul>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>3</small></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>4</small></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">I-C# или Db</div>
</div><!-- /accord Db -->
<div id="H" class="accord float-l" >
<div class="nomer-lada"><ol type="I" start="2"><li> </li></ol></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>X</span></li>
</ul>
<div class="grif">
<div class="porojek"></div>
<div class="barre"></div>
<ul>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>1</small></li>
<li><span>•</span><small>1</small></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span>•</span><small>4</small></li>
<li><span>•</span><small>3</small></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">H</div>
</div><!-- /accord H -->
<div id="Hm" class="accord float-l" >
<div class="nomer-lada"><ol type="I" start="2"><li> </li></ol></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>X</span></li>
</ul>
<div class="grif">
<div class="porojek"></div>
<div class="barre na5"></div>
<ul>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>1</small></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span>•</span><small>2</small></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<ul>
<li><span> </span></li>
<li><span> </span></li>
<li><span>•</span><small>4</small></li>
<li><span>•</span><small>3</small></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
<div class="porojek"></div>
<div class="clearfix"></div>
</div>
<div class="accord-name">Hm</div>
</div><!-- /accord Hm -->
<div class="clearfix"></div>
<dl>
<dt>Обозначения</dt>
<dd class="bull"><b>•</b><sup>1</sup><span>
— место прижатия струны и номер пальца</span></dd>
<dd><small>0</small><span> — звучит неприжатая струна</span></dd>
<dd><small>X</small><span> — струна не звучит</span></dd>
<dd><span><strong>I.</strong></span>
— номер лада на котором зажимается баррэ</span></dd>
<dd><span><strong>[</strong></span>
— обозначение баррэ (зажимается 1 пальцем)</span></dd>
</dl>
<p class="float-r mar1-b"><a href="http://r3code.habrahabr.ru/blog/53792/">r3code.habrahabr.ru</a></p>
</div><!-- /content -->
CSS оформление
Для поддержки Google Chrome внесены изменения. Для IE7 тоже внесены изменения (см. после основного CSS).
Кусочек добавленного кода, показано только то что добавлено:
div.accord .grif ul li span,
div.accord .grif ul li small {
/* код пропущен */
height: 10px; /* для FF, Opera, Chrome */
}
/* File: style.css */
/* Accord class */
div.accord {
width: 162px;
margin: 1em;
}
div.accord.w4 {
width: 212px;
}
div.accord .accord-name { /* Название аккорда */
text-align: center;
font-size: 1.4em;
font-weight: bold;
}
div.accord p {
text-align: center;
font-size: 1.2em;
}
div.accord .nomer-lada ol { /* Номер лада для баррэ */
width: 40px;
list-style-type: upper-roman;
margin: 0 0 0 22px;
padding: 0;
list-style-position: inside;
}
div.accord .nomer-lada ol li {
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
div.accord div.grif { /* Оформляем гриф */
height: 7.4em;
overflow: hidden;
}
div.accord div.grif .porojek { /* Оформляем порожек между ладами */
height: 6.4em;
float: left;
margin: .4em 0 0 0;
border-left: 2px solid black;
}
div.accord div.grif .porojek.verx { /* Оформляем первый порожек, он больше в ширину */
border-left: 4px solid black;
}
div.accord .grif ul { /* одно поле под аккорд */
width: 46px;
float: left;
margin-top: -2px; /* поле подтягиваем вверх */
}
div.accord .grif ul li {
text-indent: 14px; /* посередине поля расположим метку прижимаемой струны */
border-bottom: 1px dotted gray; /* рисуем струну */
line-height: 10px !important;
color: #000;
}
div.accord .grif ul li span,
div.accord .grif ul li small {
display: block;
line-height: 10px !important;
font-size: 3.5em;
position: relative;
bottom: -5px; /* расположим метку посередине струны */
height: 10px; /* для FF, Opera, Chrome */
}
div.accord .grif ul li small {
font-size: 1em;
float: right; /* сдвинем по правой границе */
top: -10px; /* подъем до уровня отметки пальца */
left: -12px; /* расположим метку посередине струны */
}
div.accord .barre {/* баррэ */
border-left: 2px solid #888;
border-top: 2px solid #888;
border-bottom: 2px solid #888;
float: left;
position: relative;
left: 15px;
width: 3px;
margin-left: -5px;
height: 90%;
z-index: 1;
}
div.accord .barre.na2 {
height: 30%;
}
div.accord .barre.na3 {
height: 45%;
}
div.accord .barre.na4 {
height: 60%;
}
div.accord .barre.na5 {
height: 75%;
}
div.accord ul { /* отметки перед аккордом о звучании струн */
width: 12px; /* ширина полоски с метками */
float: left; /* перед грифом */
line-height: 11px; /* такая же как для струн */
}
div.accord ul li {
border-bottom: 1px solid transparent; /* тут струны не рисуем */
}
Пришлось для IE7 сделать изменение и выделить их в отдельный стиль ie7.css, подключаемый с помощью условных коментариев.
/* File: ie7.css */
div.accord .grif ul li span,
div.accord .grif ul li small {
height: auto;
}
Остальной код можно посмотреть на странице с примером.
Вариация с цифрами внутри меток
Еще один пример — цифра обозначающая номер пальца находиться внутри метки. Сделал по комментарию tenshi.
Для него изменена одна из частей CSS:
<blockquote>
div.accord .grif ul li small {/* номер пальца */
font-size: 1em;
float: right; /* сдвинем по правой границе */
top: -.55em; /* подъем до уровня отметки пальца */
left: -23px; /* расположим метку посередине струны */
color: #fff;
}
При желании номера цифр можно сделать жирными, добавив в
<blockquote>
div.accord .grif ul li small {
...
font-weight: bold;
}
Но тут кроется один камень — при печати цифры внутри меток в разных браузерах отображаются по разному. FF — видимо делает весь текст черным, в IE происходит непонятное преобразование и цифры видны каким-то серым цветом, Opera — отображает как раз белым и их видно нормально.
Как решить эту проблему пока не знаю.
Протестировано в IE7, FF3, Opera 9, Chrome
Думаю теперь сделать простенький веб-сервис для публикации аккордов, как maxmyd посоветовал.
UPD от 23.03.2009: Сделана поддржка Google Chrome
