User:Bnstlv/paged-js

back to home

Paged.js | October 13th, 2022

On Oct 13th, 2022 I was part of a one-day long web-to-print workshop during which we dived into the capabilities of this platform. Paged.js is maintained by the nice folks at [https://coko.foundation Coco Foundation.

Links:

1. 1. Mattermost, a chat/community (registration needed)
   2. Discourse
2. Hybrid Project
3. Video recording
4. Paged Media CSS Examples

- Consider donating if you want to support their work!

>>Pad with all the notes<<

---

Mission and Vision (the WHY)

It is an open-source solution based on the following:

- "Political point of view: free access"
- "Pragmatic point of view: collaboration"

This makes it safe, autonomous and offers a great level of collaborativeness.

---

Short intro vocabulary:

• HTML = tool to write semantic content
• CSS = cascading style sheet
• Responsive = Erica “a lot of pain” :)) flexibility, adaptiveness
• Printed book = what is a book? what is a printed book?
  • book = traditional definition, content, fixed layouts
• Website
• Single source publishing = when we speak about printing from the web we don't think of the physical object itself (a book) but rather than the content that goes into a variety of many different formats;
• Flux = Pagination
• Missing features = running headers, page number, facing pages, page float, etc.

- Paged.js is there for the missing features
* based on W3C / specifications  (respect for standards)
* polyfill = tool that translates content code that implements features on web browsers that do not support the features (transforming content into the browser can understand!

---

How does Paged.js work?

And the steps we had to take during the day:

1. create a div in HTML
2. create a “page”
3. define the page's areas to put our content
4. features
   1. page sizes and margin (mm, but also px is fine)
   2. point is more precise than px for typography
   3. symmetric margins
   4. page breaks / but also we can avoid page breaks
   5. page numbers
   6. string-set (running headers and footers) - when titles are running out of the page and we want to place them onto the next
   7. pseudo class selectors for pages
   8. blank page
   9. naming pages (in case we have different types of pages and we want to give them a different layout as well, for example, we have 4 pages and for each one of them we can assign a different layout via this function)
   10. columns layout
   11. cross references = ex: see in this # page (referencing through CSS so we can refer the reader easily to a specific section of our work, text, book, etc)

Made with Paged.js
Great examples of people who used their platform to make publications.

• Controverses - the ++++ book!
• Waldenpond - a generative pdf platform, customised to your liking and what you want to read throughout the month (it's on a monthly basis)

HTML is amazing because it is a language that talks to all browsers. Yet, writing HTML is not easy, you need to create many things on your own. As a result, you have a complex language that could not be understood by the browser. Then, the print editor marks down the content (it limits you) and decides how a page should look like on print. So you need a solution that can help you write HTML easier, simple text files, etc. Paged.js restores that same conversation with the browser in order to tell it how your file should look and be printed. - by Julie Blanc

---

HANDS ON TIME!

What we needed to begin:

* a code editor
* a local server
* one of the starter kits
   **plugins
   **print a webpage
* suggestion for content from Gutenberg Project; About Johannes Gutenberg

GitHub & GitLab

• CSS Print
• CSS Print Issues
• Pagedjs main page on Gitlab

---

Here is what I did

• chose a book from the Gutenberg library about Mountaineering (I miss hiking and the Bulgarian mountains)
• exported the entire book in HTML
• opened the Paged.js and Jupyter Lab
• started editing the HTML and CSS but it was hard for men, did not know where to start
• Julie came to me and helped me beautify the HTML code. the code was too messy and hard to read and differentiate a parent from a child. We did it in Brackets. Stackoverflow to the rescue!
• get rid of almost the whole content (nothing personal tho) and left only two chapters, because it was hard to digest the information and so I scaled it down to 20 pages
• changed the cover image, aligned the book title to improve reliability and made the background color beige
• tried to fix the rest of the images to better fit inside the pages but I lost the battle
• at the end of our hands-on session, I finally started to understand what I was doing but the time was up
• each one of us (xpub 1 & 2) presented our works
• to me, the whole experience felt a bit like hiking, difficult, and tiring but rewarding. I managed to get to the base camp which was the most important!
• J&J are super cool people, helpful and encouraging, and have a great sense of humour!

Final thoughts:

- Paged.js = great solution, good cause
- Really liked everyone’s take on the task
- I was impressed by Chae's pdf that captures the moment (using gifs in pdf)