1083848-2-inline-background.html (920B)
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @font-face { 7 font-family: mplus; 8 src: url(../fonts/mplus/mplus-1p-regular.ttf); 9 } 10 @font-face { 11 font-family: dejavu; 12 src: url(../fonts/DejaVuSansMono.woff); 13 } 14 .test { 15 margin:10px; 16 border:1px solid blue; 17 font-size: 16px; 18 word-break:break-all; 19 text-orientation:upright; 20 width:7.9em; 21 height:7.9em; 22 } 23 24 .h { writing-mode:horizontal-tb; font-family: mplus; text-transform:full-width; } 25 .v-lr { writing-mode:vertical-lr; font-family: dejavu; } 26 .v-rl { writing-mode:vertical-rl; font-family: dejavu; } 27 28 .bgtest { 29 background: url(blue-32x32.png) no-repeat; 30 } 31 </style> 32 </head> 33 34 <body> 35 36 <div class="test h">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div> 37 38 <div class="test v-lr">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div> 39 40 <div class="test v-rl">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div> 41 42 </body> 43 </html>