High-tech chords

The task to finish the fingering is not very trivial, and from that quite interesting. I, too, could not resist the temptation to solve it as I consider it right.

In addition to the standard requirements such as cross-browser compatibility, scalability, printability and compactness, I would also like to achieve the opportunity to just stupidly copy the fingering and paste it, for example, into a text document. That is, in the text form, the chord should look something like the following:

  Am
 O - - -
 OF - -
 O - R -
 O - M -
 O - - -
 X - - - 

')
O - open string, X - muffled, the remaining letters denote fingers.

In order to achieve the possibility of copying and to ensure low connectivity between the blocks, the layout is somewhat cumbersome: strings are placed inside the neck, frets are placed inside each, and blocks in the frets indicate either pressed fingers or unstressed ones. All blocks have additional parameters that are specified as a hiqus-string in the class attribute - this provides the ability to bind to them visualization, as well as conveniently modify using JavaScript in the appropriate library.

First, create a chord bank .

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

There is only one chord - the rest are added nearby. br-ki are needed for IE, otherwise it builds everything in one line. Unfortunately Opera when copying builds everything in a single column due to the use of inline blocks = (

Styles are set for blocks and then specified by modifiers:

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

Special modifiers in the root block allow you to highlight the strings and fingers. For example:

1. ch \: fingerboard.highlight \ = finger \ = \ = thumb ch \: finger.name \ = thumb,
2. ch \: fingerboard.highlight \ = finger \ = \ = fore ch \: finger.name \ = fore,
3. ch \: fingerboard.highlight \ = finger \ = \ = middle ch \: finger.name \ = middle,
4. ch \: fingerboard.highlight \ = finger \ = \ = ring ch \: finger.name \ = ring,
5. ch \: fingerboard.highlight \ = finger \ = \ = little ch \: finger.name \ = little {
6. background-color: red;
7. border-color: red;
8. }

Now connect to our page chords from the bank:

1. <! DOCTYPE html >
2. <? xml-stylesheet type = "text / xsl" href = "styles.xsl? rev: 123" ? >
3. < html xmlns: ch = "urn: markup: chords" >
4. < head >
5. < title > Some chords </ title >
6. < link href = "styles.css" type = "text / css" rel = "stylesheet" />
7. </ head >
8. < body >
9. < ch: fingerboard src = "chords.xml # Am" srctype = "text / xml" >
10. <a href = "chords.xml # Am"> Am Chord </ a >
11. </ ch: fingerboard >
12. < ch: fingerboard src = "chords.xml # Am" srctype = "text / xml" class = "highlight = string == 1 highlight = string == 2" >
13. <a href = "chords.xml # Am"> Am Chord </ a >
14. </ ch: fingerboard >
15. < ch: fingerboard src = "chords.xml # Dm" srctype = "text / xml" >
16. <a href = "chords.xml # Dm"> Chord Dm </ a >
17. </ ch: fingerboard >
18. < ch: fingerboard src = "chords.xml # Dm" srctype = "text / xml" class = "highlight = finger == fore highlight = finger == middle" >
19. <a href = "chords.xml # Dm"> Chord Dm </ a >
20. </ ch: fingerboard >
21. </ body >
22. </ html >

Thanks to xhtml-inkludov technology we do not load the layout for chords with each page, and once we load the chord bank. Its new implementation went to a separate file and now also supports downloading a fragment of the document with the specified identifier:

1. < t: template match = "* [@src and contains (@srctype, 'xml')]" mode = "content" >
2. < t: variable name = "doc" select = "substring-before (@src, '#')" />
3. < t: variable name = "id" select = "substring-after (@src, '#')" />
4. < t: choose >
5. < t: when test = "$ id" >
6. < t: apply-templates select = "document ($ doc) // * [@id = $ id] [1] / node ()" />
7. </ t: when >
8. < t: otherwise >
9. < t: apply-templates select = "document (@src) / * / node ()" />
10. </ t: otherwise >
11. </ t: choose >
12. </ t: template >

There you can contemplate the Mozilla hack, thanks to which the styles on the elements overlap equally in all browsers:

1. <t: template match = "body" mode = "content" >
2. <t: apply-templates select = "*" />
3. <script> <! [CDATA [
4. new function () {
5. if (! document .getElementsByTagNameNS) return ;
6. var nsList = [ "urn: markup: chords" ];
7. for ( var nsI = nsList.length; nsI--;) {
8. var els = document .getElementsByTagNameNS (nsList [nsI], '*' );
9. while (xel = els [0]) {
10. var el = document .createElement (xel.nodeName);
11. var node;
12. while (node ​​= xel.firstChild) el.appendChild (node);
13. var sa = xel.attributes;
14. for ( var i = 0; i <sa.length; ++ i) {
15. var node = sa.item (i);
16. el.setAttribute (node.nodeName, node.nodeValue);
17. };
18. xel.parentNode.replaceChild (el, xel);
19. };
20. };
21. };
22. ]]> </ script>
23. </ t: template>

Of course, you can still give the page as text / html, and instead of the fingering, users will see links to the corresponding chords in the bank.