<style>
.conteneur{
width :300px;
margin:10px;
border:1px solid #226C01;
}
.border{
border:1px dotted #ccc;
}
.defaut{
display:block;
}
.hauteur{
height:250px;
}
.horizontal-tb{
writing-mode : horizontal-tb
}
.vertical-rl{
writing-mode : vertical-rl;
}
.vertical-lr{
writing-mode : vertical-lr;
}
</style>
<div class="conteneur horizontal-tb">
<span class="defaut border"><b>writing-mode : horizontal-tb.</b></span>
<span class="defaut border"><b>Bloc 2 :</b>Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.</span>
<span class="defaut border"><b>Bloc 3 :</b>Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.</span>
<span class="defaut border"><b>Bloc 4 :</b>videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</span>
</div>
<div class="conteneur hauteur vertical-rl">
<span class="defaut border"><b>writing-mode : vertical-rl.</b></span>
<span class="defaut border"><b>Bloc 2 :</b>Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.</span>
<span class="defaut border"><b>Bloc 3 :</b>Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.</span>
<span class="defaut border"><b>Bloc 4 :</b>videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</span>
</div>
<div class="conteneur hauteur vertical-lr">
<span class="defaut border"><b>writing-mode : vertical-lr.</b></span>
<span class="defaut border"><b>Bloc 2 :</b>Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.</span>
<span class="defaut border"><b>Bloc 3 :</b>Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.</span>
<span class="defaut border"><b>Bloc 4 :</b>videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</span>
</div>
Interprétation du code de la propriété writing-mode CSS par votre navigateur.
writing-mode : horizontal-tb.Bloc 2 :Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.Bloc 3 :Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.Bloc 4 :videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
writing-mode : vertical-rl.Bloc 2 :Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.Bloc 3 :Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.Bloc 4 :videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
writing-mode : vertical-lr.Bloc 2 :Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus.Bloc 3 :Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior.Bloc 4 :videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
Interprétation normale du code de la propriété CSS writing-mode (copie d'écran).
