<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML style="-webkit-writing-mode:vertical-lr">
<HEAD>
<TITLE>lists with direction:rtl</TITLE>
<style>
li { border:5px solid orange; padding:5px; }
.img { list-style-image: url(resources/white.gif) }
</style>
</HEAD>
<BODY>
<UL style="height:20ex; border:1px blue solid;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>
<UL style="direction:rtl; height:20ex; border:1px red solid;">
<LI>First item<LI>Second and very very long item<LI>Third item</UL>
<UL style="height:20ex; border:1px blue solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>
<UL style="direction:rtl; height:20ex; border:1px red solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>



<UL class=img style="height:20ex; border:1px blue solid;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>
<UL class=img style="direction:rtl; height:20ex; border:1px red solid;">
<LI>First item<LI>Second and very very long item<LI>Third item</UL>
<UL class=img style="height:20ex; border:1px blue solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>
<UL class=img style="direction:rtl; height:20ex; border:1px red solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</UL>

<OL style="height:20ex; border:1px blue solid;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</OL>
<OL style="direction:rtl; height:20ex; border:1px red solid;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</OL>
<OL style="height:20ex; border:1px blue solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</OL>
<OL style="direction:rtl; height:20ex; border:1px red solid; list-style-position:inside;">
<LI>First item
<LI>Second and very very long item
<LI>Third item
</OL>

</BODY>
</HTML>