Your SlideShare is downloading. ×

2011 09-pdfjs

1,283

Published on

Lightning talk abo

Lightning talk abo

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,283
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. pdf.jsJulian Viereck @jviereck
  • 2. Overview• What is pdf.js• How PDF is structured• Processing in pdf.js• Images & Fonts• Problems• Todo• Demo
  • 3. What is pdf.js• building faithful & efficient PDF renderer• HTML5 technology experiment• no native code• secure (web sandbox)• Mozilla Labs Project - Open Source
  • 4. How PDF is structured Header PDF version sequence of objets Body [Objects] fonts, drawing cmds, images, words, bookmarks, form fieldsxRef Table mapping objID byte offset Trailer root objID, xRef byte offset PDF file root obj = ref to pages catalog
  • 5. Processing in pdf.js• get plain Uint8Array via XHR2, build Stream• new PDFDoc(stream): read xRef, root object• page = PDFDoc.getPage(N) Internal• page.startRendering(graphics) Representation • read & convert all PDF cmds ➟ IR PartialEvaluator • load required objects (fonts, images) • graphics.executeIR(IR) CanvasGraphics
  • 6. 1. page=PDFDoc.getPage(2) 5 0 obj stream maybe ➟ obj#3 << encoded! /Length 8 0 R2. page.startRendering(...) >> ➟ obj#4, obj#5 stream /GS1 gs /F0 12 Tf 3 0 obj BT << 100 700 Td /Type /Page (Hello World!) Tj /MediaBox 0 612 792] [0 ET /Resources 4 0 R 50 600 m /Parent 2 0 R 400 600 l /Contents 5 0 R S >> endstream endobj endobj
  • 7. xRef, catalog, IR5 0 obj + resources PartialEvaluator Form<< /Length 8 0 R>> setGState: [ LW: 10 ] stream dependency: [ font0 ] /GS1 gs setFont: font0, 12 /F0 12 Tf beginText BT moveText: 100, 700 100 700 Td showText: “Hello World!” (Hello World!) Tj endText ET moveTo: 50, 600 50 600 m lineTo: 400, 600 400 600 l stroke S endstreamendobj CanvasGraphics
  • 8. Images• JPEG streams: • DOMImg.src = data:image/jpeg;base64, + window.btoa(bytesToString(bytes));• If not JPEG stream: • read bytes, convert to colorspace • imgData = canvas.getImageData() • fillWithPixelData(bytes, imgData) • canvas.putImageData(imgData)
  • 9. Fonts• There are lots of different font formats! • fonts are converted to OpenType • use CSS: @font-face { font-family:font0; src:url (data:font/opentype;base64, ...)• some fonts can’t be converted :( • use drawing commands?
  • 10. Problems platform = browser + OS• No way to detect font is loaded (hacks)• Font width (wrong on some platforms)• Subpixel font size depending on platform• Text selection• Printing• Speed • use workers (postMessage lose shape) • partial rendering
  • 11. Todo• more font work, printing, speed• support more rendering spec• explore using SVG• PDF forms, “advanced PDF features”• infrastructure: automated testing, requireJS• test more PDF (need your help!)
  • 12. Demo
  • 13. ContactGithub: https://github.com/andreasgal/pdf.jsMailing list: https://groups.google.com/group/mozilla.dev.pdf-js/topicsIRC: irc.mozilla.org #pdfjs

×