Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

1615 huylebroeck-html responsiveness

251 vues

Publié le

Talk Samuel Huylebroeck at PDFDays Berlin 2017 - HTML Responsiveness

Publié dans : Logiciels
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×