<!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; } .bgtest { background: url(4colors.png); /* A square divided into a 2x2 grid of 4 colors; */ /* only the two left squares (blue & cyan) should show */ background-size: 32px; } </style> </head> <body> <div class="test v-lr">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div> <div class="test v-rl">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div> </body> </html>