Изменение стиля счетчика работающих элементов CSS после нескольких страниц

Я создаю PDF-документ, используя FlyingSaucer с номерами страниц в рабочем заголовке. Я пытаюсь добиться того, чтобы изменить стиль счетчика, примененного к элементу запуска, используемому для заголовка.

Так как CSS применяется FlyingSaucer, я не могу использовать JavaScript.

Пример HTML:

<body>
    <div id="right-header"/>
    <div id="title-page"></div> <!-- page i -->
    <div id="toc-page"></div> <!-- page ii -->
    <div id="content"> <!-- counter reseted -->
        <div id="chapter1"> 
        <!-- page i ( should display 1 instead of i )-->
        <!-- page ii ( should display 2 )-->
        </div>
        <div id="chapter1"> 
        <!-- page iii ( should display 3 )-->
        <!-- page iv ( should display 4 )-->
        </div>
    </div> 
</body>

CSS:

#right-header {
    display: block;
    text-align: right;
    position: running(right-header);
}

#right-header:after {
    content: counter(page, lower-roman)
}

@page:right {
    @top-right {
        content: element(right-header);
    }
}

Этот кусок CSS правильно применяет заголовки ко всему документу после

<div class="right-header"></div>

размещен.

Я пытаюсь начать свой документ с вышеуказанным стилем страницы (нижнеримский) и после определенного места в моем документе - скажем, я хотел бы либо изменить содержимое заголовка справа, либо заменить содержимое @page другим рабочим элементом для остальной части документ со стилем, установленным на десятичные числа.

Я знаю, что FlyingSaucer имеет ограниченную поддержку CSS3, но я не могу найти никакого решения (не ограничиваясь только FlyingSaucer) для такой проблемы.

Содержимое текущего заголовка может быть изменено без влияния на предыдущие заголовки, так как FlyingSaucer позволяет сбросить счетчик в любой точке документа, используя правило css.

-fs-page-sequence: start;

и изменения видны только после этого момента.

Таким образом, мой текущий статус таков, что у меня есть страницы, пронумерованные нижним римским i-iv (для титульного листа, оглавления и т. Д.), А затем я возвращаюсь к i и увеличиваю до конца документа. Все, что мне нужно сделать, это изменить

#right-header:after {
    content: counter(page, lower-roman)
}

в

.right-header:after {
    content: counter(page)
}

или переключите отображаемый бегущий элемент на новый.

Другое решение, которое я пробовал, добавляет еще одну возможность решить эту проблему:

<div id="right-header">
    <div id="before"/>
    <div id="forcontent"/>
</div>


#forcontent {
    display: none <!-- initially not displayed for a few first pages -->
}
#before:after {
    content: counter(page, lower-roman)
}

#forcontent:after {
    content: counter(page)
}

с этим кодом я думаю, что решение было бы включить #forcontent и отключить #before в начале #content. Я пытался работать с ~ селектором, но он не работает для изменения предыдущих элементов.

Кто-нибудь знает, как это может быть достигнуто или может указать мне на различные решения, которые я мог бы попробовать?

Источник

1 ответ

Решение

Работая над чем-то другим, я обнаружил, что FlyingSaucer поддерживает именованные страницы css3 ( https://www.w3.org/TR/css3-page/), которые позволяют элементам иметь другое определение @page с другим набором элементов. как бегущие колонтитулы.

Ниже приведен краткий пример того, как с помощью этого метода можно добиться разных стилей для "вводных" страниц.

HTML:

<html>
    ...
    <div id="introduction-right-header-placeholder">...</div>
    <div id="content-right-header-placeholder">...</div>
    <div class="introduction">
        <!-- these pages will have roman letters as page numbers -->
        ...
    </div> 

    <div class="content">
        <!-- these pages will have decimal page numbers -->
        ...
    </div> 
    ...
</html>

CSS:

#introduction-right-header-placeholder {
    text-align: right;
    position: running(introduction-right-header);
}

#introduction-right-header-placeholder:after {
    content: counter(page, lower-roman)
}

#content-right-header-placeholder {
    text-align: right;
    position: running(content-right-header);
}

#content-right-header-placeholder:after {
    content: counter(page);
}

.introduction {
    page: introduction-page;
}

.content{
    page: content-page;
}

@page introduction:right {
    @top-right {
        content: element(introduction-right-header);
    }
}

@page content:right {
    @top-right {
        content: element(content-right-header);
    }
}

В этом примере показано, как добавить номера страниц с разным стилем в FlyingSaucer для правых страниц (я удалил левую сторону, чтобы уменьшить объем кода).

Источник
Другие вопросы по тегам