Presentation given at #mozcamp 2011 in Berlin about PDF.JS

1. PDF.JS
Julian Viereck
@jviereck
jviereck.dev@gmail.com

3. Bespin
Skywriter
Ace

4. Bespin
Firefox
Skywriter
DevTools
Ace

5. Bespin
Firefox ETH
Skywriter
DevTools Zurich
Ace

6. Bespin
Firefox ETH
?
Skywriter PDF.JS
DevTools Zurich
Ace

7. Overview
• What is PDF.JS
• How PDF is structured
• Processing in PDF.JS
• Images & Fonts
• Infrastructure
• Problems & Todos
• Demo

8. What is PDF.JS

9. What is PDF.JS
• building faithful & efficient PDF renderer

10. What is PDF.JS
• building faithful & efficient PDF renderer
• HTML5 technology experiment

11. What is PDF.JS
• building faithful & efficient PDF renderer
• HTML5 technology experiment
• no native code

12. What is PDF.JS
• building faithful & efficient PDF renderer
• HTML5 technology experiment
• no native code
• secure (web sandbox)

13. What is PDF.JS
• building faithful & efficient PDF renderer
• HTML5 technology experiment
• no native code
• secure (web sandbox)
• Mozilla Labs Project - Open Source

14. Most vulnerable programs
Source: http://www.csis.dk/en/csis/news/3321

15. How PDF is structured
PDF file

16. How PDF is structured
Header PDF version
PDF file

17. How PDF is structured
Header PDF version
sequence of objets
Body
[Objects] fonts, drawing cmds, images,
words, bookmarks, form fields
PDF file

18. How PDF is structured
Header PDF version
sequence of objets
Body
[Objects] fonts, drawing cmds, images,
words, bookmarks, form fields
xRef Table mapping objID byte offset
PDF file

19. How PDF is structured
Header PDF version
sequence of objets
Body
[Objects] fonts, drawing cmds, images,
words, bookmarks, form fields
xRef Table mapping objID byte offset
Trailer root objID, xRef byte offset
PDF file root obj = ref to pages catalog

20. Processing in PDF.JS

21. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream

22. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object

23. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N)

24. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N)
• page.startRendering(graphics)

25. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N)
• page.startRendering(graphics)
• read & convert all PDF cmds ➟ IR

26. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N) Intermediate
• page.startRendering(graphics) Representation
• read & convert all PDF cmds ➟ IR

27. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N) Intermediate
• page.startRendering(graphics) Representation
• read & convert all PDF cmds ➟ IR PartialEvaluator

28. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N) Intermediate
• page.startRendering(graphics) Representation
• read & convert all PDF cmds ➟ IR PartialEvaluator
• load required objects (fonts, images)

29. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N) Intermediate
• page.startRendering(graphics) Representation
• read & convert all PDF cmds ➟ IR PartialEvaluator
• load required objects (fonts, images)
• graphics.executeIR(IR)

30. Processing in PDF.JS
• get plain Uint8Array via XHR2, build Stream
• new PDFDoc(stream): read xRef, root object
• page = PDFDoc.getPage(N) Intermediate
• page.startRendering(graphics) Representation
• read & convert all PDF cmds ➟ IR PartialEvaluator
• load required objects (fonts, images)
• graphics.executeIR(IR) CanvasGraphics

31. Why IR?
Data

32. Why IR?
Partial
Data
Evaluator

33. Why IR?
Partial
Data
Evaluator

34. Why IR?
“get page 2” Partial
Data
Evaluator

35. Why IR?
“get page 2” Partial
Data
Evaluator
builds

36. Why IR?
“get page 2” Partial
Data
Evaluator
builds
draw(
obj#3,
dict.x,
dict.y
)

37. Why IR?
“get page 2” Partial
Data
Evaluator
builds
draw(
obj#3,
Graphics dict.x,
dict.y
)

38. Why IR?
“get page 2” Partial
Data
Evaluator
builds
draw(
obj#3,
Graphics dict.x,
dict.y
)

39. Why IR?
“get page 2” Partial
Data
Evaluator
builds
draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)

40. Why IR?
“get page 2” Partial
Data
Evaluator
obj#3? builds
dict.x, .y?
draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)

41. Why IR?
“get page 2” Partial
Data
Evaluator
obj#3? builds
dict.x, .y?
draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)

42. Why IR?
“get page 2” Partial
Data
Evaluator
obj#3? obj#3 = ”foo” builds
dict.x, .y? x = 20
y = 30 draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)

43. Why IR?
“get page 2” Partial
Data
Evaluator
obj#3? obj#3 = ”foo” builds
dict.x, .y? x = 20
y = 30 draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)

44. Why IR?
“get page 2” Partial
Data
Evaluator
obj#3? obj#3 = ”foo” builds
dict.x, .y? x = 20
y = 30 draw(
obj#3,
Graphics dict.x,
drawing cmds dict.y
)
draw on
canvas

45. Problem Processing

46. Problem Processing
• Extracting data slow (compressed)

47. Problem Processing
• Extracting data slow (compressed)
• Transform data (images) slow

48. Problem Processing
• Extracting data slow (compressed)
• Transform data (images) slow
• Sometimes a lot of objects on page

49. Problem Processing
• Extracting data slow (compressed)
• Transform data (images) slow
• Sometimes a lot of objects on page
➡ Freezes UI

50. Problem Processing
• Extracting data slow (compressed)
• Transform data (images) slow
• Sometimes a lot of objects on page
➡ Freezes UI
➡ Use WebWorker

51. Problem Processing
• Extracting data slow (compressed)
• Transform data (images) slow
• Sometimes a lot of objects on page
➡ Freezes UI
➡ Use WebWorker
➡ :( no direct memory access, postMessage

52. Main Web
Thread Worker
Data

53. Main Web
Thread Worker
Partial
Data
Evaluator

54. Main Web
Thread Worker
data Partial
Data
“get page 2” Evaluator

55. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator

56. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds

57. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
obj#3,
dict.x,
dict.y
)

58. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
obj#3,
dict.x,
dict.y
)

59. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw(
obj#3,
“foo”,
dict.x,
20,
dict.y
30
)
)

60. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw( IR
obj#3,
“foo”,
dict.x,
20,
dict.y
30
)
)

61. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw( IR
obj#3,
“foo”,
Graphics dict.x,
20,
dict.y
30
)
)

62. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw( IR
obj#3,
“foo”,
Graphics dict.x,
IR cmds 20,
dict.y
30
)
)

63. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw( IR
obj#3,
“foo”,
Graphics dict.x,
IR cmds 20,
dict.y
30
)
)

64. Main Web
Thread Worker
data Partial
Data Data
“get page 2” Evaluator
builds
draw(
draw( IR
obj#3,
“foo”,
Graphics dict.x,
IR cmds 20,
dict.y
30
)
draw on )
canvas

66. 5 0 obj
<<
/Length 8 0 R
>>
stream
/GS1 gs
/F0 12 Tf
BT
100 700 Td
(Hello World!) Tj
ET
50 600 m
400 600 l
S
endstream
endobj

67. 5 0 obj PartialEvaluator
<<
/Length 8 0 R
>>
stream
/GS1 gs
/F0 12 Tf
BT
100 700 Td
(Hello World!) Tj
ET
50 600 m
400 600 l
S
endstream
endobj

68. 5 0 obj xRef, catalog,
+ resources PartialEvaluator
<<
/Length 8 0 R
>>
stream
/GS1 gs
/F0 12 Tf
BT
100 700 Td
(Hello World!) Tj
ET
50 600 m
400 600 l
S
endstream
endobj

69. 5 0 obj xRef, catalog,
+ resources PartialEvaluator
<<
/Length 8 0 R
>>
stream
/GS1 gs
/F0 12 Tf
BT
100 700 Td
(Hello World!) Tj
ET
50 600 m
400 600 l
S
endstream
endobj Graphics

70. 5 0 obj xRef, catalog,
+ resources PartialEvaluator
<<
/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
endstream
endobj Graphics

71. 5 0 obj xRef, catalog,
+ resources PartialEvaluator
<<
/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
endstream
endobj Graphics

72. 5 0 obj xRef, catalog, IR
+ resources PartialEvaluator
<<
/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
endstream
endobj Graphics

73. Images

74. Images
• JPEG streams:

75. Images
• JPEG streams:
• DOMImg.src = 'data:image/jpeg;base64,'
+ window.btoa(bytesToString(bytes));

76. Images
• JPEG streams:
• DOMImg.src = 'data:image/jpeg;base64,'
+ window.btoa(bytesToString(bytes));
• If not JPEG stream:

77. Images
• JPEG streams:
• DOMImg.src = 'data:image/jpeg;base64,'
+ window.btoa(bytesToString(bytes));
• If not JPEG stream:
• read bytes, convert to colorspace

78. 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()

79. 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)

80. 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)

81. Jpeg, but...

82. Jpeg, but...
• no natives support for CMYK Jpeg

83. Jpeg, but...
• no natives support for CMYK Jpeg
➡ use JS implementation

84. Jpeg, but...
• no natives support for CMYK Jpeg
➡ use JS implementation
• no native support for Jpeg 2000

85. Jpeg, but...
• no natives support for CMYK Jpeg
➡ use JS implementation
• no native support for Jpeg 2000
➡ use EMScripten: C-Lib ➟ JS

86. Jpeg, but...
• no natives support for CMYK Jpeg
➡ use JS implementation
• no native support for Jpeg 2000
➡ use EMScripten: C-Lib ➟ JS
‣ works, but not that performant

87. Fonts

88. Fonts
• There are lots of different font formats!

89. Fonts
• There are lots of different font formats!
• fonts are converted to OpenType

90. 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, ...)

91. 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 :(

92. 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 :(
• paint them

93. Fonts
Type I convert to Type II
Type II “use directly”
Type III paint ourself
CDI convert to Type II

94. Fonts
Type I convert to Type II
still need
Type II “use directly” to repair
fonts!
Type III paint ourself
CDI convert to Type II

95. Infrastructure

96. Infrastructure
• Using GitHub

97. Infrastructure
• Using GitHub
• Issue Tracker

98. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests

99. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests
• Wiki

100. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests
• Wiki
• Update gh-pages on every push

101. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests
• Wiki
• Update gh-pages on every push
• Testing:

102. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests
• Wiki
• Update gh-pages on every push
• Testing:
• In Pull Request: “@pdfjsbot test”

103. Infrastructure
• Using GitHub
• Issue Tracker
• Pull Requests
• Wiki
• Update gh-pages on every push
• Testing:
• In Pull Request: “@pdfjsbot test”
• Runs tests on AC2 instance

106. Infrastructure

107. Infrastructure
• AreWePdfYet?

108. Infrastructure
• AreWePdfYet?
• Take top100 PDFs from Google

109. Infrastructure
• AreWePdfYet?
• Take top100 PDFs from Google
• render the first 5 pages each

110. Infrastructure
• AreWePdfYet?
• Take top100 PDFs from Google
• render the first 5 pages each
• compare to Preview

111. Infrastructure
• AreWePdfYet?
• Take top100 PDFs from Google
• render the first 5 pages each
• compare to Preview
• http://people.mozilla.com/~bdahl/
corpusreport/test/ref/

112. Todo = Help :)

113. Worker Canvas

114. 'Read-Only' Memory
Web Worker

115. Faster Canvas
Rendering

116. CMYK Jpeg
Jpeg2000

117. Font Load Event

118. WebPrint API

119. XHR Range Support

120. Font Support

121. Parallel Web Worker

122. SVG Backend
(text selection [Gecko])

123. “HTML5” Backend

124. Search | Selection | Copy

125. Input Forms

126. More Parts Of Spec

127. Improve Viewer

128. Pref & Memory
Analysis

129. Improve Test
Infrastructure

130. More Testing!

131. More Testing
• use PDF.JS extension!
• http://mozilla.github.com/pdf.js/extensions/
firefox/pdf.js.xpi
• report broken PDFs!
• help us categorize issues

132. Feedback Feature

133. Demo

134. Github: Readme
https://github.com/mozilla/pdf.js Issues
Wiki
Twitter:
@pdfjs
Mailing List:
https://groups.google.com/group/
mozilla.dev.pdf-js/topics
IRC:
irc.mozilla.org #pdfjs
Engineering Weekly Call:
Thursday - 10:00am PDT, 17:00 UTC

135. Q &A