Print Books with Browsers Designing books in browsers using Paged.js - - PowerPoint PPT Presentation

▶
print books with browsers
SMART_READER_LITE
LIVE PREVIEW

Print Books with Browsers Designing books in browsers using Paged.js - - PowerPoint PPT Presentation

Apr 25, 2023 134 likes •825 views

Print Books with Browsers Designing books in browsers using Paged.js Julie Blanc (@julieblancfr) Digital Publishing Summit May 26, 2019 Automated typesetting and pagination for print Make PDF outputs of HTML contents from browsers Flux

slide-1
SLIDE 1

Print Books with Browsers

Designing books in browsers using Paged.js

Julie Blanc (@julieblancfr) Digital Publishing Summit – May 26, 2019

slide-2
SLIDE 2

Automated typesetting and pagination for print Make PDF outputs of HTML contents from browsers

slide-3
SLIDE 3

Flux → Pagination

slide-4
SLIDE 4

http://www.pagedmedia.org/

slide-5
SLIDE 5

PagedMedia Meeting, MIT Press Cambridge), January 9th, 2018

slide-6
SLIDE 6
slide-7
SLIDE 7

Problems

Proprietary vs. open-source (own) Rendering engines Non-standard properties No visual preview

slide-8
SLIDE 8

What we need

Open and free tool(s) Based on web standards Visual preview Automated workflows

slide-9
SLIDE 9

A free and open source JavaScript library that paginates content in browser to create PDF outputs from any HTML content

https://pagedmedia.org/paged-js

slide-10
SLIDE 10

Team

Founder: Adam Hyde Core team: Fred Chasen, Julie Blanc, Julien Taquet Funding: Shuttleworth Foundation

slide-11
SLIDE 11

Standards W3C

slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17

How paged.js works ?

slide-18
SLIDE 18

Fragmentation of the content (chunker) Transformation of CSS declarations (polisher) Preview (previewer)

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

Demo

slide-26
SLIDE 26

Page size and margins

slide-27
SLIDE 27
slide-28
SLIDE 28

Symetric margins

slide-29
SLIDE 29
slide-30
SLIDE 30

Page breaks

slide-31
SLIDE 31
slide-32
SLIDE 32

Page breaks

slide-33
SLIDE 33

Avoid page breaks

slide-34
SLIDE 34
slide-35
SLIDE 35

Page numbers

slide-36
SLIDE 36
slide-37
SLIDE 37

String-set (running headers and footers)

slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40

Pseudo class selectors for pages

slide-41
SLIDE 41

Blank pages

slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44

Named pages

slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47

Columns layout

slide-48
SLIDE 48
slide-49
SLIDE 49

Cross references

slide-50
SLIDE 50
slide-51
SLIDE 51

Collection of scripts

slide-52
SLIDE 52

External scripts

slide-53
SLIDE 53

Handlers

slide-54
SLIDE 54

Bleed and marks

slide-55
SLIDE 55
slide-56
SLIDE 56

Short live demo

gitlab.pagedmedia.org/samples

slide-57
SLIDE 57

What next for Paged.js ?

slide-58
SLIDE 58
slide-59
SLIDE 59

Footnotes

slide-60
SLIDE 60

Page floats

slide-61
SLIDE 61

demos.pagedmedia.org/page-floats

slide-62
SLIDE 62

Automated workflows

slide-63
SLIDE 63

CLI version

https://gitlab.pagedmedia.org/tools/pagedjs-cli

slide-64
SLIDE 64

Post Processing

pdf-lib (parsing and editing the structure) hummus (visual updates) Ghostscript (images and color color management)

slide-65
SLIDE 65

MIT licence Documentation - Website Community Mattermost)

slide-66
SLIDE 66

What about the future ?

Advocate for better support of print-related standards in browser engines

slide-67
SLIDE 67

julie-blanc.fr/slides (@julieblancfr) https://pagedmedia.org/paged-js

Core Hubs:
All Converters PDF Hub Video Hub Audio Hub Image Hub File Compressor