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

anti scroll

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

スタイル編集機能で、プログラマブルな小説投稿

新たにスタイル編集ページを追加しました。

詳しくは縦書き文庫のヘルプから「スタイル編集」のページを確認して下さい。

注意事項

スタイルはcssではなく、JSON形式で宣言します。

{
   ".foo":{
       margin:{
          after:"1em"
       }
    },
   "span.fuga":{
       "font-size":"2em" // fontSizeでもOK
    }
}

afterってのが見慣れないかもしれませんが、これは論理方向です。詳しくはヘルプの解説を見て下さい。

あと、bodyタグの編集はできません

bodyのスタイルは「表示設定」ボタンでのみ変更できるようにしたいからです。

紳士の嗜みとして、ここは一つ「bodyタッチはNG」ということで、ご理解いただければと思います。

ちなみに、このスタイル編集の面白い点は、なんといってもプロパティとして関数が書ける点です。

なので、その辺りのサンプルを2つほど紹介したいと思います。

サンプル1

例えば、縦書きや横書きで文字列を替えたい場合があると思います。

数字を横書きでは半角で、縦書きでは漢数字で、とか。

そういうことをするタグを、例えばこんな風に定義できます。

{
  // 使いかた
  // <replace-if-vert text="一九八四">1984</replace-if-vert>年
  "replace-if-vert":{
    display:"inline",
    onload:function(ctx){
      if(ctx.isTextVertical()){
        var markup = ctx.getMarkup();
        markup.setContent(markup.getAttr("text"));
      }
    }
  }
}

こうやって定義した後に

<replace-if-vert text="一九八四">1984</replace-if-vert>

と書くと、横書きなら「1984年」、縦書きなら漢数字で「一九八四年」と表示されます。

サンプル2

スタイル編集の中で変数を使うにはどうしたらいいでしょうか。

スタイルは、最終的に1つのJSONを返せばいいわけなので、次のように関数に囲ってJSONを返す処理にしてしまえば、変数を使うこともできます。

(function(){
  var colors = ["red", "green", "blue"];
  return {
    ".rgb-list li":{
      color:function(ctx){
        var index = ctx.getChildIndex();
        return colors[index % colors.length];
      }
    }
  };
})()

こうやって定義した後に、

<ul class="rbg-list">
  <li>これは赤</li>
  <li>これは緑</li>
  <li>これは青</li>
</ul>

と書けば、各リストアイテムが「赤」「緑」「青」の順番で色が変わります。

というわけで、使いこなすことができたら、色々と面白いことができるのではないでしょうか。