Chords for stringed instruments: work on the bugs
A few months later with the publication of the second version of their guitar tablature , I finally found time to modify them a bit with a file.
What was done:
')
- Removed schemes with double strings (they were made, in general, rather by fan),
- The maximum number of frets limited to twelve,
- Added the display of numbers frets,
- Added finger number display,
- Added a display of a broken tool,
- Redid the display of inactive strings (they used to stand out with red "chips", now, as expected, with red crosses and less noticeable color (the second is made for the sixth IE, which is not supported by the css-content property),
- Worked on cross-browser compatibility, as a result - ta-daaam! - this thing works even in the old man's sixth IE, although there’s no way to see some beautiful things there.
How this disgrace looks, you can see on the page with examples (compare with the previous version ).
How to use it all?
Now I will turn on the fantasy and present for a moment that all of the above described to someone was needed, and I will try to demonstrate visually how to use it.
Step by step instructions for displaying the chord Em
1. Download the block css-file and put it in a convenient directory for you.
2. Connect downloaded css file:
3. Create a wrapper:
If you do not need a full neck in twelve frets, you can do this:
In this case, it will be possible to push five frets into the wrapper. The class SingleVI means that the displayed instrument has six single strings. You can also use the classes: SingleIII, SingleIV, SingleV and SingleVII. If you want to use bass schemes, then you need to put any of these classes here: BassIII, BassIV, BassV, BassVI.
4. Insert frets:
If you used the b-neck_type_part class for the wrapper, then the elements with the b-neck__fret class should be no more than six. The Nut class of such an element means that it is a nut. Roman numerals are fret numbers. You can start counting from Nut as well as from any fret (in this case Nut is simply removed).
5. Insert strings:
If you used a class other than SingleVI, then there should be as many strings as specified in this class.
With the b-neck__string block, everything is simple. He may have three classes.
The first is the Roman numeral, which means the string number (it is mandatory).
The second is a Latin uppercase letter indicating which note the string is currently tuned to (you can omit it). In addition to pure notes, you can specify sharps or bemolevye. For example, like this:
or:
Use this feature with caution, because the ♯ and ♠icons are not displayed in all operating systems and fonts.
The third class is also optional, it can be either Active or Inactive. In the first case, the string is highlighted in green, as active, in the second, a red cross appears and it “fades”.
6. Insert "fingers" (this unit is the most difficult)
Attention should be paid to the b-neck__finger block. He may have four classes.
The first is the Roman numeral from I to V. It indicates the number of the finger. If this class is not specified, the number of the finger will not be displayed. Fingers are indicated as follows: index - I, middle - II, nameless - III, little finger - IV, large (sometimes it occurs) - V.
The second is At + a Roman numeral, indicating which string the “finger” is put on.
The third is the To + Roman numeral, which indicates how the “finger” moves.
Fourth - Barre + Roman numeral, indicating how many frets the barre is placed. For example:
Put the barre on 4 strings.
7. You may want to add a caption or caption to a block with a chord.
Here, in general, that's all.
A little pampering:
Arpeggio â„–1 ,
Arpeggio â„–2 ,
Arpeggio â„–3 ,
Arpeggio number 4 (my favorite).
Alternative versions:
habrahabr.ru/blogs/css/55248 from r3code ,
rukeba.com/chords from rukeba ,
habrahabr.ru/blogs/css/94139 from tenshi ,
chordfind.com ,
www.gootar.com/guitar .
What was done:
')
- Removed schemes with double strings (they were made, in general, rather by fan),
- The maximum number of frets limited to twelve,
- Added the display of numbers frets,
- Added finger number display,
- Added a display of a broken tool,
- Redid the display of inactive strings (they used to stand out with red "chips", now, as expected, with red crosses and less noticeable color (the second is made for the sixth IE, which is not supported by the css-content property),
- Worked on cross-browser compatibility, as a result - ta-daaam! - this thing works even in the old man's sixth IE, although there’s no way to see some beautiful things there.
How this disgrace looks, you can see on the page with examples (compare with the previous version ).
How to use it all?
Now I will turn on the fantasy and present for a moment that all of the above described to someone was needed, and I will try to demonstrate visually how to use it.
Step by step instructions for displaying the chord Em
1. Download the block css-file and put it in a convenient directory for you.
2. Connect downloaded css file:
<link rel="stylesheet" type="text/css" href="__/b-neck.css"> 3. Create a wrapper:
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> </div> </div> If you do not need a full neck in twelve frets, you can do this:
<div class="b-neck b-neck_type_part"> <div class="b-neck__fretboard SingleVI"> </div> </div> In this case, it will be possible to push five frets into the wrapper. The class SingleVI means that the displayed instrument has six single strings. You can also use the classes: SingleIII, SingleIV, SingleV and SingleVII. If you want to use bass schemes, then you need to put any of these classes here: BassIII, BassIV, BassV, BassVI.
4. Insert frets:
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> </div> </div> If you used the b-neck_type_part class for the wrapper, then the elements with the b-neck__fret class should be no more than six. The Nut class of such an element means that it is a nut. Roman numerals are fret numbers. You can start counting from Nut as well as from any fret (in this case Nut is simply removed).
5. Insert strings:
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> </div> </div> If you used a class other than SingleVI, then there should be as many strings as specified in this class.
With the b-neck__string block, everything is simple. He may have three classes.
The first is the Roman numeral, which means the string number (it is mandatory).
The second is a Latin uppercase letter indicating which note the string is currently tuned to (you can omit it). In addition to pure notes, you can specify sharps or bemolevye. For example, like this:
<div class="b-neck__string IF♯"></div> or:
<div class="b-neck__string IEâ™"></div> Use this feature with caution, because the ♯ and â™ icons are not displayed in all operating systems and fonts.
The third class is also optional, it can be either Active or Inactive. In the first case, the string is highlighted in green, as active, in the second, a red cross appears and it “fades”.
6. Insert "fingers" (this unit is the most difficult)
<div class="b-neck"> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> <div class="b-neck__hand"> <div class="b-neck__finger III AtIV ToII"></div> <div class="b-neck__finger II AtV ToII"></div> </div> </div> </div> Attention should be paid to the b-neck__finger block. He may have four classes.
The first is the Roman numeral from I to V. It indicates the number of the finger. If this class is not specified, the number of the finger will not be displayed. Fingers are indicated as follows: index - I, middle - II, nameless - III, little finger - IV, large (sometimes it occurs) - V.
The second is At + a Roman numeral, indicating which string the “finger” is put on.
The third is the To + Roman numeral, which indicates how the “finger” moves.
Fourth - Barre + Roman numeral, indicating how many frets the barre is placed. For example:
<div class="b-neck__finger BarreIV"></div> Put the barre on 4 strings.
7. You may want to add a caption or caption to a block with a chord.
<div class="b-neck"> <div class="b-neck__h1"> </div> <div class="b-neck__fretboard SingleVI"> <div class="b-neck__frets"> <div class="b-neck__fret Nut"></div> <div class="b-neck__fret I"></div> <div class="b-neck__fret II"></div> <div class="b-neck__fret III"></div> <div class="b-neck__fret IV"></div> <div class="b-neck__fret V"></div> <div class="b-neck__fret VI"></div> <div class="b-neck__fret VII"></div> <div class="b-neck__fret VIII"></div> <div class="b-neck__fret IX"></div> <div class="b-neck__fret X"></div> <div class="b-neck__fret XI"></div> <div class="b-neck__fret XII"></div> </div> <div class="b-neck__strings"> <div class="b-neck__string I E"></div> <div class="b-neck__string II H"></div> <div class="b-neck__string III G"></div> <div class="b-neck__string IV D"></div> <div class="b-neck__string V A"></div> <div class="b-neck__string VI E"></div> </div> <div class="b-neck__hand"> <div class="b-neck__finger III AtIV ToII"></div> <div class="b-neck__finger II AtV ToII"></div> </div> </div> <div class="b-neck__h2"> </div> <div class="b-neck__message"> </div> </div> Here, in general, that's all.
A little pampering:
Arpeggio â„–1 ,
Arpeggio â„–2 ,
Arpeggio â„–3 ,
Arpeggio number 4 (my favorite).
Alternative versions:
habrahabr.ru/blogs/css/55248 from r3code ,
rukeba.com/chords from rukeba ,
habrahabr.ru/blogs/css/94139 from tenshi ,
chordfind.com ,
www.gootar.com/guitar .
Source: https://habr.com/ru/post/110254/
All Articles