tenshi May 21 2010 at 04:04

Аккорды с применением высоких технологий

14 min

1.3K

Задача заверстать аппликатуру весьма не тривиальна и от того довольно интересна. Я тоже не устоял перед искушением решить её так как считаю правильным.

Помимо стандартных требований типа кроссбраузерности, масштабираемости, печатаемости и компактности, хотелось бы добиться также и возможности просто тупо скопировать аппликатуру и вставить её, например, в текстовый документ. То есть в текстовом виде аккорд должен иметь примерно следующий вид:

Am
O - - -
O F - -
O - R -
O - M -
O - - -
X - - -

O — открытая струна, X — приглушённая, остальные буквы обозначают пальцы.

Чтобы добиться возможности копирования и обеспечить низкую связность между блоками, вёрстка получается несколько громоздкой: внутрь грифа помещаются струны, внутрь каждой — лады, а в ладах — блоки обозначающие либо прижатые пальцы, либо неприжатые. У всех блоков есть дополнительные параметры, задаваемые в виде hiqus-строки в аттрибуте class — это обеспечивает возможность привязывать к ним визуализацию, а также удобно модифицировать посредством яваскрипта используя соответствующую библиотеку.

Первым делом создадим банк аккордов.

<!DOCTYPE html> <?xml-stylesheet type="text/xsl" href="styles.xsl?rev:123"?> <html xmlns:ch="urn:markup:chords"> <head> <title>Все аккорды</title> <link href="styles.css" type="text/css" rel="stylesheet" /> </head> <body> <ch:fingerboard id="Am"> <ch:title>Am</ch:title> <ch:string class=" number=1 "> <ch:head> O </ch:head> <ch:flet class=" number=1 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=2 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> <ch:string class=" number=2 "> <ch:head> O </ch:head> <ch:flet class=" number=1 "> <ch:finger class=" name=fore "> F </ch:finger> </ch:flet> <ch:flet class=" number=2 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> <ch:string class=" number=3 "> <ch:head> O </ch:head> <ch:flet class=" number=1 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=2 "> <ch:finger class=" name=ring "> R </ch:finger> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> <ch:string class=" number=4 "> <ch:head> O </ch:head> <ch:flet class=" number=1 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=2 "> <ch:finger class=" name=middle "> M </ch:finger> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> <ch:string class=" number=5 "> <ch:head> O </ch:head> <ch:flet class=" number=1 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=2 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> <ch:string class=" number=6 mute=true "> <ch:head> X </ch:head> <ch:flet class=" number=1 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=2 "> <ch:clear> - </ch:clear> </ch:flet> <ch:flet class=" number=3 "> <ch:clear> - </ch:clear> </ch:flet> </ch:string> </ch:fingerboard> </body> </html>

Тут всего один аккорд — остальные добавляются рядом. br-ки нужны для ие, иначе он выстраивает всё в одну строку. К сожалению Опера при копировании выстраивает всё в один столбец из-за использования инлайн блоков =(

Стили задаются для блоков и потом уточняются модификаторами:

ch\:string { border-bottom: 1pt solid black; display: block; margin: 0 0 1.3em 0; white-space: nowrap; padding-right: 2em; } ch\:string.number\=1 { border-width: 1.0pt } ch\:string.number\=2 { border-width: 1.2pt } ch\:string.number\=3 { border-width: 1.4pt } ch\:string.number\=4 { border-width: 1.6pt } ch\:string.number\=5 { border-width: 1.8pt } ch\:string.number\=6 { border-width: 2.0pt } ch\:string.mute\=true { border-color: lightgray; }

Специальные модификаторы в корневом блоке позволяют подсвечивать струны и пальцы. Например:

ch\:fingerboard.highlight\=finger\=\=thumb ch\:finger.name\=thumb, ch\:fingerboard.highlight\=finger\=\=fore ch\:finger.name\=fore, ch\:fingerboard.highlight\=finger\=\=middle ch\:finger.name\=middle, ch\:fingerboard.highlight\=finger\=\=ring ch\:finger.name\=ring, ch\:fingerboard.highlight\=finger\=\=little ch\:finger.name\=little { background-color: red; border-color: red; }

Теперь подключим к нашей странице аккорды из банка:

<!DOCTYPE html> <?xml-stylesheet type="text/xsl" href="styles.xsl?rev:123"?> <html xmlns:ch="urn:markup:chords"> <head> <title>Некоторые аккорды</title> <link href="styles.css" type="text/css" rel="stylesheet" /> </head> <body> <ch:fingerboard src="chords.xml#Am" srctype="text/xml"> <a href="chords.xml#Am">Аккорд Am</a> </ch:fingerboard> <ch:fingerboard src="chords.xml#Am" srctype="text/xml" class=" highlight=string==1 highlight=string==2 "> <a href="chords.xml#Am">Аккорд Am</a> </ch:fingerboard> <ch:fingerboard src="chords.xml#Dm" srctype="text/xml"> <a href="chords.xml#Dm">Аккорд Dm</a> </ch:fingerboard> <ch:fingerboard src="chords.xml#Dm" srctype="text/xml" class=" highlight=finger==fore highlight=finger==middle "> <a href="chords.xml#Dm">Аккорд Dm</a> </ch:fingerboard> </body> </html>

Благодаря технологии xhtml-инклудов мы не грузим вёрстку для аккордов с каждой страницей, а единожды загружаем банк аккордов. Новая её реализация выехала в отдельный файл и поддерживает теперь также и загрузку фрагмента документа с указанным идентификатором:

<t:template match=" *[ @src and contains( @srctype, 'xml' ) ] " mode="content"> <t:variable name="doc" select=" substring-before( @src, '#' ) " /> <t:variable name="id" select=" substring-after( @src, '#' ) " /> <t:choose> <t:when test=" $id "> <t:apply-templates select=" document( $doc ) // *[ @id = $id ][1] / node() " /> </t:when> <t:otherwise> <t:apply-templates select=" document( @src ) / * / node() " /> </t:otherwise> </t:choose> </t:template>

Там же можно лицезреть хак для мозиллы, благодаря которому стили на элементы накладываются одинаково во всех браузерах:

<t:template match=" body " mode="content"> <t:apply-templates select=" * " /> <script><![CDATA[ new function( ){ if( !document.getElementsByTagNameNS ) return; var nsList= [ "urn:markup:chords" ]; for( var nsI= nsList.length; nsI--; ){ var els= document.getElementsByTagNameNS( nsList[ nsI ], '*' ); while( xel= els[0] ){ var el= document.createElement( xel.nodeName ); var node; while( node= xel.firstChild ) el.appendChild( node ); var sa= xel.attributes; for( var i= 0; i<sa.length; ++i ){ var node= sa.item(i); el.setAttribute( node.nodeName, node.nodeValue ); }; xel.parentNode.replaceChild( el, xel ); }; }; }; ]]></script> </t:template>

Разумеется по прежнему можно отдавать страницу как text/html и вместо аппликатур пользователи увидят ссылки на соответствующие аккорды в банке.

Tags:

Hubs: