Text Rotation with CSSを読んで試してみた。いつか使う時が来るかもということでメモ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Text rotation</title>
<style type="text/css">
.example-date {
position: relative;
font-family: Helvetica, Arial;
}
.day {
position: absolute;
top: 0;
left: 0;
font-size: 32pt;
}
.month {
position: absolute;
top: 32pt;
left: 0;
font-size: 18pt;
}
.year {
position: absolute;
top: 10pt;
left: 28pt;
font-size: 12pt;
display: block;
-webkit-transform: rotate(-90deg);
}
.year, x:-moz-broken {
position: absolute;
top: 8pt;
left: 28pt;
font-size: 12pt;
-moz-transform: rotate(-90deg);
}
</style>
<!--[if IE]>
<style type="text/css">
.year {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
top: 4pt;
left: 32pt;
}
</style>
<![endif]-->
</head>
<body>
<div class="example-date">
<span class="day">31</span>
<span class="month">JULY</span>
<span class="year">2009</span>
</div>
</body>
</html>
回転できるのはいいんだけど、FirefoxとWebkit (SafariとChrome)では位置がずれるのでCSSハックで調整が必要だった。試したのはMac OS X Leopard上のSafari 4.0.2とChrome 3.0.195.1 (開発版)とWindows 7RC上のIE 8.0.7100.0です。
また、記事の通りWindows7+IE8では回転はできるがアンチエイリアシングはかからなくなってしまうことを確認。
