search

Health-Sprints / A-Machine

A-Machine
GNU General Public License v3.0
1 stars 0 forks source link

Vivliostyle issues and workarounds on CSS Paged Media with multiple HTML files #4

Open MurakamiShinyu opened 3 years ago

MurakamiShinyu commented 3 years ago

Regarding the questions from @mrchristian:

a. Can we use a folder of multiple files HTML/XHTML or do we need to have one big file for maintaining things like consecutive numbering on image captions. b. Should we be using Adaptive Layout CSS or Paged Media CSS

I think the multiple files HTML/XHTML (see https://github.com/Health-Sprints/obp/issues/3 ) and Paged Media CSS will be better, because the content documents of EPUB and WebBook can be shared and Paged Media CSS is easier than Adaptive Layout CSS.

However, there are issues on Vivliostyle's CSS Paged Media implementation and we have to find some workarounds or quick fixes to the vivliostyle.js core.

Major issues are:

Running headers with chapter title

env(pub-title) and env(doc-title) can be used for running headers. See https://github.com/vivliostyle/vivliostyle.js/pull/512.

A workaround to hide page header/footer on chapter title pages

This workaround is made possible with the following bug fix:

See the test HTML for this issue: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/z-index-at-page.html

After this bug fix update (currenly available in the Canary version in https://vivliostyle.github.io/ ), the z-index property with a negative integer value on the page-margin boxes can be used to hide them with a page size box with background color.

Test with the Canary version of Vivliostyle Viewer: https://vivliostyle.now.sh/#src=https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/z-index-at-page.html

Another workaround

Another workaround is to make the chapter title page a separate HTML document and specify a different stylesheet than for the chapter body pages. This stylesheet will have content: none on each margin box in the @page {…} rule, and body { break-before: right; } for creating a blank page before the chapter title page (This solves the next question).

How to make a blank page (without page header/footer) before the chapter title page

"Another workaround" above can be also a workaround of this issue.

Better solution will be…

Fixing the Vivliostyle.js core, especially the following issues, will be the best:

Before fixing all of these, a partial fix of the last one may help:

  • the blank page generated by the break-before: left/right on the body element of the Nth document in a multi-document publication (like EPUB) has page-margin box content defined for the Nth document. (not for the (N-1)th document).

A partial fix of this bug:

This change will be a small fix and the behavior will be better than making wrong output. This partial fix will help until all fixes are complete.

mrchristian commented 3 years ago

Fantastic work, thank you for spending the time to look at these fixes and work around.

I'll need to spend some time mentally processing all of these - time to reach for a spreadsheet and do a little diagram work on figuring if all the issues have been captured to see if we can break through and get the automated multi-format typesetting working.

The combination of the fixes and adopting EPUB / Webbook as a packaging format is looking good, very good.

mrchristian commented 3 years ago

@rqpe we should try out these fixes.

MurakamiShinyu commented 3 years ago

As I wrote in the Vivliostyle Slack (link to the post), I am woking on some Vivliostyle issues:

The first one https://github.com/vivliostyle/vivliostyle.js/issues/670 is already done. See https://github.com/vivliostyle/vivliostyle.js/blob/master/CHANGELOG.md#220-2020-11-26

For the issue https://github.com/vivliostyle/vivliostyle.js/issues/666, the fix will be partial as I wrote above. It will be finished next week. The rest will be finished by the end of December, hopefully.

MurakamiShinyu commented 3 years ago

I added a comment to vivliostyle/vivliostyle.js#667: https://github.com/vivliostyle/vivliostyle.js/issues/667#issuecomment-738020563

As I wrote in this comment, now I think we should keep Vivliostyle's @page :first current behavior, i.e., select the first page of whole publication, and implement the new :nth() page pseudo-class that can select nth page within a (sub)document.

@page :nth(1) will be useful to change page margin and header/footer (e.g., hide folio) of each chapter title page.

MurakamiShinyu commented 3 years ago

Vivliostyle.js now supports named strings for running headers and footers https://github.com/vivliostyle/vivliostyle.js/pull/680

Spec: https://drafts.csswg.org/css-gcpm/#named-strings

Implements the named strings feature in CSS Generated Content for Paged Media Module.

  • string-set property
  • content() function
  • string() function

Tests:

  • packages/core/test/files/named-strings/named-strings.html
  • packages/core/test/files/named-strings/string-set-attr.html
  • packages/core/test/files/named-strings/string-set-content.html
MurakamiShinyu commented 3 years ago

Fixed the Vivliostyle.js issue break-before:left/right(verso/recto) at beginning of a document does not work properly.

See the tests and notes at https://github.com/vivliostyle/vivliostyle.js/issues/666#issuecomment-773708826.

This fix is now available with the latest canary release, and will be incorporated in the upcoming release, v2.5.0, that I will prepare when the next issue https://github.com/vivliostyle/vivliostyle.js/issues/667 is resolved.

MurakamiShinyu commented 3 years ago

I implemented the Nth page selector: https://github.com/vivliostyle/vivliostyle.js/pull/700

See the test (click "canary" links): https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/index.html#Nth_page_selector

We will release Vivliostyle.js v2.5.0 that supports the nth page selector soon after the final tests with the canary version.

MurakamiShinyu commented 3 years ago

Vivliostyle.js v2.5.0 is now available. In this release, 3 of 6 major issues I listed here have been resolved. The remaining issues and workarounds are as follows:

MurakamiShinyu commented 3 years ago

Finished implementing the named pages: https://github.com/vivliostyle/vivliostyle.js/pull/714 (closes https://github.com/vivliostyle/vivliostyle.js/issues/425)

Named pages are now available in the canary https://vivliostyle.now.sh and will be available soon in Vivliostyle.js v2.7 release.

mrchristian commented 3 years ago

thank you so much for this Shinyu, I'll now get on with adding all this work to a Fidus Writer output :-)

MurakamiShinyu commented 3 years ago

Finished implementing the :blank page selector: https://github.com/vivliostyle/vivliostyle.js/pull/721 (closes https://github.com/vivliostyle/vivliostyle.js/issues/428)

The :blank page selector is now available in Vivliostyle.js v2.8.0.