Alphabet 1 forme baton pour les utilisateurs d'un langage multidirectionnel et de documents protégés aux normes iso

A placer dans le style du head

.mon_humeur1{
position:absolute;
width: 40px;
height: 40px;
background-color: #F5FFFA;
margin-left: 1px;
}
.trait_vertical1{
position:absolute;
width: 2px;
height: 10px;
background-color: black;
}
.trait_vertical1:active{
background-color: #F5FFFA;
}
.trait_horizontal1{
position:absolute;
width: 10px;
height: 2px;
background-color: black;
}
.trait_horizontal1:active{
background-color: #F5FFFA;
}
.action{
position:absolute;
cursor:pointer;
background-color: #F5FFFA;

}
.angle1 {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}

A placer dans le body en ajoutant l'ouverture des balises en début de ligne, et la fermeture des balise en fin de ligne

Lettre A

<div class="mon_humeur1 action">

<div class="trait_vertical1" style="margin-top:10px ; margin-left:10px">
<div class="trait_horizontal1">
<div class="trait_vertical1" style="margin-left:10px">
<div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px">
<div class="trait_vertical1">
<div class="trait_vertical1" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>
</div>

</div>

Lettre B

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px; margin-top:-10px"
/div
/div
/div
/div
/div
/div
/div
/div

Lettre C

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div
/div
/div
/div

/div

Lettre D

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px; margin-left:-3px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-20px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
/div
/div
/div

Lettre E

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div
/div

/div

Lettre F

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div

/div

Lettre G

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4px"
/div /div /div /div /div /div /div

Lettre H

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-10px"
/div /div /div /div /div /div

Lettre I

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div

Lettre J

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-4px; margin-top:-10px"
div class="trait_horizontal1" style="margin-left:-6px; margin-top:20px"
/div /div /div /div /div

Lettre K

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1 angle1" style="margin-top:3px"
div class="trait_horizontal1 angle1" style="margin-top:-6px ; margin-left:-10px"
/div /div /div /div /div

Lettre L

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div /div /div /div

Lettre M

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-14px"
div class="trait_horizontal1" style="margin-left:4px"
/div /div /div /div /div /div /div /div /div

Lettre N

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:9px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
/div /div /div /div /div /div

Lettre O

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div /div /div /div /div /div /div

Lettre P

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
/div /div /div /div /div /div

Lettre Q

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div /div /div /div /div /div /div /div

Lettre R

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div /div /div /div /div /div /div

Lettre S

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div

Lettre T

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4.5px"
div class="trait_vertical1" style="margin-top:10px ; margin-left:4.5px"
/div /div /div /div

Lettre U

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div

Lettre V

div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div

Lettre W

div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:65px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div

Lettre X

div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:-10px ; margin-left:6px"
div class="trait_vertical1" style="margin-top:10px"
/div /div /div /div /div

Lettre Y

div class="mon_humeur1 action"
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
/div /div
div class="trait_vertical1" style="margin-top:20px ; margin-left:41px"
/div /div

Lettre Z

div class="mon_humeur1 action"
div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div /div /div /div /div /div