読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

nehan.jsにおける関数値を設定するセレクタについて

nehan.jsではセレクタの値に「関数値」を設定できるものがあります。

例えばcssの擬似クラスにnth-childというものがありますが、これに2n+1とか-n+10とかいう値を設定するよりは、nを受け取る関数にしたほうがわかりやすいので、nehan.jsではnth-child, nth-type-of-childなどは関数で指定するようになっています。

以下はnth-childを使って、「先頭から10番以内かつ奇数」なら、背景色をピンクにするスタイル宣言です(ちなみにここではnehan.jsの基本的な扱い方については説明しません)。

var engine = Nehan.setup();

engine.setStyle(".my-list li", {
  "nth-child": function(n, markup, ctx){
    if(n < 10 && n % 2 == 1){
      return {"background-color":"pink"};
    }
  }
});

続けて「cssで書くとどうなるか」を書きたいところですが、擬似クラスで奇数かつ10以内とか一発指定できるんでしょうか。ちょっと書き方がわからないのでごめんなさい。

もちろん全ての擬似クラスが関数を取るわけじゃなく、firstのような「点」で指定できるものは、cssと同様の文法で指定できます。

// 先頭だけ赤くてデカい文字
engine.setStyle(".my-list li:first", {
  "font-size":"2em",
  "color":"#ff0000"
});

ちなみにnehan.jsでは、より汎用性のあるやり方として「onload」というフックをスタイルにセットできるようになっています。

// 三番目だけ太字に
engine.setStyle(".my-list li", {
  "onload":function(markup, ctx){
    var nth = markup.getChildNth();
    if(nth === 2){
      return {"font-weight":"bold"};
    }
  }
});

上のサンプルでは、onloadの引数に入ってくるmarkupクラスを使ってnth-childを取得し、三番目なら太字にするスタイルを返しています(ゼロから数えるので、2が三番目であることに注意)。

ちなみに二番目の引数ctxですが、この中にはドキュメントの情報が色々と入っています。

例えばhtmlのmetaヘッダとか、ドキュメントのアウトライン構造とか、anchorが貼られたリンク集合みたいなものです。

以下はこのctxからhtml headerに含まれるmetaタグの個数を取得し、デバッグ出力するタグを作るサンプルです。

engine.setStyle("meta-debug", {
  "display":"block",
  "border-width":"2px",
  "border-style":"solid",
  "border-color":"black",
  onload:function(markup, ctx){
    var meta_count = ctx.getHeader().getMetas().length;
    if(meta_count === 0){
      markup.setContentRaw("no meta!");
      return {"color":"red", "font-weight":"bold"};
    } else {
      markup.setContentRaw("meta count=" + meta_count);
      return {"color":"blue"};
    }
  }
});

上のサンプルでは、metaタグの数に応じて異なるスタイルを返すと共に、markupの中身も書き換えています。