| <!DOCTYPE html> |
| <style> |
| body { margin: 0px; } |
| .float { |
| float: left; |
| margin-left: 5px; |
| } |
| .container { |
| background: grey; |
| text-orientation: sideways; |
| } |
| .container :nth-child(1) { font-size:12px; } |
| .container :nth-child(2) { font-size:20px; } |
| .container :nth-child(3) { font-size:30px; } |
| .container :nth-child(4) { font-size:40px; } |
| .item { |
| display: inline-block; |
| border-width: 2px 5px 3px 4px; |
| border-style: solid; |
| padding: 6px 3px 7px 8px; |
| margin: 10px 6px 4px 12px; |
| } |
| .width175 { width: 175px; } |
| .width125 { width: 125px; } |
| .extraLeftPadding { padding-left: 30px; } |
| .extraRightPadding { padding-right: 30px; } |
| .verticalLR { writing-mode: vertical-lr; } |
| .verticalRL { writing-mode: vertical-rl; } |
| .directionRTL { direction: rtl; } |
| </style> |
| |
| <div class="float"> |
| <p>VerticalLR and LTR</p> |
| <div class="container width125 verticalLR"> |
| <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalLR and RTL<br></p> |
| <div class="container width125 verticalLR directionRTL"> |
| <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalLR and LTR</p> |
| <div class="container width175 verticalLR"> |
| <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalLR and RTL</p> |
| <div class="container width175 verticalLR directionRTL"> |
| <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div> |
| </div> |
| </div> |
| |
| <br clear="all"> |
| |
| <div class="float"> |
| <p>VerticalRL and LTR</p> |
| <div class="container width125 verticalRL"> |
| <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalRL and RTL</p> |
| <div class="container width125 verticalRL directionRTL"> |
| <div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalRL and LTR</p> |
| <div class="container width175 verticalRL"> |
| <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div> |
| </div> |
| </div> |
| <div class="float"> |
| <p>VerticalRL and RTL</p> |
| <div class="container width175 verticalRL directionRTL"> |
| <div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item extraRightPadding">A</div><div class="item">A</div> |
| </div> |
| </div> |
