How HTML responsiveness translates to PDF

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 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

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>

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:

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

Classic PDF: Challenges Static layout Representation does not respond to device capabilities

Classic PDF: Challenges Static layout Representation does not respond to device capabilities Content structure not required

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

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

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

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

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

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

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.)

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: Web site: Twitter: @iText 26

How HTML responsiveness translates to PDF

Similar presentations

Presentation on theme: "How HTML responsiveness translates to PDF"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

How HTML responsiveness translates to PDF

Similar presentations

Presentation on theme: "How HTML responsiveness translates to PDF"— Presentation transcript:

Similar presentations

About project

Feedback