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

A placer dans le body

Lettre a

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>

Lettre b

<div class="mon_humeur1 action">
<div class="boucle4" style="margin-top:10px ; margin-left:20px">
<div class="boucle5" style="margin-left:-17px">
<div class="boucle6" style="margin-top:33px ; margin-left:20.5px">
<div class="trait_horizontal1" style="margin-top:0.1px ; margin-left:5px ; width:7px">
</div>
</div>
</div>
</div>
</div>

Lettre c

<div class="mon_humeur1 action">
<div class="boucle28" style="margin-top:15px ; margin-left:5px">
<div class="trait_horizontal1" style="margin-top:10px ; margin-left:7px ; width:7px">
</div>
</div>
</div>

Lettre d

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="sortie_droite" style="margin-left:10px ; margin-top:-10px ; height:20px">
</div>
</div>
</div>

Lettre e

<div class="mon_humeur1 action">
<div class="boucle4" style="margin-top:10px ; margin-left:20px ; height:16px">
<div class="boucle5" style="margin-left:-17px ; height:12px">
</div>
</div>
</div>

Lettre f

<div class="mon_humeur1 action">

<div class="boucle4" style="margin-top:10px ; margin-left:20px ; height:16px">
<div class="boucle5" style="margin-left:-17px ; height:12px">
</div>
</div>

</div>

Lettre g

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:15px">
</div>
<div class="boucle7" style="margin-top:-10px ; margin-left:15px">
</div>
<div class="boucle2" style="margin-left:20px ; height:10px">
</div>
</div>

Lettre h

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:10px ; margin-left:20px ; height:20px">
<div class="boucle5" style="margin-left:-17px ; height:14px">
</div>
</div>
<div class="boucle8" style="margin-top:20px ; margin-left:17px ; height:10px">
</div>
</div>

Lettre i

<div class="mon_humeur1 action">

<div class="boucle9" style="margin-top:10px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
<div class="trait_vertical1" style="margin-top:-5px ; width:2px ; height:2px">
</div>
</div>
</div>

</div>>

Lettre j

<div class="mon_humeur1 action">

<div class="boucle10" style="margin-top:10px ; margin-left:10px">
<div class="boucle12" style="margin-top:5px ; margin-left:1px">
<div class="trait_vertical1" style="margin-top:-15px ; width:3px ; height:3px ; margin-left:7px">
</div>
</div>
</div>

</div>

Lettre k

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:10px ; margin-left:20px ; height:20px">
<div class="boucle5" style="margin-left:-17px ; height:14px">
</div>
</div>
<div class="boucle13" style="margin-top:20px ; margin-left:21px ; height:4px">
</div>
<div class="sortie_droite" style="margin-top:-4px ; margin-left:21px ; height:7px">
</div>
</div>

Lettre l

<div class="mon_humeur1 action">

<div class="boucle4" style="margin-top:10px ; margin-left:20px">
<div class="boucle5" style="margin-left:-17px">
</div>
</div>

</div>

Lettre m

<div class="mon_humeur1 action">

<div class="boucle14" style="margin-top:10px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>

Lettre n

<div class="mon_humeur1 action">

<div class="boucle14" style="margin-top:10px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>

Lettre o

<div class="mon_humeur1 action">

<div class="boucle15" style="margin-top:-25px ; margin-left:390px">
<div class="boucle16" style="margin-top:-5px ; margin-left:-3px">
</div>
</div>

</div>

Lettre p

<div class="mon_humeur1 action">

<div class="boucle14" style="margin-top:10px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>

Lettre q

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="trait_vertical1" style="height:20px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:0.1px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>

Lettre r

<div class="mon_humeur1 action">
<div class="boucle19" style="margin-top:10px ; margin-left:10px">
<div class="boucle16" style="margin-top:-5px ; margin-left:8px">
<div class="boucle17" style="margin-top:10px ; margin-left:10px">
</div>
</div>
</div>
</div>

Lettre s

<div class="mon_humeur1 action">

<div class="boucle20" style="margin-top:10px ; margin-left:10px">
<div class="boucle21" style="margin-left:7px">
</div>
</div>

</div>

Lettre t

<div class="mon_humeur1 action">

<div class="boucle9" style="margin-top:10px ; height:20px ; margin-left:10px">
<div class="sortie_droite" style="margin-top:10px ; margin-left:10px">
<div class="trait_vertical1" style="margin-top:-6px ; width:10px ; height:2px ; margin-left:-5px">
</div>
</div>
</div>

</div>>

Lettre u

<div class="mon_humeur1 action">

<div class="boucle9" style="margin-top:10px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px"">
<div class="boucle9" style="margin-left:2px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>

Lettre v

<div class="mon_humeur1 action">
<div class="boucle22" style="margin-top:10px ; margin-left:20px">
<div class="boucle23" style="margin-left:16px">
</div>
</div>
</div>

Lettre w

<div class="mon_humeur1 action">
<div class="boucle22" style="margin-top:10px ; margin-left:20px">
<div class="boucle23" style="margin-left:16px">
<div class="boucle22" style="margin-left:16px ; margin-left:-12px">
<div class="boucle23" style="margin-left:16px">
</div>
</div>
</div>
</div>
</div>

Lettre x

<div class="mon_humeur1 action">
<div class="boucle24" style="margin-top:10px ; margin-left:20px">
<div class="boucle25" style="margin-left:17px">
</div>
</div>
</div>

Lettre y

<div class="mon_humeur1 action">
<div class="boucle26" style="margin-top:10px ; margin-left:20px">
<div class="boucle27" style="margin-left:12px">
</div>
</div>
</div>

Lettre z

<div class="mon_humeur1 action">
<div class="boucle19" style="margin-top:10px ; margin-left:10px ; height:10px">
<div class="boucle16" style="margin-top:-5px ; margin-left:8px ; width:10px">
</div>
</div>
<div class="boucle7" style="margin-top:5px ; margin-left:25px ; height:40px">
</div>
<div class="boucle2" style="margin-top:25px ; margin-left:30px ; height:15px">
</div>
</div>

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: #3366FF;
}
.trait_vertical1:active{
background-color: #F5FFFA;
}
.trait_horizontal1{
position:absolute;
width: 10px;
height: 2px;
background-color: #3366FF;
}
.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);
}
.boucle1{
width: 10px;
height: 10px;
border: 0px;
border-bottom: 1.5px solid #3366FF;
border-left: 1.5px solid #3366FF;
border-top: 1.5px solid #3366FF;

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
margin-left: 50px;
}
.sortie_droite{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-left: 1.5px solid #3366FF;
border-bottom: 1.5px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
margin-left: 10px;
}
.boucle2{
position:absolute;
width: 10px;
height: 20px;
border: 0px;

border-left: 1.5px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
border-bottom-left-radius:20px;

}
.boucle3{
position:absolute;
width: 10px;
height: 20px;
border: 0px;

border-right: 1.5px solid #3366FF;

border-top-left-radius:12px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:12px;

}
.boucle4{
position:absolute;
width: 20px;
height: 45px;
border: 0px;

border-left: 1.5px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:100px;

}

.boucle5{
position:absolute;
width: 20px;
height: 40px;
border: 0px;

border-right: 1.5px solid #3366FF;

border-top-right-radius:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
border-bottom-right-radius:200px;

}
.boucle6{
position:absolute;
width: 5px;
height: 10px;
border: 0px;

border-right: 1.5px solid #3366FF;

border-top-right-radius:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
border-bottom-right-radius:200px;

}
.boucle7{
position:absolute;
width: 10px;
height: 20px;
border: 0px;
border-right: 1.5px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
margin-left: 50px;
}
.boucle8{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:80px;
border-bottom-right-radius:5px;
border-bottom-left-radius:90px;
}
.boucle9{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-right: 1.5px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
margin-left: 50px;
}
.boucle10{
width: 10px;
height: 20px;
border: 0px;
border-top: 2px solid blue;
border-right: 2px solid blue;
border-top-left-radius: 40px;
border-bottom-right-radius:40px;
}
.boucle11{
width: 10px;
height: 20px;
border: 0px;
border-top: 2px solid blue;
border-right: 2px solid blue;
border-top-right-radius: 40px;
border-bottom-left-radius:40px;
}
.boucle12{
width: 10px;
height: 15px;
border: 0px;
border-left: 2px solid blue;
border-left: 2px solid blue;
border-top-left-radius: 80px;
border-bottom-left-radius:20px;
}
.boucle13{
width: 4px;
height: 4px;
border: 0px;
border-bottom: 1.5px solid #3366FF;
border-right: 1.5px solid #3366FF;
border-top: 1.5px solid #3366FF;

border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}
.boucle14{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-right: 2px solid #3366FF;
border-top: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:3px;
border-bottom-left-radius:10px;

}
.boucle15{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-bottom: 1.5px solid #3366FF;
border-left: 1.5px solid #3366FF;
border-top: 1.5px solid #3366FF;
border-right: 1.5px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}
.boucle16{
position:absolute;
width: 20px;
height: 8px;
border: 0px;
border-bottom: 1.5px solid #3366FF;
border-top-left-radius:8px;
border-top-right-radius:25px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

}
.boucle17{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-left: 2px solid #3366FF;
border-bottom: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
}
.boucle18{
position:absolute;
width: 10px;
height: 10px;
border: 0px;
border-right: 2px solid #3366FF;
border-bottom: 2px solid #3366FF;
border-top-right-radius:10px;
border-top-left-radius:5px;
border-bottom-left-radius:40px;
border-bottom-right-radius:10px;
}
.boucle19{
position:absolute;
width: 10px;
height: 20px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
margin-left: 50px;
}
.boucle20{
position:absolute;
width: 25px;
height: 20px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
}
.boucle21{
position:absolute;
width: 20px;
height: 20px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}
.boucle22{
position:absolute;
width: 15px;
height: 15px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle23{
position:absolute;
width: 15px;
height: 15px;
border: 0px;
border-left: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle24{
position:absolute;
width: 15px;
height: 15px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:120px;
border-bottom-left-radius:120px;
}
.boucle25{
position:absolute;
width: 15px;
height: 15px;
border: 0px;
border-left: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:120px;
border-bottom-left-radius:120px;
}
.boucle26{
position:absolute;
width: 15px;
height: 25px;
border: 0px;
border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle27{
position:absolute;
width: 30px;
height: 25px;
border: 0px;
border-left: 2px solid #3366FF;
border-top-left-radius:150px;
border-top-right-radius:150px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;
}
.boucle28{
width: 10px;
height: 10px;
border: 0px;
border-bottom: 2px solid #3366FF;
border-left: 2px solid #3366FF;
border-top: 2px solid #3366FF;

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:5px;
border-bottom-left-radius:10px;
}