<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @font-face { font-family: ahem; src: url(../fonts/Ahem.ttf); } div { font-family: ahem; font-size: 10px; } .lr { writing-mode: vertical-lr; text-orientation: sideways-right; height: 40px; } .rl { writing-mode: vertical-rl; text-orientation: sideways-right; height: 40px; } .a { position: relative; top: 10px; left: 10px; } .b { position: relative; top: 10px; left: 10px; } .c { position: relative; top: 10px; left: 10px; } .d { position: relative; top: 10px; left: 10px; } .e { position: relative; top: 10px; left: 10px; } /* resolution-dependent offsets: we want CSS px values that will correspond to less that 0.5 device pixels either side of where 10px falls, so they all snap to the same device-pixel value */ /* XXX For higher-than-retina density, we punt; the test becomes a no-op */ @media (max-resolution: 2dppx) { .a { left: 9.8px; } .b { left: 9.9px; } .c { left: 10px; } .d { left: 10.1px; } .e { left: 10.2px; } } @media (max-resolution: 1.5dppx) { .a { left: 9.7px; } .b { left: 9.85px; } .c { left: 10px; } .d { left: 10.15px; } .e { left: 10.3px; } } @media (max-resolution: 1dppx) { .a { left: 9.6px; } .b { left: 9.8px; } .c { left: 10px; } .d { left: 10.2px; } .e { left: 10.4px; } } </style> </head> <body> <div class="lr a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="lr b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="lr d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="lr e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <br> <div class="rl a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="rl b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="rl d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> <div class="rl e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div> </body> </html>