Download
1 / 26
260 likes | 275 Views
This presentation provides a brief introduction to HTML and CSS, responsive web design, and the concepts and creation of the next generation PDF. Learn how to adapt and optimize PDFs for different devices and viewer capabilities.
E N D
PDF Days Europe 2017 How HTML responsiveness translates to PDF Samuel HuylebroeckiText Software 1
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
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 • HTML • 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 • 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: Intro • HTML • Fixed content • Representation depends on CSS • Responsive Design • Visualization is fluid • Adapt representation to the capabilities of the viewer
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
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
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 • 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
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 • 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.)
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 • Horizontally oriented layout • pdfHTML Tagging • pdfHTML is built on iText7 • iText7 creates tag-structure during PDF Creation
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
PDF Days Europe 2017 Thank you!Any questions? Get in touch: samuel.Huylebroeck@itextpdf.comWeb site: www.itextpdf.comTwitter: @iText 26
