Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"counter-reset: page;" doesn't work properly with web publications #522

Closed
butameron opened this issue May 18, 2019 · 4 comments
Closed

"counter-reset: page;" doesn't work properly with web publications #522

butameron opened this issue May 18, 2019 · 4 comments

Comments

@butameron
Copy link

@butameron butameron commented May 18, 2019

I want to exclude book cover pages from page counter.
To do this, I tried to use web publications json and set @page :first { reset-counter: page; } to second document, because vivliostyle doesn't support named pages. however this doesn't work as I expected.

Steps to Reproduce

Open Vivliostyle with #x=http://url/to/testbook.json:

testbook.json

{
    "@context": [
        "https://schema.org",
        "https://www.w3.org/ns/wp-context"
    ],
    "type": "Book",
    "dateModified": "",
    "readingOrder": [
        "./test.html",
        "./test2.html"
    ]
}

test.html

<html>
    <head>
        <style>
            @page {
                size: A4;
                            
                @top-left {
                    content: counter(page);
                }

            }
            div { page-break-after: always; }
        </style>
    </head>
    <body>
        <div>
            A
        </div>
        <div>
            B
        </div>
    </body>
</html>

test2.html

<html>
    <head>
        <style>
            @page {
                size: A4;
                            
                @top-left {
                    content: counter(page);
                }

            }
            @page :first {
                counter-reset: page;
            }

            div { page-break-after: always; }
        </style>
    </head>
    <body>
        <div>
            C
        </div>
        <div>
            D
        </div>
    </body>
</html>

Expected result

Page A: page counter value = 1
Page B: page counter value = 2
Page C: page counter value = 1
Page D: page counter value = 2

Actual result

Page A: page counter value = 1
Page B: page counter value = 2
Page C: page counter value = 3
Page D: page counter value = 4

@spring-raining
Copy link
Member

@spring-raining spring-raining commented May 19, 2019

Thank you for the reporting! The page seems to be a counter of entire of a book so that it's may not acceptable for describing a document-wise page counter. In an environment of Vivliostyle, by defining the new counter which likes below works fine:

test2.html

<html>
    <head>
        <style>
            @page {
                size: A4;
                counter-increment: doc-page;
                @top-left {
                    content: counter(doc-page);
                }
            }
            body {
                counter-reset: doc-page;
            }
            div { page-break-after: always; }
        </style>
    </head>
    <body>
        <div>
            C
        </div>
        <div>
            D
        </div>
    </body>
</html>

Hoping this answer your question.

@MurakamiShinyu
Copy link
Member

@MurakamiShinyu MurakamiShinyu commented May 19, 2019

Thanks @butameron for reporting the issue and @spring-raining for giving us a good workaround.

There are some problems on CSS Paged Media spec and Vivliostyle.js implementation.

In the spec, First-page pseudo-class: :first is defined as

The :first pseudo-class matches the first printed page of a document.

However, this spec is not very clear, when the document is a web publication, whether the :first matches only the first page of the web publication or matches first page of each sub-document (HTML) in the web publication.

Also it is not clear whether the Page-based counters are for a whole web publication or for each sub-document in the web publication.

(The problem is that the CSS Paged Media specification is not considered for publications composed of multiple HTML documents.)

In the Vivliostyle.js implementation, the :first matches only the first page of the web publication, and the page-based counters count consecutive pages in a whole web publication. Therefore, the page counter is not reset at the first page of the second document even when @page :first { reset-counter: page; } is specified.

@butameron
Copy link
Author

@butameron butameron commented May 23, 2019

@spring-raining Thank you. It works

@MurakamiShinyu MurakamiShinyu changed the title "reset-counter: page;" doesn't work properly with web publications json "reset-counter: page;" doesn't work properly with web publications Aug 24, 2019
@MurakamiShinyu MurakamiShinyu added this to To do in Paged media Aug 24, 2019
@MurakamiShinyu MurakamiShinyu changed the title "reset-counter: page;" doesn't work properly with web publications "counter-reset: page;" doesn't work properly with web publications Feb 27, 2021
@MurakamiShinyu
Copy link
Member

@MurakamiShinyu MurakamiShinyu commented Feb 27, 2021

Now, Vivliostyle.js v2.5.0 supports the :nth() page selector.

See #700 feat(core): Support the :nth() page selector

  • In multi-document publications, the :nth(1) matches the first page of each document,
    but the :first matches only the first page of the first document.
    (see: #667 (comment) )

You can use @page :nth(1) { counter-reset: page; } to reset the page counter at each or a specific document in web publications (multi-document publications).

Tests:
https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/index.html#Nth_page_selector

(source: https://github.com/vivliostyle/vivliostyle.js/tree/master/packages/core/test/files/nth-page)

I believe this issue is now resolved.

Paged media automation moved this from To do to Done Feb 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Paged media
  
Done
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants