ÿþ<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en"> <head> <title>lr-tb writing mode Start, End, Before and After</title> <style type="text/css"> .tb-rl {writing-mode: tb-rl;-moz-writing-mode: tb-rl;-webkit-writing-mode: tb-rl;-o-writing-mode: tb-rl;border:10px dashed red;} .start li {-moz-margin-start:100px;-moz-padding-start:100px;} .end li {-moz-margin-end:100px;-moz-padding-end:100px;} .before li {-moz-margin-before:100px;-moz-before-start:100px;} .after li {-moz-margin-after:100px;-moz-padding-after:100px;} .start ul, .end ul, div ul {background:lime;} .start li, .end li, div li {background:yellow;} .start p, .end p, div p {background:aqua;} .float-left {float: left;border:10px solid blue;} .float-right {float: right;border:10px solid green;} .float-left, .float-right {width: 100px;height: 100px;} </style> </head> <body> <p><em>testing 8th June 2010</em></p> <h1>lr-tb writing mode Start, End, Before and After</h1> <div class="float-left">Float left</div> <div class="float-right">Float right</div> <div class="tb-rl"> <div class="float-left">Float left</div> <div class="float-right">Float right</div> <h2>Margin and padding Start åe,gžŠ</h2> <img src="../../images/logical.png" width="100" height="100" alt="logical" /> <a href="http://www.google.com">Google</a> <div class="start"> <ul dir="ltr"> <li><p>0123456789 åe,gžŠ</p></li> </ul> <ul dir="rtl"> <li><p>rtl</p></li> </ul> </div> <h2>Margin and padding End</h2> <div class="end"> <ul dir="ltr"> <li><p>ltr</p></li> </ul> <ul dir="rtl"> <li><p>rtl</p></li> </ul> </div> <div class="float-left">Float left</div> <div class="float-right">Float right</div> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> <p>rtl</p> </div> <div class="float-left">Float left</div> <div class="float-right">Float right</div> <h2>Margin and padding Start in ltr block</h2> <div class="before"> <ul dir="ltr"> <li><p>ltr</p></li> </ul> <ul dir="rtl"> <li><p>rtl</p></li> </ul> </div> <div class="after"> <h2>Margin and padding End in ltr block</h2> <ul dir="ltr"> <li><p>ltr</p></li> </ul> <ul dir="rtl"> <li><p>rtl</p></li> </ul> </div> <ul> <li><a href="margin-padding-start-end-ltr.htm">Margin and padding start and end in ltr</a></li> <li><a href="margin-padding-start-end-rlt.htm">Margin and padding start and end in rlt</a></li> </ul> <ul> <li><a href="http://www.littleredbook.cn/wp-content/uploads/2009/06/sgpickuploadmore.jpg">Japanese Text Layout 1</a></li> <li><a href="http://www.ohridnews.com/sliki/vesti1/2008/01/18/21-45-43_7169/Jp-vesnik.jpgvn.jpg">Japanese Text Layout 2</a></li> <li><a href="http://www.sideshowworld.com/TY-Human-Face-Fish-PT3-10.jpg">Japanese Text Layout 3</a></li> <li><a href="http://cache4.asset-cache.net/xc/50585527.jpg?v=1&c=IWSAsset&amp;k=2&amp;d=E41C9FE5C4AA0A146983647750ACF53CF4A45820561DF1E879DC0FF55478C94EB01E70F2B3269972">Japanese Text Layout 4</a></li> <li><a href="http://www.mori.cs.titech.ac.jp/img/newspaper.png">Japanese Text Layout 5</a></li> <li><a href="http://www.statemaster.com/encyclopedia/Horizontal-and-vertical-writing-in-East-Asian-scripts">Horizontal and vertical writing in East Asian scripts</a></li> <li><a href="http://dev.w3.org/csswg/css3-text-layout/">CSS Text Layout Module Level 3</a></li> </ul> </body> </html>