hnakamur’s blog

hnakamur’s blog

ものすごい勢いで忘れる私のために未整理でもいいからとりあえずメモ

2009-07-30

90度単位ではない回転テキストのサンプル

できたことはできましたが、IEのはビットマップイメージを回転しているのでがたがたになってしまいました。

参考: DXImageTransform.Microsoft.Matrix

<!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: 32pt;
  font-size: 12pt;
  display: block;
  -webkit-transform: rotate(-30deg); 
}
.year, x:-moz-broken {
  position: absolute;
  top: 8pt;
  left: 32pt;
  font-size: 12pt;
  -moz-transform: rotate(-30deg); 
}
</style>
<!--[if IE]>
<style type="text/css">
.year {
  filter:progid:DXImageTransform.Microsoft.Matrix(
  M11=0.866,
  M12=0.5,
  M21=-0.5,
  M22=0.866,
  Dx=1.0,
  Dy=1.0,
  FilterType='bilinear',
  sizingMethod='auto expand'
  );
  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>
0 コメント
ラベル:

2009-07-29

text rotation with css

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では回転はできるがアンチエイリアシングはかからなくなってしまうことを確認。

0 コメント
ラベル:

2009-07-04

Checkstyle用カスタムチェックの作成

例としてreturnの値を括弧で囲んでいないか(*)のチェックを行うモジュールを作成してみました。

(*): Code Conventions for the Java(TM) Programming Language: Contentsのreturn Statements参照

参考URL
Checkstyle - Writing Checks
成果物
mycheckstyleexperiments
0 コメント
ラベル: ,

Firefoxでリロードボタンとストップボタンを統合する

userchrome.css - Mozilla Firefox まとめサイト

Firefox 3.5でもできました。デフォルトではリロードボタンの右にストップボタンがあるのでまず入れ替えてからuserChrome.cssに以下の内容を追加してFirefoxを再起動すればOKです。 

/*
 * リロードボタンとストップボタンを統合。
 * ストップボタンの右にリロードボタンがあることが前提。
 */
#stop-button:not([disabled=true]) + #reload-button,
#stop-button[disabled=true]
{
    display:none !important;
}
0 コメント
ラベル:
登録: 投稿 (Atom)

ブログ アーカイブ