新たにスタイル編集ページを追加しました。
詳しくは縦書き文庫のヘルプから「スタイル編集」のページを確認して下さい。
注意事項
{ ".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>
と書けば、各リストアイテムが「赤」「緑」「青」の順番で色が変わります。
というわけで、使いこなすことができたら、色々と面白いことができるのではないでしょうか。