CSS組版・その２

CSS組版ですがCSSで組んだCounterをブラウザ側でアクティブに取得するのは難しいようで、JavaScriptで実現できないか検討してみました。

残念ながらできないことが判明した。

まず、divでフッタを固定してスクリプトを埋めて表示すると、実際に呼び出されるのは1回のようなのでページがカウントアップされませんでした。

ページ番号は次のようにして解決するしかないようです。

HTML

        <div class="footer">
                <span class="page-number">Page </span>
        </div>

CSS

  .page-number:after { 
    counter-increment: pages; 
    content: counter(pages);
   }

   div.footer {
        position: fixed;
        bottom: 0;
        position: running(footer);
      }

図表番号

図表番号はJavaScriptでも付与することが出来る。

HTML

        <div class="figurenum">
            <figcaption id="figtest3">see me</figcaption>
        </div>

        <div class="figurenum">
            <figcaption id="figtest3">see me</figcaption>
            <figcaption id="figtest3">see me</figcaption>
        </div>

JavaScript

            $(function() {
                console.log("SECTION function");
                var section = 0;
                $(".figurenum").each(function() {
                    section++;
                    console.log("section: "+section);
                    var figure = 0;
                    $(this).find("figcaption").each(function() {
                        figure++;
                        var s = "Figure. " + section + "." + figure;
                        $(this).attr({alt:s}).after(s);
                    });
                });
            });