<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @font-face { font-family: dejavu; src: url(../fonts/DejaVuSansMono.woff); } .test { margin: 10px; border: 1px solid gray; font: 16px/24px dejavu; word-break: break-all; width: 10em; height: 6.5em; /* we use text-orientation:upright to improve the chances that our glyphs will have an advance of exactly 1em, as the reference rendering relies on this */ text-orientation: upright; color: rgba(0,0,255,0.2); } .v-lr { writing-mode:vertical-lr; } .v-rl { writing-mode:vertical-rl; } .c { background: cyan; } .b { background: blue; } </style> </head> <body> <div class="test v-lr">ABCD<span class="c">E</span><span class="b">F</span><span class="c">G</span><span class="b">H</span><span class="c">I</span><span class="b">J</span><span class="c">K</span><span class="b">L</span><span class="c">M</span><span class="b">N</span><span class="c">O</span><span class="b">P</span><span class="c">Q</span><span class="b">R</span><span class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div> <div class="test v-rl">ABCD<span class="c">E</span><span class="b">F</span><span class="c">G</span><span class="b">H</span><span class="c">I</span><span class="b">J</span><span class="c">K</span><span class="b">L</span><span class="c">M</span><span class="b">N</span><span class="c">O</span><span class="b">P</span><span class="c">Q</span><span class="b">R</span><span class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div> </body> </html>