Continuation of the idea of ​​writing guitar chords in HTML. Version 3, optimized options

We continue to develop chord notation in HTML. In the comments of the previous topic, selenit proposed an optimized version ( 1 , 2 ), where the code is even less.

To familiarize yourself with the topic in detail, read the previous topic .


The code has been reworked, now instead of 4 lists, 1 is used on which, as with everything, on strings.
Label replaced by a larger unicode symbol # & # 9679;

When implementing the proposed selenit, it was possible to reduce the number of code, but I had to incur losses. In particular, incorrect printing in Opera, IE - the chords come apart. How to decide has not yet come up.
When scaling a page in IE, digits indicating finger numbers are shifted.
The option with correct printing can be seen in the previous version of the code .

Applies to all versions: the type of chord depends on the font size, as the font symbol is used for the label, then with changing the font or its size it is necessary to change the parameters in CSS for the correct display.

HTML and CSS code for chords.

HTML for a few chords, a demonstration of the large and small barre.

Гитарные аккорды v3

 

   

     

       
1. ●1

       
2. ●3

       
3. ●2

       
4. 0

       
5. x

       
6. x

     

   

 

 

Dm

 

   

     

       
1. ●3

       
2. ●1

       
3. ●2

       
4. 0

       
5. x

       
6. x

     

   

 

 

D7

 

   

     

       
1. 0

       
2. ●1

       
3. 0

       
4. ●2

       
5. ●3

       
6. 0

     

   

 

 

C

 

I

 

   

     

       
1. ●1

       
2. ●1

       
3. ●2

       
4. ●4

       
5. ●3

       
6. ●1

     

   

 

 

F

 

I

 

   

     

     
1. ●1

     
2. ●2

     
3. ●1

     
4. ●3

     
5. ●4

     
6. x

     

   

 

 

Db

 

II

 

   

     

       
1. ●1

       
2. ●2

       
3. ●4

       
4. ●3

       
5. ●1

       
6. x

     

   

 

 

Hm

* This source code was highlighted with Source Code Highlighter.

See an example .

CSS code:

p.nomer-lada { margin: 0em 1.5em 0.5em 1.8em; }
   h2 {
     margin: 0; padding: 0;
     text-align: center;
   }
    .porog2 {/* второй, третий порожек */
      margin: 1em 0 1em 3.5em;
      width: 6.26em;
      border: solid #333;
      border-width: 0 0.13em;
      height: 4.56em;
    }
    .porog3 {/* третий порожек */
      width: 3.07em;
      border-right: 2px solid #333;
      height: 4.56em;
    }
    .porog2 ol {
      margin: 0 0 0 -3.13em;
      padding: .2em 0 0 0; /* верхний выcтуп порожка */
      list-style: none;
      border: solid #333; /* первый и последний порожек, в 4 ладовом аккорде он 4й, а в 3-ладовом 3й */
      border-width: 0 0.13em;
      height: 4.063em; /* фиксируем высоту для правильного масштабирования */
      width: 9em; /* начальная лина грифа на 3 лада */
      overflow: visible;
      position: relative;
    }
   .porog2.lad4 {
     width: 6.26em;
     margin: 1em 3em;
   }
    ol.lad0 {/* первый лад шире других */
      border-left-width: 0.4em;
      margin-left: -3.13em;
      height: 4.36em;
    }
    ol.lad2 {/* использовать для аккордов с баре не на 1 ладу */
      margin-left: -2.87em;  
      height: 4.36em;
    }
    ol.lad4 li {
      width: 12.26em;
    }
    ol.lad4 li.last { border-right: 0; }
    ol.lad4 {
      width: 12.26em;
     margin-right: 3em
    }
    .porog2 li {
      padding: 0;
      border-top: 1px dotted #333;
      height: .8em;
      margin: 0 0 -1px;
      *margin-bottom: -6px; /* IE 6,7 хак */
      position: relative;
      vertical-align:bottom; /* для IE */
    }
    .porog2 span {
      position: relative; /* только так IE нормально отображает номера пальцев */
      line-height: 1.3em;
      top: -.78em;
      *top: -.87em; /* IE 6,7 хак */
      left: -1em;
    }
    span big {/* метка места прижимания струны */
      font-size: 1.4em; /* размер метки места прижимания струны */
      line-height: .9em;
    }
    span small { /* номер пальца */
      position: relative;
      top:-.3em;
      font-size: .9em;
      font-weight: bold;
    }
    /* Положение меток на ладах */
    span.lad1 { left: .8em }
    span.lad2 { left: 3.8em }
    span.lad3 { left: 7em }
    span.lad4 { left: 10em; }
    
    .barre { /* баррэ привязяно к метке */
      margin: 0 0 0 -.25em;
      z-index: 10;
      border: solid #999;
      border-width: .05em 0 .05em .25em;
      display: block;
      white-space: nowrap;
      width: 0.2em;
    }
    .barre.bolshoe { height: 5.4em; }
    .s5 { height: 4.4em; }
    .s4 { height: 3.6em; }
    .s3 { height: 2.9em; }
   .accord {
     display: block;
     border: 1px solid #eee;
     width: auto;
     padding: 1em;
     margin: 1em;
   }

* This source code was highlighted with Source Code Highlighter.

See an example .

Where did I get this idea ...

Thanks to all the commentators of the first and second topic on this topic - it helped to figure it out.