m2O

2007/01/10 (水)

Opera の空リスト対策と文字選択

| 10:02 | Opera の空リスト対策と文字選択 - m2O を含むブックマーク

元ネタは「チーム俺等 - Opera備忘録のぺえじ - 引き続き数字付きリストについて考える」。
(http://orera.g.hatena.ne.jp/misttrap/20070107/p2)
要するに Opera では中身の無い li 要素(<li></li>)は無視されるけれども空行として表示したい。


CSS

.selecttest li       {border-bottom:transparent solid 1px}
.selecttest li:hover {border-bottom-color:black}
.test1 li:after       {content:".";visibility:hidden;font-size:0px;}
.test2 li.empty:after {content:".";visibility:hidden;font-size:0px;}

test1

<ol class="selecttest test1">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa
  2. bbbbbbbbbbbbbbbbbbbbbbbb

Opera9 でリスト内の文字を複数行選択しようとするとうまくいかない。(再描画で選択が解除されてる?)
ただし css の hover をとれば問題なし。


test2

<ol class="selecttest test2">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li class="empty"></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa
  2. bbbbbbbbbbbbbbbbbbbbbbbb

これなら文字選択は問題なし。けど empty クラスがなんか嫌。


(番外編)img 挿入

<ol class="selecttest">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li><img width="0" height="0"></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa
  2. bbbbbbbbbbbbbbbbbbbbbbbb

なにこのマークアップ。


すいません。結論はないんです。
「いまこんなんで悩んでるよ~」という表明だけしとけばあとは仙道とかが何とかしてくれるかな、と。

--

空行の行番号が表示されなくてもよければ

<ol class="selecttest">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li><br /></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa

  2. bbbbbbbbbbbbbbbbbbbbbbbb

--

思いつき

<ol class="selecttest">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li><br /><span></span></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa

  2. bbbbbbbbbbbbbbbbbbbbbbbb

行番号が少しズレる(line-heightを増やすと顕著)けどいいかも。
これが <p><span></span></p> だとダメなんだよなあ。

--

img 挿入が最も楽かなと思ったので気になる行番号の位置を揃えてみた

.selecttest2 li {
  height:1.3em;
  line-height:1.3em;
}
.selecttest2 li img {
  height:1.3em;
  vertical-align:middle;
}
<ol class="selecttest2">
<li>aaaaaaaaaaaaaaaaaaaaaaaa</li>
<li><img width="0" height="0"></li>
<li>bbbbbbbbbbbbbbbbbbbbbbbb</li>
</ol>
  1. aaaaaaaaaaaaaaaaaaaaaaaa
  2. bbbbbbbbbbbbbbbbbbbbbbbb

もうなんだかグダグダだ。やっぱり img があるのは気持ち悪いし、コードも長くなったんじゃないか?

ここで気付いたんだけど li 要素の高さを指定すると、行番号は出ないけれども空行は表示されるようになった。そうすれば上の br 挿入は不要。

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20070110

2006/12/21 (木)

Opera のフォントサイズ指定に上限がある!?

| 12:24 |  Opera のフォントサイズ指定に上限がある!? - m2O を含むブックマーク

高橋メソッドみたいなのを作ろうとしてたんだけど、どうも Opera だけフォントが小さい。element.style.fontSize='5000px' とかやっても変わらず。
ところが em 指定だと大きくなったり。よくわからない。

なので確認しました。
Operaフォントサイズ テスト

結果、

  • px だけじゃなかった。
  • 単位には依存せず、数値そのものに上限(500くらい)があるようだ。

な感じ。ヒドイ!

画面一杯に1文字表示したい場合はどうしたらいいんでしょうか? 大体の値で px → em 変換するかな。

--

親の font-size を 100px にして (window.innerHeight/100)em することにしました。

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20061221