1615 huylebroeck-html responsiveness

A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org
www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
1
PDF Days Europe 2017
How HTML responsiveness
translates to PDF
Samuel Huylebroeck
iText Software
1

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
A brief introduction
• Samuel Huylebroeck
• Support Engineer @ iText Software
• iText
• PDF Creation and Manipulation library
• In Java and .NET
• Open Source under AGPL
• Developed and maintained by iText Software
2

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
Presentation Overview
1. Introduction to HTML and CSS
2. Responsive Web design
3. Next Generation PDF: Concepts
4. Next Generation PDF: Creation
5. Summary
3

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
4

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• HTML
• Hypertext markup language
• Structured grouping of content
• HTML Tags
• Surround content
• Provide structural information
• Interpreted by Browsers
5
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
6
h1{h1{
color: red;color: red;
text-decoration: underline;text-decoration: underline;
}}
p{p{
color: black;color: black;
max-width: 70%;max-width: 70%;
}}
img{img{
width: 50%;width: 50%;
margin: 5pt;margin: 5pt;
}}
.bordered{.bordered{
border: solid 1px black;border: solid 1px black;
width: 20%;width: 20%;
margin: 2pt;margin: 2pt;
}}

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
2. Responsive Web Design
7

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
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
8

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
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.
9

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
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
10

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
11

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• Classic PDF: Challenges
• Static layout
• Representation does not respond to device capabilities
12

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
13

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• Classic PDF: Challenges
• Static layout
• Representation does not respond to device capabilities
• Content structure not required
14

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
15

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
16

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• Tagged PDF
• PDF 1.4
• Adds logical structure to a PDF
• Basic layout model
• Set of standard structures and attributes
17

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
18

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
19

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
20
• 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

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
21

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
22
• Next Generation PDF
• 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.)

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
• 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
• Horizontally oriented layout
• pdfHTML Tagging
• pdfHTML is built on iText7
• iText7 creates tag-structure during PDF Creation
23

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
5. Summary
24

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
5. Summary
• Responsive Webdesign
• 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
25

www.pdfa.org
2017-05-15
Samuel Huylebroeck,
Support Engineer
iText software
26
PDF Days Europe 2017
Thank you! Any questions?
Get in touch: samuel.Huylebroeck@itextpdf.com
Web site: www.itextpdf.com
Twitter: @iText
26

1615 huylebroeck-html responsiveness

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de iText Group nv

Mais de iText Group nv (17)

Último

Último (20)

1615 huylebroeck-html responsiveness

Notas do Editor