Paged.js – sneak peeks
Six months ago, Fred Chasen and Julie Blanc started to work on a library to paginate content in the browser. Today, that tool has a name, and even if it’s not bulletproof yet, I wanted to show an example of what we can do with it. And the best part is that it’s only the beginning.
What is the Paged Media initiative?
At the beginning of the year, we announced the Paged Media initiative as a community driven open source solution to help anyone who wants to print content with web technologies. Before looking at what we’ve been up to for the last five months, in upcoming articles, let’s have a look at what’s possible the gaps we’re trying to fill.
Paged Media approaches : page floats
In CSS specifications, the float property is very interesting. The property indicates that an element is to be removed from the normal flow and instead be placed into a different place – currently, on the right or left side of its container. Text and other inline elements will then surround the floated element.
Editoria — Building a Book in a Browser
A couple of years ago, the University of California Press and the California Digital Library partnered with Coko to begin an ambitious project to develop a workflow application that would allow books to be built in a browser using entirely open source technologies. Editoria is that app.
Introducing Hederis, and Why We Care So Much About Pagination
At Hederis, we’re combining the concepts of WYSIWYG design and automated publishing in an attempt to solve the problems I’ve seen time and again in both the traditional and automated book-making workflows.
Paged Media approaches (Part 2 of 2)
In the previous post, I wrote about different paged media approaches. Now, in Part 2, we focus on another method based on the CSS Paged Media Module and the CSS Generated Content for Paged Media Module.
OpenStax : One textbook, many displays
My presentation from the workshop covers extensive examples of OpenStax’s Sociology textbook in many different formats and locations and then looks at the ways that we use css and transforms to create print and web versions of the books that can be used coherently together.
Hey Yihui! Thanks for the kind words. :D And for having spotted that one! I fixed the article on that front. Thanks again!
Is `titleRun` in the post a typo? Should it be `runningTitle` instead? I'm very excited about paged.js! Thanks for the awesome work!
Hi ! If you use pagedjs, this specification is implemented, you don't need to increment the `counter(page)` or the `counter(pages)` to use it. You just need to add them to a margin box. You will find an example in this code: https://gitlab.pagedmedia.org/JulieBlanc/refs-specifications/blob/master/counter-pages/counter-pages.html Thank you for your feedback! Julie
Hi Julie Blanc, How are you.I want to count dynamic generated pages from HTMl to PDF using css or JS whatever.Is there any solution for this i have tried in many ways but unable to get the result as same.Like this.counter-increment: page ;content: "page " counter(page) " of " counter(pages);
Looks promising! I couldn't find any information on how paged.js compares to Vivliostyle. Are the goals of the two projects different? Why couldn't you build on Vivliostyle? Thanks for the clarification!
Thank you for the feedback! "Inline-start" and "inline-end "are indeed a better choice of keywords, I made the change in the demo and updated the article Finally, thanks for the links to open issues and discussions, I had no idea there were discussions about it.
Nice explanation and demo! I'd like to give some comments. In some keyword combinations of your proposal, "before" behaves like inline-start, and "after" behaves like inline-end. In Antenna House's page floats implementaion, the "before" keyword means block-start and "after" keyword means block-end. That was because of W3C's old logical (flow relative) direction terminology, before/after/start/end, that was used in the W3C XSL-FO spec and changed to block-start/block-end/inline-start/inline-end in 2013 CSS Writing Modes. So I think we should avoid "before" and "after" keywords here. I think we should use "inline-start" and "inline-end" keywords rather then "before" and "after". e.g. `float: block-start inline-end`. Please see also css-page-floats open issues on https://github.com/w3c/csswg-drafts/labels/css-page-floats-3 and the csswg "Page Floats Redesign" discussion minutes on https://lists.w3.org/Archives/Public/www-style/2017May/0052.html
Fantastic explanation. Thanks so much!