How HTML responsiveness translates to PDF PDF Days Europe 2017 How HTML responsiveness translates to PDF Samuel Huylebroeck iText Software _Samuel Huylebroeck - iText Software_In this talk, we'll take a look at how web site designers use HTML and CSS to create a web site that looks well on every device. We'll convert this HTML to PDF, and discover how we can use CSS to create different PDFs, as if the PDF format itself was a special type of device. We'll play with media queries to render the PDF using different page sizes, using accessibility parameters, and intended use. By doing so, we'll make the case for a new format that bundles different variations of the same content in one file. 1
A brief introduction Samuel Huylebroeck iText Support Engineer @ iText Software iText PDF Creation and Manipulation library In Java and .NET Open Source under AGPL Developed and maintained by iText Software
Presentation Overview Introduction to HTML and CSS Responsive Web design Next Generation PDF: Concepts Next Generation PDF: Creation Summary
1. Introduction to HTML and CSS
1. Introduction to HTML and CSS Hypertext markup language Structured grouping of content HTML Tags Surround content Provide structural information Interpreted by Browsers <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <p>Hello World!</p> </body> </html>
1. Introduction to HTML and CSS Cascading Style Sheets Provide presentation information Layout, colors, fonts, etc. Inheritance and Classes Re-use of styles and style-elements HTML & CSS Separate content and presentation Different views for a single HTML file h1{ color: red; text-decoration: underline; } p{ color: black; max-width: 70%; img{ width: 50%; margin: 5pt; .bordered{ border: solid 1px black; width: 20%; margin: 2pt;
2. Responsive Web Design
2. Responsive Web Design: Intro HTML Fixed content Representation depends on CSS Responsive Design Visualization is fluid Adapt representation to the capabilities of the viewer Diagram from from: https://nl.wikipedia.org/wiki/Responsive_webdesign
2. Responsive Web Design: Why Diversification of device types A multitude of different devices that can browse the web are in circulation Smartphones, laptops, tablets, notebooks, print media, etc. Devices have varying capabilities Screen size Dynamic orientation from portrait to landscape and back Users have varying capabilities various forms of colourblindness, Near-sightedness, etc.
2. Responsive Web Design: How Media Queries Browser queries devices on capabilities Screen width, media-type, features Render view based on device capabilities Specialized CSS Change font, widths, image size, positions etc. based on query results Mobile screens: larger font-size, vertical flow, etc. Desktops & larger screens: horizontal placement, smaller font-size, etc. Print media: hide interactive and animated features
3. Next Generation PDF: Concepts
3. Next Generation PDF: Concepts Classic PDF: Challenges Static layout Representation does not respond to device capabilities
3. Next Generation PDF: Concepts
3. Next Generation PDF: Concepts Classic PDF: Challenges Static layout Representation does not respond to device capabilities Content structure not required
3. Next Generation PDF: Concepts Build on PDF 2.0 Aims to address Classic weaknesses Static layout Lack of structure Inspiration from responsive web design Multiple ways of presenting content Select best view based on viewer capabilities
3. Next Generation PDF: Concepts Address static layout by including alternate views in the PDF Base PDF Classic PDF Default view PDF Alternate(s) Possible alternate PDF representation of the same content Selectable based on viewing device or user preferences HTML alternate HTML version of the contents in the Base PDF
3. Next Generation PDF: Concepts Tagged PDF PDF 1.4 Adds logical structure to a PDF Basic layout model Set of standard structures and attributes Tagging resembles HTML document structure Not an exact correspondence Requirement in archiving and accessibility formats PDF/A-x PDF/UA Tagged PDF intended to be used by tools for text and graphic extraction automatic reflow processing text (indexing, searching, spell-checking) Conversion to other file formats Accessibility support Basic layout model: rules for describing arrangement of structure elements on a page
3. Next Generation PDF: Concepts Tagged PDF as a requirement Addresses lack of structure Derived HTML HTML produced from the Tagged PDF using the HTML-derivation algorithm Derive CSS from local styles
4. Next Generation PDF: Creation
4. Next Generation PDF: Creation PDF from HTML & CSS HTML is inherently structured CSS and media queries for alternative views Challenges Conversion from HTML and CSS to PDF syntax Not everything in HTML makes sense in the PDF context (Animations, audio, etc.) Pagination Floating elements to static coordinates Capability for generating multiple views Tailored CSS for each view Media query support Pagination: Content stay together Tables: splitting, repeating content, repeating headers Layout in iText7: Renderer framework, layout results Media query support: Link back to responsive design, put emphasis on parallels
4. Next Generation PDF: Creation Several HTML to PDF producers exist already iText pdfHTML Adobe Acrobat pdfChip Print from browser … Example using pdfHTML Creation of base PDF and alternate PDFs Using tailored CSS and media queries
4. Next Generation PDF: Creation Base content Alternate views of base content Requires PDF to be tagged pdfHTML HTML 5 + CSS 3 PDF Configurable (Device description, media queries, etc.) Customizable (Custom tag and CSS handling) Based on iText7 Support for tagging, high degree of control (page-sizes, etc.)
4. Next Generation PDF: Creation Input HTML CSS Output for mobile devices Vertically oriented layout Large font size Output for desktops Horizontally oriented layout Small font size Output for tablet-sized devices pdfHTML Tagging pdfHTML is built on iText7 iText7 creates tag-structure during PDF Creation CSS: column design
5. Summary
5. Summary Responsive Webdesign Classic PDF Challenges Adapt visualization to viewing device Classic PDF Challenges Static layout Can be without structure information Next Generation PDF More dynamic layout PDF Alternates Select best view based on viewer capabilities Structure information HTML Alternate Derived HTML Next Generation PDF Creation HTML and CSS as base Media queries
Thank you! Any questions? PDF Days Europe 2017 Thank you! Any questions? Get in touch: samuel.Huylebroeck@itextpdf.com Web site: www.itextpdf.com Twitter: @iText 26