<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> @font-face { font-family: dejavu; src: url(../fonts/DejaVuSansMono.woff); } .test { margin:10px; border:1px solid blue; font-family: dejavu; font-size: 16px; letter-spacing: 0.1em; word-break:break-all; text-orientation:upright; width:7em; height:7em; } .h { writing-mode:horizontal-tb; letter-spacing: 0.4em } .v-lr { writing-mode:vertical-lr; } .v-rl { writing-mode:vertical-rl; } b { background-color: yellow; } .bh { border-left: 3px solid cyan; border-right: 3px solid magenta; } .bv { border-top: 3px solid cyan; border-bottom: 3px solid magenta; } </style> </head> <body> <div class="test h">ABCDE<b class="bh">FGHIJKLMNOPQRST</b>UVWXYZ</div> <div class="test v-lr">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div> <div class="test v-rl">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div> </body> </html>