Nicer Titles 日本語訳

この文書は、Nicer Titlesの日本語訳です。

約束通り、この文書がNice Titlesのリライトだ。これは、Dunstan OrchardとEthan Marcotteによる現時点での最新版に基づいている。その最新版は1976designにある。私のNice Titlesはオブジェクト指向言語のJavaScript?を使用する。こうすると、他のスクリプトと干渉する可能性が少ない。また、この方法で可能性も若干減少する。これについては後で説明する。

2004年2月22日追記: KevinがNiceTitles?を修正して、マウスの追跡と画像への作用に対応させた。よくやった！

私はこれらの修正で示された方法を推奨する。ともかく、他の問題も解決された。はあ。

1月7日: やっかいな不正URIのバグを修正した。また、ポップアップ内の属性値の長さを制限する機能を追加した。

悩ましいことだ。バグがもう一つ見つかったので直した。詳細（1月6日）

また修正（1月5日）: コードの小さなバグを修正した。その内容はコメントで説明している。

Update: I realized that this post could be offending in some way. This, of course, is not my intention. It's not my purpose to show how good I am. I wanted to make a piece of code which was compatible with other code, and which looked and worked well and easy. Something I would use. I can clearly sense the contradiction here, and I can only hope my intentions are understood. Also, Tim Scarfe has made some suggestions for improvements. The various files will be updated shortlyhave been updated.

CSS

人々がNice Titlesに現在使っている（1976designバージョンの）CSSファイルを書き換えさせるのは私の目標ではない。これは部分的には成功した。The older version of the script explicitly set a minimum width of the "pop-up". In my opinion JavaScript? should be used as a behavioral layer, and thus CSS properties like these should not be set in a script. I have therefore removed this from my version. You'll now have to specify a minimum width in the CSS file. This minimum width is 300 pixels.

以前のバージョンで明らかになっていたバグは、Netscapeにおけるポップアップのポジショニングだ。適切に動作させるためには、div.titleのwidthとheightをautoに設定する必要がある。

テンプレート

さて、もっと面白い話に移ろう。私はスクリプトのポップアップの内容の生成方法を考案した。理論上は、これを達成する方法は2通り存在する。出力結果を生成する関数（による方法）と、テンプレートシステム（による方法）だ。新しいポップアップを簡単に生成するために、テンプレートシステムを選択した。これが正しい決定なのか自信はないが。ともかく、あまり苦労せずに修正することができる。

テンプレートは、ポップアップ内で使いたい(X)HTMLコードを含んだ文字列である。ポップアップが活性化されると、このテンプレートは、そのときにポップアップに使用される要素を用いて、パースされる。(ouch, this is real hard to explain, it seems). You can use the CSS3 method attr() to get the value of an attribute of this element. Using content() you can get the value (in text) of the element.

すべての要素に存在するわけではない属性もある。たとえばaccesskeyだ。To accomodate for this, I have included a conditional syntax. Everything you put between question-marks is conditional. This means that if attributes (selected by attr()) do not exist on an element, the conditional string is removed from the output. If you want to use a "true" question-mark, you'll have to use this: ?

テンプレートの例を示す。

<p class=\"titletext\">attr(nicetitle)? 
 <span class=\"accesskey\">[attr(accesskey)]</span>?
</p>
<p class=\"destination\">attr(href)</p>

これが、アンカーのポップアップを表示するのに使われるテンプレートだ。attr(nicetitle)はnicetitle属性の値を選択する。この関数は後で定義する。

<span class=\"accesskey\">[attr(accesskey)]</span>

この前後の引用符はこの要素にaccesskey属性が存在することを保証する。

NiceTitle?の作成

結論