同日結合のネック

ppblogには同日結合という機能があります。
呼んで名の如し、同じ日のエントリを見た目上結合するという機能です。

具体的には、以下の通り。

通常は
<div class="article">
  エントリ1
</div>
<div class="article">
  エントリ2
</div>
<div class="article">
  エントリ3
</div>
<div class="article">
  エントリ4
</div>
 ・
 ・
 ・
このように、各日ごとのエントリはarticleクラスの指定されたDIV要素で括られています。
例えばこのうち、エントリ2と3が同じ日付だったとしましょう。
すると、ppblogは以下のように出力します
<div class="article">
  エントリ1
</div>
<div class="article-united">
  <div class="article">
    エントリ2
  </div>
  <div class="separator" title="下の記事は同じ日のエントリーです">&nbsp;</div>
  <div class="article">
    エントリ3
  </div>
</div>
<div class="article">
  エントリ4
</div>
 ・
 ・
 ・
同じ日のdiv.articleをdiv.article-unitedで括り、別の指定が出来るように+エントリの間にセパレータを挟みます。
デフォルトテーマのbasicでは、.article-unitedの中にある.articleは底部の指定をなくし、代わりに.article-unitedの底部に似たような指定を施しています。また、セパレータには背景画像を入れ、エントリをつなげつつも境目を作るようになっています。

表題のネックは、例えばarticle の中、一番最後にdiv.article-bottomなどという要素を作り(basicでは、そういう用途ではありませんが存在します)、articleではなくそれに指定を施してエントリごとの境目を作っている場合です。
この場合、.article-unitedの中にある場合のarticle-bottomに指定しているプロパティは別の形にする必要が出てきます。まあ、しなくても良いんですが、変えないと同日結合する意味がないですよね……。
そうなったとき、困るのが、上の例で言うとエントリ3と4の境目です。エントリ2はarticle-bottomの指定がないのが正解ですが、エントリ3はarticle-bottomの指定が必要になるからです。

まあ、結論から申しますと、私の力ではこれをすぱっと解決することはできませんでした。
アプローチとしては
div.article-united + div.article:before { content:""; display: block;....}
みたいな指定でarticle-bottomにしていた指定を代用してみるとか、
.article-united .article:last-child article-bottom { }
/* .article-unitedに含まれる一番最後の.articleに包含されているarticle-bottomに対して指定 */
なんて、CSS3の擬似クラスを使ってみるとかくらいしか私は思いつきません(笑)
前者はIE6,7,8全滅(IE8は:before擬似要素だかcontentプロパティへの対応が中途半端だそうで……)ですし、後者はベータ版を除けばFirefoxとSafariしか対応してません(Opera9.5βはOK。IE8はダメ)。

どうしたものか悩んだのですが、とりあえず:last-child擬似クラスの指定は残しておいて、article-unitedの底部指定を適当にしてお茶を濁すことにしました。ま、どのブラウザもそのうち対応するでしょ……。


というか、この話自体がかなり限定的な話なので、ネックと題したもの別に全然ネックでもなんでもないんだよね(笑

icon

05:53 pm
Comment [0]
TrackBack [0]

Up

IE8とOpera9.5を考慮したCSSハック

段々各ブラウザのCSSの対応状況が出揃ってきたので、滅多やたらにハックする必要性というのは薄れてきていますが、まれにブラウザの癖のようなものにぶち当たることがあります。そういったときには、相変わらずお世話になることは多いのではないでしょうか……。

特に断りがなければIEは5.5~8、Firefoxは2~3、Operaは9.27と9.5、Safariは3.1です。
また、テストしたOSはXPです。
あくまで「こう書けば効かないべ?」って感じで書いてるので、同種の効きかたをするもっとスマートなハックがあるかもしれません。ハックにスマートもクソもありませんが。
最後に参考URLを書いたので、色々自分で試してみるが吉。
未対応セレクタで振り分けられれば一番楽なんですけども……。

TRUE:IE6以下
FALSE:IE7以上、Firefox、Opera、Safari
* html body selector

TRUE:IE7以上
FALSE:IE6以下、Firefox、Opera、Safari
*:first-child+html body selector

TRUE:IE
FALSE:Firefox、Opera、Safari
*:first-child+html body selector
* html body selector
上二つの複合型。

TRUE:IE7以上、Firefox、Opera、Safari
FALSE:IE6以下
html>body selector
* htmlの逆。

TRUE:IE7以上、Opera9.27
FALSE:IE6以下、Firefox、Opera9.5、Safari
*+html selector
参考サイトを見る限りOpera9.27には使えないはずなのですが、テスト環境では使えました。怪しいです。
追記
Opera9.27にも効いてしまう原因が分かりました。
XML宣言があると有効で、ないと無効であるようです。なんじゃそりゃ('A`)

TRUE:IE8、Opera9.27
FALSE:IE7以下、Firefox、Opera9.5、Safari
*+html>/**/body selector
以前はOperaのみに使えるハックだったのですが状況が変わりました。
いずれは状況的にIE8のみに使えるハックのような扱いとなるかもしれません。

TRUE:Opera9.27
FALSE:IE、Firefox、Opera9.5、Safari
*+html:first-child body selector
Opera9.5では使えないのでそのうち意味を成さなくなるでしょう。

TRUE:IE8
FALSE:IE7以下、Firefox、Opera、Safari
*:first-child+html>/**/body selector
 *:first-child+html bodyhtml>/**/body の複合型。

TRUE:Opera9.5、Safari
FALSE:IE、Firefox、Opera9.27
body:first-of-type selector

TRUE:IE8、Firefox、Opera、Safari
FALSE:IE7以下
html>/**/body selector
CSSの対応度合い的には便利なハックかもしれません

TRUE:Safari
FALSE:IE、Firefox、Opera
html:not(:nth-child(n)) selector
類似でhtml:not(:only-child:nth-child(1)) selectorhtml:not(:only-child:only-child) selectorも。

TRUE:Firerfox、Opera9.5、Safari
FALSE:IE、Opera9.27
html:not(:target) selector

TRUE:IE7以上、Opera、Safari
FALSE:IE6以下、Firefox
html[lang*=""] selector

TRUE:IE8、Opera、Safari
FALSE:IE7以下、Firefox
html[lang*=""]>/**/body selector
html[lang*=""]html>/**/body の複合型.。

TRUE:Opera9.5、Safari
FALSE:IE、Firefox、Opera9.27
html[lang*=""]:not(:target)>/**/body selector
html:not(:target)html[lang*=""]>/**/bodyの複合型。長すぎ。
上二つもそうですが、htmlで始まる別のハックで上書きする場合、htmlhtml[lang*=""]とする必要あり。

上記のを複合的に使ってIE6以下、IE7、IE8、Firefox、Opera9.27、Opera9.5、Safari3.1を全て個別に振り分けるとこうなる。ごつすぎる……。
body selector /* Firefox */
* html body selector /* less than IE6 */
*:first-child+html body selector /* IE7 (+IE8) */
html[lang*=""]>/**/body selector /* Opera9.5 (+IE8,Safari,Opera9.27) */
*+html:first-child body selector /* Opera9.27 */
*:first-child+html>/**/body selector /* IE8 */
html[lang*=""]:not(:nth-child(n)) selector /* Safari */

ま、あくまでIE8もOpera9.5もまだまだベータ版なので、正式版のときにこれが通用する保障はありませんのであしからず。
ちなみにFirefox2と3は現時点では振り分け方法がわかりません(´・ω・`)


cf.http://thomas.tanreisoftware.com/css_filters/huzzah.htmlLink
この表を眺めて組み合わせて作っています。

icon

05:50 pm
Comment [0]
TrackBack [0]

Up
 

ルビCSS

追記
最新版がありますLink

/* 
 * [Ruby CSS ver.2.0]
 *
 * Example    : <span class="ruby"><span class="rb"> [ruby base] </span><span class="rp">《</span><span class="rt"> [ruby text] </span><span class="rp">》</span></span> 
 *
 * CSS Author : Akatsuki Kitamura 
 * Sourses    : http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.htmlLink 
 *              http://www.akatsukinishisu.net/itazuragaki/id/ruby_for_mozilla.htmlLink 
 *  
 * Customize  : BENIT(2008/04/06)
 *
 * OS : Windows XP
 *
 * Browser : Internet Explorer6
 *           Internet Explorer7
 *           Internet Explorer8
 *           Firefox2.0
 *           Opera9.27
 *           Opera9.5
 *           Safari3.1
 *
 * rb == ruby base
 * rt == ruby text
 * rp == ruby parenthesis?
 */

/* -+-+-+-[共通]-+-+-+- */
span.ruby {
  font-size: 100%;
  line-height: 2.2;
  text-indent: 0;
  white-space: nowrap;
  margin: 0;
  position: static;
}
span.ruby span.rt {
  font-size: 77%;    /* ルビのサイズ */
  line-height: 1.3;
  letter-spacing: 0;
}
span.rp {    /* スタイル無効時の括弧 */
  display:none;
}

/* -+-+-+-[IE7用]-+-+-+- */

/* 以下はIE8には読み込ませない */
/*/*/
*:first-child+html span.ruby {
  line-height: 2.3;
  padding: 0 0.2em;  /* ルビが振られた文と前後の文との距離 */
  position: relative;
}
/**/
/*/*/
*:first-child+html body span.ruby span.rt {
  position: absolute;
  top: -1em;       /* ルビと対象文の距離 */
  left: 1em;
}
/**/

/* 以下はIE7とIE8共通設定 */
*:first-child+html body span.ruby span.rt {
  font-size: 62%;
}

/* -+-+-+-[IE6用]-+-+-+- */
* html span.ruby {
  line-height: 2.2;
  padding: 0 0.2em;  /* ルビが振られた文と前後の文との距離 */
  position: relative;
}
* html span.ruby span.rt {
  font-size: 62%;
  position: absolute;
  top: -1.0em;       /* ルビと対象文の距離 */
  left: 1em;
}

/* -+-+-+-[IE8, Firefox, Opera, Safari用]-+-+-+- */
html>/**/body span.ruby {
  display : inline-table;
  line-height : 1;
  text-align : center;
  padding : 0;
}

/* 以下4つはそれぞれ適宜直して下さい */
html>/**/body span.ruby                         { vertical-align : -28%; } /* Firefox2用  */
html[lang*=""]>/**/body span.ruby               { vertical-align : 125%; } /* Opera用 IE8とSafariにもかかるので以下で上書き*/
*:first-child+html/**/>body span.ruby           { margin-bottom: -4px; vertical-align: baseline; }   /* IE8用 ネガティブvertical-alignが指定できないのでネガティブmarginで対応*/
html[lang*=""]:not(:nth-child(n)) body span.ruby { vertical-align: -15%; } /* Safari3.1用 */

html>/**/body span.ruby > span.rb {
  display : table-row-group;
  line-height : 1.2;
}
html>/**/body span.ruby > span.rt {
  display : table-header-group;
}
ルビCSSの最新版です。IE8とSafari3.1に対応しました。現在Firefox3とOpera9.5どちらも現在ベータ版)には対応していません。
Opera9.5は*+html:first-childのハックがきかなくなっており、逆にbody:first-of-typeが使えるようになるのでそっちに引きづられます。
Firefox3は解釈がOperaと同じようになるのか、vertical-alignを125%にすればOKなのですが、2と3が振り分けられません('A`)

あと、IE6,7を除くモダンブラウザは、使用するフォントサイズ、line-height、フォントによってvertical-alignを微調整しなければならないと思います。

追記
Opera9.5はハックが出来たので対応してみました。
ものすっごく複雑になりましたが('A`)
こんなにハックする必要が出てくるような複雑な指定をするのはこのルビCSSくらいなので、まあ、いいんですけども……。(よくないけど)

icon

05:44 pm
Comment [0]
TrackBack [0]

Up

Firefoxで特定の全角数字が文字化けする問題

天下のダメブラウザ、InternetExplorerを使わなくなって久しく、今はFirefox(以下火狐)を使っています。
やや起動が遅かったりしますが、さまざまな挙動が好みなので火狐サンを使っているのですが、最近一つ不具合に気づきました。

それは、タイトルにあるとおり「特定の全角数字が文字化けする」というもの。
結構前から気づいていたのですが、てっきり私がブラウザで指定しているTarisakaというフォントが悪いのだろう、と思い込んできました。

が、違ったんですね。今さっき将門さんのテーマ配布所を見ていたら特定のテーマだけ文字化けしたので、ブラウザ指定のフォントを変えてみたんです。
が、文字化けは直らない。ひょっとして、と思ってググってみたらブラウザの問題でした。

こちらのエントリLink によると、Windowsに最初から入っている「Lucida Grande」というフォントがどうやら原因のようです。
早速、バックアップをとったのちに該当フォントをアンインストールし、火狐で文字化けするサイトを見てみると、見事文字化けは解消されていました。

にしても、TarisakaやArisakaなどのClearTypeが有効なフォントを見慣れた後にMSゴシックなどのフォントを見ると、なんともいえない気分になりますね。
Vistaなんて正直どうでもいいんですが、Vistaに搭載されるらしい「メイリオ」というフォントには結構期待してます。
……とはいえVistaが普及するまでは、結局汚い(というと言いすぎだろうか)フォントで我慢しなきゃいけないんでしょうね。


追記
一番アクセスがあったのがこの記事っぽかったので、これだけリカバリしておきました。

icon

07:51 pm
Comment [0]
TrackBack [0]

Up
Visual Switch