Vivliostyle as a replacement for Price or WeasyPrint

[cmahnke]

Is it possible to use vivliostyle-cli as a replacement for Prince or WeasyPrint? That is, the HTML to PDF renderer without any special setup / configuration and without the ned to have the source material also to be handled by Vivliostyle?

Since I want to use just a output generated by Hugo another requirement would be something like the --fileroot arg of Prince which handles correct resolution of relative URLs starting with a slash against a local directory.

Another benefit would be a mode that works like PagesJS where one can just run the layouter on the content of the current web page.

Maybe there are examples?

[MurakamiShinyu]

Vivliostyle has been developed as a tool that can convert HTML/CSS to PDF, just like Prince and WeasyPrint, so you should be able to use Vivliostyle CLI for that purpose.

If you find that a feature you need is missing (such as a feature like the --fileroot option), please open a feature request issue.

[cmahnke]

Thanks for the reply, I need to give it a try again, maybe without a configuration file.

Regarding the --fileroot option, I need to check first if it's working out of the box, if the working directory is correct. Just in case: Does it using a web server internally to feed data to the browser? If so, there won't be a problem if the working directory is the same as the web root, since resolving URLs starting with slash won't cause problems.

[MurakamiShinyu]

Another benefit would be a mode that works like PagesJS where one can just run the layouter on the content of the current web page.

Probably the following issue of Vivliostyle.js is the same request:

• URL questions for a standalone website vivliostyle.js#551

Both PagedJS and Vivliostyle.js perform page layout processing of HTML/CSS in the browser, but the difference is that PagedJS uses the normally loaded HTML document as input, while Vivliostyle.js uses the HTML document loaded with fetch() as input. It should be possible to add a mode to Vivliostyle.js that uses the normally loaded HTML document as input, just like PagedJS, but it has not been implemented yet.

[cmahnke]

Thanks again. Maybe it's a worthwile approach to check what happens if i feed document.documentElement.outerHTML into the parser?

Anyways, I'm need even sure yet if this is a valid requirement, since it's inspired by my current workflow: The paged.js is my way of having a debug (pre-)view.
If I try something like this, can this potentially have any negative effects (related to having a accurate layout)? Or would you advise to walk the extra mile and set up the viewer properly?

[MurakamiShinyu]

Since I want to use just a output generated by Hugo…

Vivliostyle is actually used to convert HTML generated by Hugo into PDF. How about trying hugo-theme-vivliocli?

• https://github.com/mochimochiki/hugo-theme-vivliocli

[MurakamiShinyu]

When you find a bug, please report it to https://github.com/vivliostyle/vivliostyle.js/issues or https://github.com/vivliostyle/vivliostyle-cli/issues with reproducible samples and steps.

[cmahnke]

Ok, for the first to issues I've created these:

• Resolution of JS files not working #661
• Unwanted break in some leaders vivliostyle.js#1598

On the footnotes I still try to pinpoint if that might be an issue on my side. I'm still not sure, some footnotes are working while others aren't, while even using a identical HTML stucture.

[cmahnke]

Before creating a new bug, I tried to check using Prince and it telles me it can't render many footnotes because the is not enough space. I suppose vivliostyle would tell me also (like in --log-level info)? I couldn't really figure out how to position footnotes absolutely, is this supported?

[cmahnke]

I've added vivliostyle/vivliostyle.js#1602 as feature request, since I'm quite lost here. I still can't rule out that this is my error, so I thought having a message will create some clarification.

[cmahnke]

Just a update on my project:
It's not completely finished yet, some texts are still missing, but the structure (and hopefully layout) is final. This is my current version:
The PDF version: https://xn--kleiderbgel-0hb.xn--blaufusstlpel-qmb.de/catalogue.pdf

One might also use the viewer here:
https://vivliostyle.org/viewer/#src=https://xn--kleiderbgel-0hb.xn--blaufusstlpel-qmb.de/print.html

But note that this version doesn't show the JS generated parts.

Except for two areas Vivliostyle works very well, one being the foot notes - I know that this is a active area of development (see vivliostyle/vivliostyle.js#1602), so I pre-render them, the other one is a bit more exotic: Styling JS components (see vivliostyle/vivliostyle-cli/#670). There I decided to reinject the component CSS after the layout pass.

It has been quite a journey to get that far and in the end i was quite a bit disappointed with the general state of CCS for print. I also wrote a blog article on that:
https://christianmahnke.de/en/post/paper-tiger-print-css/

This article isn't about Vivliostyle at all, but thanked this team for being helpful and supportive. If some of you have any feedback we could discuss it here. Thanks all!