Notes :: 2005年01月

最新版

最近書かれた記事5件分を表示します。

更新情報RDF

更新状況をRSS 1.0形式でご覧になれます。

pre要素内のタブ

URI
http://rhongomyniad.org/notes/2005/01.html#d26t2332
カテゴリ
XHTML
投稿日時
2005-01-26 23:32

久し振りにAnother HTML-lintで文法チェックしたところ、<PRE> 内にはタブを書かないようにしましょう。と言われた。結果の解説にはこう書いてある。

タブ文字は空白文字に置き換えられて表示されるのが普通ですが、モノによって期待通りの結果を得られないことがあるというのが理由です。つまり、<PRE> の整形済みという主旨に反するということです。

結果の解説 - Another HTML-lint gatewayより引用

タブが必ずしも半角スペース4つ分に置き換えられないという理由のようだ。pre要素内では半角スペースがそのまま表示されるので、確かに「整形済みテクスト」としてはタブより半角スペースの方が適切だと言える。

過去のNotesにあるpre要素を見直すと、タブを使っているものは一つもなく、すべて半角スペースを使っていた。ソースをそのまま貼り付けることが多いためか、すっかり忘れていたらしい。今後は留意しよう。

CSSプロパティtext-justify

URI
http://rhongomyniad.org/notes/2005/01.html#d23t1501
カテゴリ
CSS
MSIE
投稿日時
2005-01-23 15:01

CSS3のText Moduleには、文字を均等割付するためのtext-justifyというプロパティが含まれている。CSS3はまだ勧告されていないが、MSIEは独自拡張(先取り)としてtext-justifyを実装しているようだ。

text-justifyにはいくつかの値が定められているが、CSS3 Text Effects Moduleにある説明文によると、日本語の文章にはinter-ideographが適しているとのこと。

inter-ideograph

This is the preferred justification in the context of the Japanese writing system, but not Latin nor Korean.

CSS3 Text Effects Module - text-justify - W3Cより引用

text-justifyを利用する際にはtext-align: justify;を同時に指定する必要があり、次のようにすると良い。ただし、MSIE5以降の独自拡張であるため、OperaやFirefox(Gecko)では上手く表示できない場合がある(text-justifyの値はautoのみ対応しているようだ)。

p {
    text-align: justify;
    text-justify: inter-ideograph;
}

英単語を含む文章では右端が不揃いになりやすく、HTML文書をプリントアウトする際に重宝するプロパティだ。オフラインでは、まだまだMSIEにお世話になりそうである。

MSIEでのpre要素の扱い

URI
http://rhongomyniad.org/notes/2005/01.html#d22t2330
カテゴリ
CSS
MSIE
投稿日時
2005-01-22 23:30
更新日時
2005-01-28 22:21

以前の記事(overflowの振る舞い)では、MSIE6(WinIE6)でpre要素の領域内にスクロールバーを出す方法について書いている。しかし、overflow: auto;またはoverflow: scroll;width: 100%;(auto以外の値であれば問題なし)という組み合わせでは、pre要素の中身が一行しかないのに縦スクロールバーを出すことが分かった。

この問題は、MSIE6独自の仕様を2種類組み合わせて解決できる(片方は明らかにバグ)。まず、MSIE5以降で使える独自のプロパティoverflow-xを使う。overflow-xは、水平方向にだけ作用するoverflowであり、overflow-x: scroll;として指定する。ただし、overflow-xの指定だけではスクロールバーが出ないので、値がauto以外であるプロパティwidthを同時に指定しなければならない。Notesではwidth: 100%;を指定した。

しかし、width: 100%;の指定をOperaやFirefoxに適用すると、pre要素が表示領域の右端を突き抜けるくらいまで伸びてしまう。今度は@i でインポート(水無月ばけらのえび日記)で触れられている、"!i"を"!important"として認識するバグを使えば解決できる。従って、pre要素に指定するプロパティと値は次の通り。

pre {
    overflow: auto;
    width: auto;
    overflow-x: scroll;
    width: 100% !i;
}

4つの指定の内、下の2つがMSIE6用の指定となる。もちろん、OperaやFirefoxはそれらの指定を無視するので、表示する上での問題はない。水無月ばけらさんが邪道な HTML より問題は少ないですと仰る通り、確かにHTML文書そのものを変更するより見栄えを定義するためのCSSで対応するべきだと思う。

CSSの文法を優先するなら、PHPでMSIE6にだけ特別のスタイルシートを適用すると良い。その際、"!i"を"!important"としても構わないが、UAを偽装していると見栄えが悪くなるかも知れない(width: 100%;による)。しかし、overflow-xを指定している以上、MSIE6用のスタイルシートは文法上妥当ではないことになる。

2005-01-23 15:16追記

_width: 100%;

プロパティの先頭にアンダースコアを入れても同様の効果が得られるそうだ。

2005-01-28 22:21追記

RDFのMIME type

URI
http://rhongomyniad.org/notes/2005/01.html#d13t0226
カテゴリ
Web全般
ブラウザ全般
投稿日時
2005-01-13 02:26

RFC 3870によると、RDFMIME typeはapplication/rdf+xmlとして登録されている。NotesのRSS FeedはRDFであり、head要素には次の通り記述している。

<link rel="alternate" type="application/rss+xml" href="/notes/rssfeed.rdf" title="Notes :: 更新情報" />

RFCに登録されているのはapplication/rdf+xmlだが、OperaのRSS自動認識機能はtype属性値がapplication/rss+xmlの場合しか働かないという問題がある。そのため、link要素のtype属性値はapplication/rdf+xmlに変更していない。なお、Firefoxはapplication/rdf+xmlでRSSの存在を認識する。

しかし、実際にRDFファイルを開く際には、サーバから送られるMIME typeによってどのアプリケーションで処理するか決定している。つまり、type属性値に何が指定されていようと開く処理には影響しない。.htaccessが使えるサーバであれば、サーバから送られるMIME typeを変更できるので、Opera・Firefox・MSIEで3種類のMIME typeをそれぞれ実験した。XML文書として表示されるのが正常である。

ブラウザのバージョン
  • Opera 7.60 Preview 4 [en]
  • Firefox 1.0 (Gecko/20041107) [en]
MIME typeによる処理の判断: Opera・Firefox・MSIEの比較
browser application/rdf+xml application/rss+xml application/xml
Opera XML文書として表示 XML文書として表示 XML文書として表示
Firefox アプリケーション選択のダイアログ アプリケーション選択のダイアログ XML文書として表示
MSIE6 XML文書として表示 XML文書として表示 XML文書として表示

Firefoxがapplication/xml以外のRDFファイルを認識しないため、.htaccessでは次のようにMIME typeを設定すると良い。

AddType "application/xml; charset=UTF-8" .rdf

HTTPレスポンスヘッダとXHTML文書内のMIME typeを一致させられないことがもどかしい。ただし、いずれ解決される問題だとは思う。

blockquote要素の扱いを変更

URI
http://rhongomyniad.org/notes/2005/01.html#d07t0431
カテゴリ
XHTML
CSS
投稿日時
2005-01-07 04:31

これまではblockquote要素の後にp要素で引用元を明示していたが、そのp要素を削除することにした。引用元を明示しないようにするのではなく、blockquote要素のcite属性・title属性とCSSを用いてblockquote要素の領域内に表示する。

blockquote要素のcite属性・title属性にそれぞれ引用元のURIと引用元のタイトルや補足説明を指定し、それらをCSSの疑似要素である:before:afterを用いて整形することで実現できる。CSSの書き方は次の通り(必要部分のみ)。

blockquote:before {
    content: "引用部";
}
blockquote:after {
    content: attr(title)"("attr(cite)")より引用";
}

プロパティcontentでattr(cite)とすれば、その部分は指定した要素のcite属性値に置き換えられる。また、ダブルクォートで括った任意の文字列を表示させることも可能だ。CSSでその他のプロパティを指定すると、blockquote要素は次のようになる。(画像版のblockquote要素のスタイルもあります。)

これまではblockquote要素の後にp要素で引用元を明示していたが、そのp要素を削除することにした。引用元を明示しないようにするのではなく、blockquote要素のcite属性・title属性とCSSを用いてblockquote要素の領域内に表示する。

blockquote要素の扱いを変更 - Rhongomyniad.orgより引用

CSSの疑似要素は便利だが、MSIEはこれを認識しないと知っておく必要があるかも知れない。

RSS/blogの人気と更新頻度を計測するfeed meter

URI
http://rhongomyniad.org/notes/2005/01.html#d06t0453
カテゴリ
Web全般
投稿日時
2005-01-06 04:53

よく見るサイトでfeed meterを知り、早速Notesのfeed meterを生成してみた。人気度と更新頻度は画像で表現されており、直感的に分かるようになっている。

星の数とメータはそれぞれ人気度(3段階)と更新頻度(5段階)を表しており、feed meterをクリックするとより詳細なデータが見られる。Notesの人気度は1.0(おそらく最低)、更新頻度は2.3(0.21/day)だった。

また、feed meterの人気度ランキングには上位300のblogが掲載されている。人気度は参考にしかならないが(興味は人それぞれ)、ランキングを眺めていると興味深いblogが見つかるかも知れない。

謹賀新年

URI
http://rhongomyniad.org/notes/2005/01.html#d01t0422
カテゴリ
雑多
投稿日時
2005-01-01 04:22

大晦日は冷え込みが厳しく、大阪北部では何年振りかの積雪を記録した。降雪はともかく積雪は珍しいため、名神高速や京滋バイパスをはじめとする主要道路は相次いで通行止めとなった。元日も冷え込みが続き、降雪の可能性があるという。

例年はほとんど雪が降らず、年末年始になってもあまり実感が湧かなかった。今年は実感を伴ってのお正月になりそうである。

Life is like a box of chocolates. You never know what you're gonna get.

Forrest Gumpより引用

2005年はどのような年になるのだろうか。やはり、「開けてみるまで何が入っているか分からない」ものである。しかし、自分でコントロールできる範囲においては、しっかりと意志を貫きたい。

文書情報

桐沢 辰