CSS組版ですがCSSで組んだCounterをブラウザ側でアクティブに取得するのは難しいようで、JavaScriptで実現できないか検討してみました。
残念ながらできないことが判明した。
まず、divでフッタを固定してスクリプトを埋めて表示すると、実際に呼び出されるのは1回のようなのでページがカウントアップされませんでした。
ページ番号は次のようにして解決するしかないようです。
<div class="footer">
<span class="page-number">Page </span>
</div> .page-number:after {
counter-increment: pages;
content: counter(pages);
}
div.footer {
position: fixed;
bottom: 0;
position: running(footer);
}図表番号はJavaScriptでも付与することが出来る。
<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> $(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);
});
});
});