Label keys in spec

2024-06-27 20:17:55 +01:00 · 2024-06-27 20:17:55 +01:00 · 257a42bf9d
commit 257a42bf9d
parent 63a50fbf71
1 changed files with 122 additions and 1 deletions
--- a/spec.html
+++ b/spec.html
@ -136,158 +136,185 @@
      <!-- First row -->
      <!-- E00 -->
      <rect x="0" y="0" width="80" height="80" />
      <text x="10" y="70" class="layer1">&#x0060;</text>
      <text x="10" y="10" class="layer2">&#x007e;</text>
      <text x="70" y="70" class="layer3">&#x2248;</text>
      <text x="70" y="10" class="layer4">&#x00b1;</text>
      <!-- E01 -->
      <rect x="80" y="0" width="80" height="80" />
      <text x="90" y="70" class="layer1">&#x0031;</text>
      <text x="90" y="10" class="layer2">&#x0021;</text>
      <text x="150" y="70" class="layer3">&#x0021;</text>
      <text x="150" y="10" class="layer4">&#x00a1;</text>
      <!-- E02 -->
      <rect x="160" y="0" width="80" height="80" />
      <text x="170" y="70" class="layer1">&#x0032;</text>
      <text x="170" y="10" class="layer2">&#x0040;</text>
      <text x="230" y="70" class="layer3">&#x2030;</text>
      <text x="230" y="10" class="layer4">&#x00ab;</text>
      <!-- E03 -->
      <rect x="240" y="0" width="80" height="80" />
      <text x="250" y="70" class="layer1">&#x0033;</text>
      <text x="250" y="10" class="layer2">&#x0023;</text>
      <text x="310" y="70" class="layer3">&#x00a3;</text>
      <text x="310" y="10" class="layer4">&#x00bb;</text>
      <!-- E04 -->
      <rect x="320" y="0" width="80" height="80" />
      <text x="330" y="70" class="layer1">&#x0034;</text>
      <text x="330" y="10" class="layer2">&#x0024;</text>
      <text x="390" y="70" class="layer3">&#x00a2;</text>
      <text x="390" y="10" class="layer4">&#x2039;</text>
      <!-- E05 -->
      <rect x="400" y="0" width="80" height="80" />
      <text x="410" y="70" class="layer1">&#x0035;</text>
      <text x="410" y="10" class="layer2">&#x0025;</text>
      <text x="470" y="70" class="layer3">&#x20ac;</text>
      <text x="470" y="10" class="layer4">&#x203a;</text>
      <!-- E06 -->
      <rect x="480" y="0" width="80" height="80" />
      <text x="490" y="70" class="layer1">&#x0036;</text>
      <text x="490" y="10" class="layer2">&#x005e;</text>
      <text x="550" y="70" class="layer3">&#x221a;</text>
      <text x="550" y="10" class="layer4">&#x2713;</text>
      <!-- E07 -->
      <rect x="560" y="0" width="80" height="80" />
      <text x="570" y="70" class="layer1">&#x0037;</text>
      <text x="570" y="10" class="layer2">&#x0026;</text>
      <text x="630" y="70" class="layer3">&#x204a;</text>
      <text x="630" y="10" class="layer4">&#x2717;</text>
      <!-- E08 -->
      <rect x="640" y="0" width="80" height="80" />
      <text x="650" y="70" class="layer1">&#x0038;</text>
      <text x="650" y="10" class="layer2">&#x002a;</text>
      <text x="710" y="70" class="layer3">&#x00b0;</text>
      <text x="710" y="10" class="layer4">&#x2022;</text>
      <!-- E09 -->
      <rect x="720" y="0" width="80" height="80" />
      <text x="730" y="70" class="layer1">&#x0039;</text>
      <text x="730" y="10" class="layer2">&#x0028;</text>
      <text x="790" y="70" class="layer3">&#x00aa;</text>
      <text x="790" y="10" class="layer4"></text>
      <!-- E10 -->
      <rect x="800" y="0" width="80" height="80" />
      <text x="810" y="70" class="layer1">&#x0030;</text>
      <text x="810" y="10" class="layer2">&#x0029;</text>
      <text x="870" y="70" class="layer3">&#x00ba;</text>
      <text x="870" y="10" class="layer4">&#x00a9;</text>
      <!-- E11 -->
      <rect x="880" y="0" width="80" height="80" />
      <text x="890" y="70" class="layer1">&#x002d;</text>
      <text x="890" y="10" class="layer2">&#x005f;</text>
      <text x="950" y="70" class="layer3">&#x2212;</text>
      <text x="950" y="10" class="layer4">&#x00f7;</text>
      <!-- E12 -->
      <rect x="960" y="0" width="80" height="80" />
      <text x="970" y="70" class="layer1">&#x003d;</text>
      <text x="970" y="10" class="layer2">&#x002b;</text>
      <text x="1030" y="70" class="layer3">&#x00d7;</text>
      <text x="1030" y="10" class="layer4">&#x2260;</text>
      <!-- Backspace -->
      <rect x="1040" y="0" width="160" height="80" />
      <text x="1050" y="10" class="layer2 function">Backspace</text>
      <!-- Second row -->
      <!-- Tab -->
      <rect x="0" y="80" width="120" height="80" />
      <text x="10" y="90" class="layer2 function">Tab</text>
      <!-- D01 -->
      <rect x="120" y="80" width="80" height="80" />
      <text x="130" y="150" class="layer1">&#x0071;</text>
      <text x="130" y="90" class="layer2">&#x0051;</text>
      <text x="190" y="150" class="layer3">&#x00e0;</text>
      <text x="190" y="90" class="layer4">&#x00c0;</text>
      <!-- D02 -->
      <rect x="200" y="80" width="80" height="80" />
      <text x="210" y="150" class="layer1">&#x0077;</text>
      <text x="210" y="90" class="layer2">&#x0057;</text>
      <text x="270" y="150" class="layer3">&#x00e9;</text>
      <text x="270" y="90" class="layer4">&#x00c9;</text>
      <!-- D03 -->
      <rect x="280" y="80" width="80" height="80" />
      <text x="290" y="150" class="layer1">&#x0065;</text>
      <text x="290" y="90" class="layer2">&#x0045;</text>
      <text x="350" y="150" class="layer3">&#x00eb;</text>
      <text x="350" y="90" class="layer4">&#x00cb;</text>
      <!-- D04 -->
      <rect x="360" y="80" width="80" height="80" />
      <text x="370" y="150" class="layer1">&#x0072;</text>
      <text x="370" y="90" class="layer2">&#x0052;</text>
      <text x="430" y="150" class="layer3">&#x00e8;</text>
      <text x="430" y="90" class="layer4">&#x00c8;</text>
      <!-- D05 -->
      <rect x="440" y="80" width="80" height="80" />
      <text x="450" y="150" class="layer1">&#x0074;</text>
      <text x="450" y="90" class="layer2">&#x0054;</text>
      <text x="510" y="150" class="layer3">&#x00ae;</text>
      <text x="510" y="90" class="layer4">&#x2122;</text>
      <!-- D06 -->
      <rect x="520" y="80" width="80" height="80" />
      <text x="530" y="150" class="layer1">&#x0079;</text>
      <text x="530" y="90" class="layer2">&#x0059;</text>
      <text x="590" y="150" class="layer3">&#x00fb;</text>
      <text x="590" y="90" class="layer4">&#x00db;</text>
      <!-- D07 -->
      <rect x="600" y="80" width="80" height="80" />
      <text x="610" y="150" class="layer1">&#x0075;</text>
      <text x="610" y="90" class="layer2">&#x0055;</text>
      <text x="670" y="150" class="layer3">&#x00fc;</text>
      <text x="670" y="90" class="layer4">&#x00dc;</text>
      <!-- D08 -->
      <rect x="680" y="80" width="80" height="80" />
      <text x="690" y="150" class="layer1">&#x0069;</text>
      <text x="690" y="90" class="layer2">&#x0049;</text>
      <text x="750" y="150" class="layer3">&#x00ef;</text>
      <text x="750" y="90" class="layer4">&#x00cf;</text>
      <!-- D09 -->
      <rect x="760" y="80" width="80" height="80" />
      <text x="770" y="150" class="layer1">&#x006f;</text>
      <text x="770" y="90" class="layer2">&#x004f;</text>
      <text x="830" y="150" class="layer3">&#x00f6;</text>
      <text x="830" y="90" class="layer4">&#x00d6;</text>
      <!-- D10 -->
      <rect x="840" y="80" width="80" height="80" />
      <text x="850" y="150" class="layer1">&#x0070;</text>
      <text x="850" y="90" class="layer2">&#x0050;</text>
      <text x="910" y="150" class="layer3">&#x00b6;</text>
      <text x="910" y="90" class="layer4">&#x00a7;</text>
      <!-- D11 -->
      <rect x="920" y="80" width="80" height="80" />
      <text x="930" y="150" class="layer1">&#x005b;</text>
      <text x="930" y="90" class="layer2">&#x007b;</text>
      <text x="990" y="150" class="layer3">&#x2018;</text>
      <text x="990" y="90" class="layer4">&#x201c;</text>
      <!-- D12 -->
      <rect x="1000" y="80" width="80" height="80" />
      <text x="1010" y="150" class="layer1">&#x005d;</text>
      <text x="1010" y="90" class="layer2">&#x007d;</text>
@ -296,75 +323,88 @@
      <!-- Third row -->
      <!-- Caps Lock -->
      <rect x="0" y="160" width="140" height="80" />
      <text x="10" y="170" class="layer2 function">Caps Lock</text>
      <!-- C01 -->
      <rect x="140" y="160" width="80" height="80" />
      <text x="150" y="230" class="layer1">&#x0061;</text>
      <text x="150" y="170" class="layer2">&#x0041;</text>
      <text x="210" y="230" class="layer3">&#x00e4;</text>
      <text x="210" y="170" class="layer4">&#x00c4;</text>
      <!-- C02 -->
      <rect x="220" y="160" width="80" height="80" />
      <text x="230" y="230" class="layer1">&#x0073;</text>
      <text x="230" y="170" class="layer2">&#x0053;</text>
      <text x="290" y="230" class="layer3">&#x00df;</text>
      <text x="290" y="170" class="layer4">&#x1e9e;</text>
      <!-- C03 -->
      <rect x="300" y="160" width="80" height="80" />
      <text x="310" y="230" class="layer1">&#x0064;</text>
      <text x="310" y="170" class="layer2">&#x0044;</text>
      <text x="370" y="230" class="layer3 deadkey">&#x25cc;&#x0308;</text>
      <text x="370" y="170" class="layer4">&#x2033;</text>
      <!-- C04 -->
      <rect x="380" y="160" width="80" height="80" />
      <text x="390" y="230" class="layer1">&#x0066;</text>
      <text x="390" y="170" class="layer2">&#x0046;</text>
      <text x="450" y="230" class="layer3 deadkey">&#x25cc;&#x0301;</text>
      <text x="450" y="170" class="layer4">&#x2032;</text>
      <!-- C05 -->
      <rect x="460" y="160" width="80" height="80" />
      <text x="470" y="230" class="layer1">&#x0067;</text>
      <text x="470" y="170" class="layer2">&#x0047;</text>
      <text x="530" y="230" class="layer3 deadkey">&#x25cc;&#x0304;</text>
      <text x="530" y="170" class="layer4"></text>
      <!-- C06 -->
      <rect x="540" y="160" width="80" height="80" />
      <text x="550" y="230" class="layer1">&#x0068;</text>
      <text x="550" y="170" class="layer2">&#x0048;</text>
      <text x="610" y="230" class="layer3"></text>
      <text x="610" y="170" class="layer4"></text>
      <!-- C07 -->
      <rect x="620" y="160" width="80" height="80" />
      <text x="630" y="230" class="layer1">&#x006a;</text>
      <text x="630" y="170" class="layer2">&#x004a;</text>
      <text x="690" y="230" class="layer3 deadkey">&#x25cc;&#x0300;</text>
      <text x="690" y="170" class="layer4"></text>
      <!-- C08 -->
      <rect x="700" y="160" width="80" height="80" />
      <text x="710" y="230" class="layer1">&#x006b;</text>
      <text x="710" y="170" class="layer2">&#x004b;</text>
      <text x="770" y="230" class="layer3 deadkey">&#x25cc;&#x0302;</text>
      <text x="770" y="170" class="layer4"></text>
      <!-- C09 -->
      <rect x="780" y="160" width="80" height="80" />
      <text x="790" y="230" class="layer1">&#x006c;</text>
      <text x="790" y="170" class="layer2">&#x004c;</text>
      <text x="850" y="230" class="layer3">&#x00f4;</text>
      <text x="850" y="170" class="layer4">&#x00d4;</text>
      <!-- C10 -->
      <rect x="860" y="160" width="80" height="80" />
      <text x="870" y="230" class="layer1">&#x003b;</text>
      <text x="870" y="170" class="layer2">&#x003a;</text>
      <text x="930" y="230" class="layer3">&#x003b;</text>
      <text x="930" y="170" class="layer4">&#x003a;</text>
      <!-- C11 -->
      <rect x="940" y="160" width="80" height="80" />
      <text x="950" y="230" class="layer1">&#x0027;</text>
      <text x="950" y="170" class="layer2">&#x0022;</text>
      <text x="1010" y="230" class="layer3">&#x201a;</text>
      <text x="1010" y="170" class="layer4">&#x201e;</text>
      <!-- C12 -->
      <rect x="1020" y="160" width="80" height="80" />
      <text x="1030" y="230" class="layer1">&#x005c;</text>
      <text x="1030" y="170" class="layer2">&#x007c;</text>
@ -373,109 +413,129 @@
      <!-- Fourth row -->
      <!-- Left Shift -->
      <rect x="0" y="240" width="100" height="80" />
      <text x="10" y="250" class="layer2 function">Shift</text>
      <!-- B00 -->
      <rect x="100" y="240" width="80" height="80" />
      <text x="110" y="310" class="layer1">&#x005c;</text>
      <text x="110" y="250" class="layer2">&#x007c;</text>
      <text x="170" y="310" class="layer3">&#x00ea;</text>
      <text x="170" y="250" class="layer4">&#x00ca;</text>
      <!-- B01 -->
      <rect x="180" y="240" width="80" height="80" />
      <text x="190" y="310" class="layer1">&#x007a;</text>
      <text x="190" y="250" class="layer2">&#x005a;</text>
      <text x="250" y="310" class="layer3">&#x00e6;</text>
      <text x="250" y="250" class="layer4">&#x00c6;</text>
      <!-- B02 -->
      <rect x="260" y="240" width="80" height="80" />
      <text x="270" y="310" class="layer1">&#x0078;</text>
      <text x="270" y="250" class="layer2">&#x0058;</text>
      <text x="330" y="310" class="layer3">&#x0153;</text>
      <text x="330" y="250" class="layer4">&#x0152;</text>
      <!-- B03 -->
      <rect x="340" y="240" width="80" height="80" />
      <text x="350" y="310" class="layer1">&#x0063;</text>
      <text x="350" y="250" class="layer2">&#x0043;</text>
      <text x="410" y="310" class="layer3">&#x00e7;</text>
      <text x="410" y="250" class="layer4">&#x00c7;</text>
      <!-- B04 -->
      <rect x="420" y="240" width="80" height="80" />
      <text x="430" y="310" class="layer1">&#x0076;</text>
      <text x="430" y="250" class="layer2">&#x0056;</text>
      <text x="490" y="310" class="layer3">&#x2014;</text>
      <text x="490" y="250" class="layer4"></text>
      <!-- B05 -->
      <rect x="500" y="240" width="80" height="80" />
      <text x="510" y="310" class="layer1">&#x0062;</text>
      <text x="510" y="250" class="layer2">&#x0042;</text>
      <text x="570" y="310" class="layer3">&#x2013;</text>
      <text x="570" y="250" class="layer4"></text>
      <!-- B06 -->
      <rect x="580" y="240" width="80" height="80" />
      <text x="590" y="310" class="layer1">&#x006e;</text>
      <text x="590" y="250" class="layer2">&#x004e;</text>
      <text x="650" y="310" class="layer3">&#x00f1;</text>
      <text x="650" y="250" class="layer4">&#x00d1;</text>
      <!-- B07 -->
      <rect x="660" y="240" width="80" height="80" />
      <text x="670" y="310" class="layer1">&#x006d;</text>
      <text x="670" y="250" class="layer2">&#x004d;</text>
      <text x="730" y="310" class="layer3">&#x03bc;</text>
      <text x="730" y="250" class="layer4">&#x03a9;</text>
      <!-- B08 -->
      <rect x="740" y="240" width="80" height="80" />
      <text x="750" y="310" class="layer1">&#x002c;</text>
      <text x="750" y="250" class="layer2">&#x003c;</text>
      <text x="810" y="310" class="layer3">&#x2026;</text>
      <text x="810" y="250" class="layer4">&#x2264;</text>
      <!-- B09 -->
      <rect x="820" y="240" width="80" height="80" />
      <text x="830" y="310" class="layer1">&#x002e;</text>
      <text x="830" y="250" class="layer2">&#x003e;</text>
      <text x="890" y="310" class="layer3">&#x22c5;</text>
      <text x="890" y="250" class="layer4">&#x2265;</text>
      <!-- B10 -->
      <rect x="900" y="240" width="80" height="80" />
      <text x="910" y="310" class="layer1">&#x002f;</text>
      <text x="910" y="250" class="layer2">&#x003f;</text>
      <text x="970" y="310" class="layer3">&#x003f;</text>
      <text x="970" y="250" class="layer4">&#x00bf;</text>
      <!-- Right Shift -->
      <rect x="980" y="240" width="220" height="80" />
      <text x="990" y="250" class="layer2 function">Shift</text>
      <!-- Fifth row -->
      <!-- Left Ctrl -->
      <rect x="0" y="320" width="120" height="80" />
      <text x="10" y="350" class="function">Ctrl</text>
      <!-- Left Win -->
      <rect x="120" y="320" width="100" height="80" />
      <text x="130" y="350" class="function">Win</text>
      <!-- Left Alt -->
      <rect x="220" y="320" width="100" height="80" />
      <text x="230" y="350" class="function">Alt</text>
      <!-- Space -->
      <rect x="320" y="320" width="460" height="80" />
      <text x="330" y="390" class="layer1 function">Space</text>
      <text x="330" y="330" class="layer2 function">Space</text>
      <text x="770" y="390" class="layer3 function">Narrow non-breaking space</text>
      <text x="770" y="330" class="layer4 function">Non-breaking space</text>
      <!-- AltGr -->
      <rect x="780" y="320" width="100" height="80" />
      <text x="790" y="350" class="function">AltGr</text>
      <!-- Right Win -->
      <rect x="880" y="320" width="100" height="80" />
      <text x="890" y="350" class="function">Win</text>
      <!-- Menu -->
      <rect x="980" y="320" width="100" height="80" />
      <text x="990" y="350" class="function">Menu</text>
      <!-- Right Ctrl -->
      <rect x="1080" y="320" width="120" height="80" />
      <text x="1090" y="350" class="function">Ctrl</text>
      <!-- Return -->
      <polygon points="1080, 80
                       1200, 80
                       1200, 240
@ -530,164 +590,192 @@
      <!-- First row -->
      <!-- E00 -->
      <rect x="0" y="0" width="80" height="80" />
      <text x="10" y="70" class="layer1">&#x0060;</text>
      <text x="10" y="10" class="layer2">&#x007e;</text>
      <text x="70" y="70" class="layer3">&#x2248;</text>
      <text x="70" y="10" class="layer4">&#x00b1;</text>
      <!-- E01 -->
      <rect x="80" y="0" width="80" height="80" />
      <text x="90" y="70" class="layer1">&#x0031;</text>
      <text x="90" y="10" class="layer2">&#x0021;</text>
      <text x="150" y="70" class="layer3">&#x0021;</text>
      <text x="150" y="10" class="layer4">&#x00a1;</text>
      <!-- E02 -->
      <rect x="160" y="0" width="80" height="80" />
      <text x="170" y="70" class="layer1">&#x0032;</text>
      <text x="170" y="10" class="layer2">&#x0040;</text>
      <text x="230" y="70" class="layer3">&#x2030;</text>
      <text x="230" y="10" class="layer4">&#x00ab;</text>
      <!-- E03 -->
      <rect x="240" y="0" width="80" height="80" />
      <text x="250" y="70" class="layer1">&#x0033;</text>
      <text x="250" y="10" class="layer2">&#x0023;</text>
      <text x="310" y="70" class="layer3">&#x00a3;</text>
      <text x="310" y="10" class="layer4">&#x00bb;</text>
      <!-- E04 -->
      <rect x="320" y="0" width="80" height="80" />
      <text x="330" y="70" class="layer1">&#x0034;</text>
      <text x="330" y="10" class="layer2">&#x0024;</text>
      <text x="390" y="70" class="layer3">&#x00a2;</text>
      <text x="390" y="10" class="layer4">&#x2039;</text>
      <!-- E05 -->
      <rect x="400" y="0" width="80" height="80" />
      <text x="410" y="70" class="layer1">&#x0035;</text>
      <text x="410" y="10" class="layer2">&#x0025;</text>
      <text x="470" y="70" class="layer3">&#x20ac;</text>
      <text x="470" y="10" class="layer4">&#x203a;</text>
      <!-- E06 -->
      <rect x="480" y="0" width="80" height="80" />
      <text x="490" y="70" class="layer1">&#x0036;</text>
      <text x="490" y="10" class="layer2">&#x005e;</text>
      <text x="550" y="70" class="layer3">&#x221a;</text>
      <text x="550" y="10" class="layer4">&#x2713;</text>
      <!-- E07 -->
      <rect x="560" y="0" width="80" height="80" />
      <text x="570" y="70" class="layer1">&#x0037;</text>
      <text x="570" y="10" class="layer2">&#x0026;</text>
      <text x="630" y="70" class="layer3">&#x204a;</text>
      <text x="630" y="10" class="layer4">&#x2717;</text>
      <!-- E08 -->
      <rect x="640" y="0" width="80" height="80" />
      <text x="650" y="70" class="layer1">&#x0038;</text>
      <text x="650" y="10" class="layer2">&#x002a;</text>
      <text x="710" y="70" class="layer3">&#x00b0;</text>
      <text x="710" y="10" class="layer4">&#x2022;</text>
      <!-- E09 -->
      <rect x="720" y="0" width="80" height="80" />
      <text x="730" y="70" class="layer1">&#x0039;</text>
      <text x="730" y="10" class="layer2">&#x0028;</text>
      <text x="790" y="70" class="layer3">&#x00aa;</text>
      <text x="790" y="10" class="layer4"></text>
      <!-- E10 -->
      <rect x="800" y="0" width="80" height="80" />
      <text x="810" y="70" class="layer1">&#x0030;</text>
      <text x="810" y="10" class="layer2">&#x0029;</text>
      <text x="870" y="70" class="layer3">&#x00ba;</text>
      <text x="870" y="10" class="layer4">&#x00a9;</text>
      <!-- E11 -->
      <rect x="880" y="0" width="80" height="80" />
      <text x="890" y="70" class="layer1">&#x002d;</text>
      <text x="890" y="10" class="layer2">&#x005f;</text>
      <text x="950" y="70" class="layer3">&#x2212;</text>
      <text x="950" y="10" class="layer4">&#x00f7;</text>
      <!-- E12 -->
      <rect x="960" y="0" width="80" height="80" />
      <text x="970" y="70" class="layer1">&#x003d;</text>
      <text x="970" y="10" class="layer2">&#x002b;</text>
      <text x="1030" y="70" class="layer3">&#x00d7;</text>
      <text x="1030" y="10" class="layer4">&#x2260;</text>
      <!-- Backspace -->
      <rect x="1040" y="0" width="160" height="80" />
      <text x="1050" y="10" class="layer2 function">Backspace</text>
      <!-- Second row -->
      <!-- Tab -->
      <rect x="0" y="80" width="120" height="80" />
      <text x="10" y="90" class="layer2 function">Tab</text>
      <!-- D01 -->
      <rect x="120" y="80" width="80" height="80" />
      <text x="130" y="150" class="layer1">&#x0071;</text>
      <text x="130" y="90" class="layer2">&#x0051;</text>
      <text x="190" y="150" class="layer3">&#x00e0;</text>
      <text x="190" y="90" class="layer4">&#x00c0;</text>
      <!-- D02 -->
      <rect x="200" y="80" width="80" height="80" />
      <text x="210" y="150" class="layer1">&#x0077;</text>
      <text x="210" y="90" class="layer2">&#x0057;</text>
      <text x="270" y="150" class="layer3">&#x00e9;</text>
      <text x="270" y="90" class="layer4">&#x00c9;</text>
      <!-- D03 -->
      <rect x="280" y="80" width="80" height="80" />
      <text x="290" y="150" class="layer1">&#x0065;</text>
      <text x="290" y="90" class="layer2">&#x0045;</text>
      <text x="350" y="150" class="layer3">&#x00eb;</text>
      <text x="350" y="90" class="layer4">&#x00cb;</text>
      <!-- D04 -->
      <rect x="360" y="80" width="80" height="80" />
      <text x="370" y="150" class="layer1">&#x0072;</text>
      <text x="370" y="90" class="layer2">&#x0052;</text>
      <text x="430" y="150" class="layer3">&#x00e8;</text>
      <text x="430" y="90" class="layer4">&#x00c8;</text>
      <!-- D05 -->
      <rect x="440" y="80" width="80" height="80" />
      <text x="450" y="150" class="layer1">&#x0074;</text>
      <text x="450" y="90" class="layer2">&#x0054;</text>
      <text x="510" y="150" class="layer3">&#x00ae;</text>
      <text x="510" y="90" class="layer4">&#x2122;</text>
      <!-- D06 -->
      <rect x="520" y="80" width="80" height="80" />
      <text x="530" y="150" class="layer1">&#x0079;</text>
      <text x="530" y="90" class="layer2">&#x0059;</text>
      <text x="590" y="150" class="layer3">&#x00fb;</text>
      <text x="590" y="90" class="layer4">&#x00db;</text>
      <!-- D07 -->
      <rect x="600" y="80" width="80" height="80" />
      <text x="610" y="150" class="layer1">&#x0075;</text>
      <text x="610" y="90" class="layer2">&#x0055;</text>
      <text x="670" y="150" class="layer3">&#x00fc;</text>
      <text x="670" y="90" class="layer4">&#x00dc;</text>
      <!-- D08 -->
      <rect x="680" y="80" width="80" height="80" />
      <text x="690" y="150" class="layer1">&#x0069;</text>
      <text x="690" y="90" class="layer2">&#x0049;</text>
      <text x="750" y="150" class="layer3">&#x00ef;</text>
      <text x="750" y="90" class="layer4">&#x00cf;</text>
      <!-- D09 -->
      <rect x="760" y="80" width="80" height="80" />
      <text x="770" y="150" class="layer1">&#x006f;</text>
      <text x="770" y="90" class="layer2">&#x004f;</text>
      <text x="830" y="150" class="layer3">&#x00f6;</text>
      <text x="830" y="90" class="layer4">&#x00d6;</text>
      <!-- D10 -->
      <rect x="840" y="80" width="80" height="80" />
      <text x="850" y="150" class="layer1">&#x0070;</text>
      <text x="850" y="90" class="layer2">&#x0050;</text>
      <text x="910" y="150" class="layer3">&#x00b6;</text>
      <text x="910" y="90" class="layer4">&#x00a7;</text>
      <!-- D11 -->
      <rect x="920" y="80" width="80" height="80" />
      <text x="930" y="150" class="layer1">&#x005b;</text>
      <text x="930" y="90" class="layer2">&#x007b;</text>
      <text x="990" y="150" class="layer3">&#x2018;</text>
      <text x="990" y="90" class="layer4">&#x201c;</text>
      <!-- D12 -->
      <rect x="1000" y="80" width="80" height="80" />
      <text x="1010" y="150" class="layer1">&#x005d;</text>
      <text x="1010" y="90" class="layer2">&#x007d;</text>
      <text x="1070" y="150" class="layer3">&#x2019;</text>
      <text x="1070" y="90" class="layer4">&#x201d;</text>
      <!-- C12 -->
      <rect x="1080" y="80" width="120" height="80" />
      <text x="1090" y="150" class="layer1">&#x005c;</text>
      <text x="1090" y="90" class="layer2">&#x007c;</text>
@ -696,172 +784,205 @@
      <!-- Third row -->
      <!-- Caps Lock -->
      <rect x="0" y="160" width="140" height="80" />
      <text x="10" y="170" class="layer2 function">Caps Lock</text>
      <!-- C01 -->
      <rect x="140" y="160" width="80" height="80" />
      <text x="150" y="230" class="layer1">&#x0061;</text>
      <text x="150" y="170" class="layer2">&#x0041;</text>
      <text x="210" y="230" class="layer3">&#x00e4;</text>
      <text x="210" y="170" class="layer4">&#x00c4;</text>
      <!-- C02 -->
      <rect x="220" y="160" width="80" height="80" />
      <text x="230" y="230" class="layer1">&#x0073;</text>
      <text x="230" y="170" class="layer2">&#x0053;</text>
      <text x="290" y="230" class="layer3">&#x00df;</text>
      <text x="290" y="170" class="layer4">&#x1e9e;</text>
      <!-- C03 -->
      <rect x="300" y="160" width="80" height="80" />
      <text x="310" y="230" class="layer1">&#x0064;</text>
      <text x="310" y="170" class="layer2">&#x0044;</text>
      <text x="370" y="230" class="layer3 deadkey">&#x25cc;&#x0308;</text>
      <text x="370" y="170" class="layer4">&#x2033;</text>
      <!-- C04 -->
      <rect x="380" y="160" width="80" height="80" />
      <text x="390" y="230" class="layer1">&#x0066;</text>
      <text x="390" y="170" class="layer2">&#x0046;</text>
      <text x="450" y="230" class="layer3 deadkey">&#x25cc;&#x0301;</text>
      <text x="450" y="170" class="layer4">&#x2032;</text>
      <!-- C05 -->
      <rect x="460" y="160" width="80" height="80" />
      <text x="470" y="230" class="layer1">&#x0067;</text>
      <text x="470" y="170" class="layer2">&#x0047;</text>
      <text x="530" y="230" class="layer3 deadkey">&#x25cc;&#x0304;</text>
      <text x="530" y="170" class="layer4"></text>
      <!-- C06 -->
      <rect x="540" y="160" width="80" height="80" />
      <text x="550" y="230" class="layer1">&#x0068;</text>
      <text x="550" y="170" class="layer2">&#x0048;</text>
      <text x="610" y="230" class="layer3"></text>
      <text x="610" y="170" class="layer4"></text>
      <!-- C07 -->
      <rect x="620" y="160" width="80" height="80" />
      <text x="630" y="230" class="layer1">&#x006a;</text>
      <text x="630" y="170" class="layer2">&#x004a;</text>
      <text x="690" y="230" class="layer3 deadkey">&#x25cc;&#x0300;</text>
      <text x="690" y="170" class="layer4"></text>
      <!-- C08 -->
      <rect x="700" y="160" width="80" height="80" />
      <text x="710" y="230" class="layer1">&#x006b;</text>
      <text x="710" y="170" class="layer2">&#x004b;</text>
      <text x="770" y="230" class="layer3 deadkey">&#x25cc;&#x0302;</text>
      <text x="770" y="170" class="layer4"></text>
      <!-- C09 -->
      <rect x="780" y="160" width="80" height="80" />
      <text x="790" y="230" class="layer1">&#x006c;</text>
      <text x="790" y="170" class="layer2">&#x004c;</text>
      <text x="850" y="230" class="layer3">&#x00f4;</text>
      <text x="850" y="170" class="layer4">&#x00d4;</text>
      <!-- C10 -->
      <rect x="860" y="160" width="80" height="80" />
      <text x="870" y="230" class="layer1">&#x003b;</text>
      <text x="870" y="170" class="layer2">&#x003a;</text>
      <text x="930" y="230" class="layer3">&#x003b;</text>
      <text x="930" y="170" class="layer4">&#x003a;</text>
      <!-- C11 -->
      <rect x="940" y="160" width="80" height="80" />
      <text x="950" y="230" class="layer1">&#x0027;</text>
      <text x="950" y="170" class="layer2">&#x0022;</text>
      <text x="1010" y="230" class="layer3">&#x201a;</text>
      <text x="1010" y="170" class="layer4">&#x201e;</text>
      <!-- Return -->
      <rect x="1020" y="160" width="180" height="80" />
      <text x="1030" y="170" class="layer2 function">Return</text>
      <!-- Fourth row -->
      <!-- Left Shift -->
      <rect x="0" y="240" width="180" height="80" />
      <text x="10" y="250" class="layer2 function">Shift</text>
      <!-- B01 -->
      <rect x="180" y="240" width="80" height="80" />
      <text x="190" y="310" class="layer1">&#x007a;</text>
      <text x="190" y="250" class="layer2">&#x005a;</text>
      <text x="250" y="310" class="layer3">&#x00e6;</text>
      <text x="250" y="250" class="layer4">&#x00c6;</text>
      <!-- B02 -->
      <rect x="260" y="240" width="80" height="80" />
      <text x="270" y="310" class="layer1">&#x0078;</text>
      <text x="270" y="250" class="layer2">&#x0058;</text>
      <text x="330" y="310" class="layer3">&#x0153;</text>
      <text x="330" y="250" class="layer4">&#x0152;</text>
      <!-- B03 -->
      <rect x="340" y="240" width="80" height="80" />
      <text x="350" y="310" class="layer1">&#x0063;</text>
      <text x="350" y="250" class="layer2">&#x0043;</text>
      <text x="410" y="310" class="layer3">&#x00e7;</text>
      <text x="410" y="250" class="layer4">&#x00c7;</text>
      <!-- B04 -->
      <rect x="420" y="240" width="80" height="80" />
      <text x="430" y="310" class="layer1">&#x0076;</text>
      <text x="430" y="250" class="layer2">&#x0056;</text>
      <text x="490" y="310" class="layer3">&#x2014;</text>
      <text x="490" y="250" class="layer4"></text>
      <!-- B05 -->
      <rect x="500" y="240" width="80" height="80" />
      <text x="510" y="310" class="layer1">&#x0062;</text>
      <text x="510" y="250" class="layer2">&#x0042;</text>
      <text x="570" y="310" class="layer3">&#x2013;</text>
      <text x="570" y="250" class="layer4"></text>
      <!-- B06 -->
      <rect x="580" y="240" width="80" height="80" />
      <text x="590" y="310" class="layer1">&#x006e;</text>
      <text x="590" y="250" class="layer2">&#x004e;</text>
      <text x="650" y="310" class="layer3">&#x00f1;</text>
      <text x="650" y="250" class="layer4">&#x00d1;</text>
      <!-- B07 -->
      <rect x="660" y="240" width="80" height="80" />
      <text x="670" y="310" class="layer1">&#x006d;</text>
      <text x="670" y="250" class="layer2">&#x004d;</text>
      <text x="730" y="310" class="layer3">&#x03bc;</text>
      <text x="730" y="250" class="layer4">&#x03a9;</text>
      <!-- B08 -->
      <rect x="740" y="240" width="80" height="80" />
      <text x="750" y="310" class="layer1">&#x002c;</text>
      <text x="750" y="250" class="layer2">&#x003c;</text>
      <text x="810" y="310" class="layer3">&#x2026;</text>
      <text x="810" y="250" class="layer4">&#x2264;</text>
      <!-- B09 -->
      <rect x="820" y="240" width="80" height="80" />
      <text x="830" y="310" class="layer1">&#x002e;</text>
      <text x="830" y="250" class="layer2">&#x003e;</text>
      <text x="890" y="310" class="layer3">&#x22c5;</text>
      <text x="890" y="250" class="layer4">&#x2265;</text>
      <!-- B10 -->
      <rect x="900" y="240" width="80" height="80" />
      <text x="910" y="310" class="layer1">&#x002f;</text>
      <text x="910" y="250" class="layer2">&#x003f;</text>
      <text x="970" y="310" class="layer3">&#x003f;</text>
      <text x="970" y="250" class="layer4">&#x00bf;</text>
      <!-- Right Shift -->
      <rect x="980" y="240" width="220" height="80" />
      <text x="990" y="250" class="layer2 function">Shift</text>
      <!-- Fifth row -->
      <!-- Left Ctrl -->
      <rect x="0" y="320" width="120" height="80" />
      <text x="10" y="350" class="function">Ctrl</text>
      <!-- Left Win -->
      <rect x="120" y="320" width="100" height="80" />
      <text x="130" y="350" class="function">Win</text>
      <!-- Left Alt -->
      <rect x="220" y="320" width="100" height="80" />
      <text x="230" y="350" class="function">Alt</text>
      <!-- Space -->
      <rect x="320" y="320" width="460" height="80" />
      <text x="330" y="390" class="layer1 function">Space</text>
      <text x="330" y="330" class="layer2 function">Space</text>
      <text x="770" y="390" class="layer3 function">Narrow non-breaking space</text>
      <text x="770" y="330" class="layer4 function">Non-breaking space</text>
      <!-- Right Alt -->
      <rect x="780" y="320" width="100" height="80" />
      <text x="790" y="350" class="function">AltGr</text>
      <!-- Right Win -->
      <rect x="880" y="320" width="100" height="80" />
      <text x="890" y="350" class="function">Win</text>
      <!-- Menu -->
      <rect x="980" y="320" width="100" height="80" />
      <text x="990" y="350" class="function">Menu</text>
      <!-- Right Ctrl -->
      <rect x="1080" y="320" width="120" height="80" />
      <text x="1090" y="350" class="function">Ctrl</text>