郵便局のロゴに見られるような、一文字目だけ反転+2行揃えパターンをCSSでやってみようと考える。
最初、h1にborder-leftで四角部分を作成してpadding-leftに負の値を指定すればいいんじゃないかと思ったが、paddingは負の値を取れない。文字色の変更に用いたfirst-letter疑似要素に負のmargin-leftを指定することはできるが、それだと一文字目だけが左に動いてしまう。全体を調整する方法はないものか。
first-line疑似要素のpositionをいじろうかと思ったがfirst-lineは決してブロックレベルにならないインライン要素で色々と制限がきつい。
結局、日本語+英訳の併記ということも考慮した結果としてrubyでマークアップすることにした。IEでの調整はやってないので変になるかも。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="">
<title>POST OFFICE</title>
<style type="text/css">
* {
padding: 0pt;
margin: 0pt;
line-height: 100%;
font-family: sans-serif;
}
h1{
color: red;
font-size: 24pt;
position: relative;
}
h1:first-letter {
color: white;
background: red;
padding:3pt 3pt 9pt 9pt;
line-height: 27pt;
}
rb {
font-size: 8pt;
position: absolute;
top: 25pt;
left: 36pt;
}
</style>
</head>
<body>
<h1><ruby><rt>郵便局</rt><rb>POST OFFICE</rb></ruby></h1>
</body>
</html>当初border-leftで赤い四角を作りrtを負のマージンで重ね、first-letter疑似要素で白文字にしていたのだが、何故かFirefoxで白文字部分が見えない。何度か表示させてみたところ、どうもロード中は見えているが完了時に見えなくなるっぽいことが判明。なんだそりゃ。
重ね順の問題かとfirst-letter適用位置を変更したりと色々やったが改善できない。
そう言えばfirst-letter使ってるんだから背景色もそこで指定すれば問題ないんじゃないか、と思ったが、その結果は……「ロード中は赤い四角に白文字なのにロード完了後は白地に赤文字」えーとつまりFirefoxでのfirst-letter表示に問題があるってこと?
他のモダンブラウザでは概ね予定通りに表示できているのだが。
