2014-11-25 02:16:06 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="ja">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<style>
|
2015-02-05 15:39:11 +03:00
|
|
|
@font-face {
|
|
|
|
|
font-family: mplus;
|
|
|
|
|
src: url(../fonts/mplus/mplus-1p-regular.ttf);
|
|
|
|
|
}
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: dejavu;
|
|
|
|
|
src: url(../fonts/DejaVuSansMono.woff);
|
|
|
|
|
}
|
2014-11-25 02:16:06 +03:00
|
|
|
.test {
|
|
|
|
|
margin:10px;
|
|
|
|
|
border:1px solid blue;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
word-break:break-all;
|
2015-02-05 15:39:11 +03:00
|
|
|
text-orientation:upright;
|
|
|
|
|
width:7.9em;
|
|
|
|
|
height:7.9em;
|
2014-11-25 02:16:06 +03:00
|
|
|
}
|
|
|
|
|
|
2015-02-05 15:39:11 +03:00
|
|
|
.h { writing-mode:horizontal-tb; font-family: mplus; text-transform:full-width; }
|
|
|
|
|
.v-lr { writing-mode:vertical-lr; font-family: dejavu; }
|
|
|
|
|
.v-rl { writing-mode:vertical-rl; font-family: dejavu; }
|
2014-11-25 02:16:06 +03:00
|
|
|
|
|
|
|
|
.bgtest {
|
|
|
|
|
background: url(blue-32x32.png) no-repeat;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="test h">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
|
|
|
|
|
|
|
|
|
<div class="test v-lr">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
|
|
|
|
|
|
|
|
|
<div class="test v-rl">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
