Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1615 huylebroeck-html responsiveness

119 views

Published on

Talk Samuel Huylebroeck at PDFDays Berlin 2017 - HTML Responsiveness

Published in: Software
  • Be the first to comment

  • Be the first to like this

1615 huylebroeck-html responsiveness

  1. 1. 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
  2. 2. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  3. 3. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  4. 4. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 1. Introduction to HTML and CSS 4
  5. 5. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 1. Introduction to HTML and CSS • 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>
  6. 6. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 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 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; }}
  7. 7. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 2. Responsive Web Design 7
  8. 8. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  9. 9. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  10. 10. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  11. 11. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 3. Next Generation PDF: Concepts 11
  12. 12. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 3. Next Generation PDF: Concepts • Classic PDF: Challenges • Static layout • Representation does not respond to device capabilities 12
  13. 13. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 3. Next Generation PDF: Concepts 13
  14. 14. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 3. Next Generation PDF: Concepts • Classic PDF: Challenges • Static layout • Representation does not respond to device capabilities • Content structure not required 14
  15. 15. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 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 15
  16. 16. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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 3. Next Generation PDF: Concepts 16
  17. 17. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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 3. Next Generation PDF: Concepts
  18. 18. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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 3. Next Generation PDF: Concepts
  19. 19. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 4. Next Generation PDF: Creation 19
  20. 20. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 4. Next Generation PDF: Creation 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
  21. 21. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 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 21
  22. 22. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 22 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.)
  23. 23. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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 4. Next Generation PDF: Creation
  24. 24. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org www.pdfa.org 2017-05-15 Samuel Huylebroeck, Support Engineer iText software 5. Summary 24
  25. 25. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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
  26. 26. A PDF Association Presentation · © 2017 by PDF Association · www.pdfa.org 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

×