archive-gh-me/pdfkit
1
0
Fork 0
mirror of https://github.com/foliojs/pdfkit.git synced 2026-01-25 16:06:44 +00:00
Code Issues Projects Releases Wiki Activity

Add generated docs for Github pages

Browse Source
This commit is contained in:
Devon Govett 2014-02-22 23:45:38 -08:00
parent 6b0846c68f
commit 0c276dfcd0
29 changed files with 1063 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -7,6 +7,4 @@ src/
playground/
build/
js/
demo/bundle.js
*.html
!demo/browser.html
playground/

4
docs/.gitignore vendored
View File

@ -1,4 +0,0 @@
*.html
css/
img/
js/

89
docs/annotations.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Annotations in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/annotations.html" class="selected">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="annotations_in_pdfkit">Annotations in PDFKit</h1>
<p>Annotations are interactive features of the PDF format, and they make it
possible to include things like links and attached notes, or to highlight,
underline or strikeout portions of text. Annotations are added using the
various helper methods, and each type of annotation is defined by a rectangle
and some other properties. Here is a list of the available annotation methods:</p>
<ul><li><code>note(x, y, width, height, contents, options)</code></li><li><code>link(x, y, width, height, url, options)</code></li><li><code>highlight(x, y, width, height, options)</code></li><li><code>underline(x, y, width, height, options)</code></li><li><code>strike(x, y, width, height, options)</code></li><li><code>lineAnnotation(x1, y1, x2, y2, options)</code></li><li><code>rectAnnotation(x, y, width, height, options)</code></li><li><code>ellipseAnnotation(x, y, width, height, options)</code></li><li><code>textAnnotation(x, y, width, height, text, options)</code></li></ul>
<p>Many of the annotations have a <code>color</code> option that you can specify. You can
use an array of RGB values, a hex color, or a named CSS color value for that
option.</p>
<p>If you are adding an annotation to a piece of text, such as a link or
underline, you will need to know the width and height of the text in order to
create the required rectangle for the annotation. There are two methods that
you can use to do that. To get the width of any piece of text in the current
font, just call the <code>widthOfString</code> method with the string you want to
measure. To get the line height in the current font, just call the
<code>currentLineHeight</code> method.</p>
<p>You must remember that annotations have a stacking order. If you are putting
more than one annotation on a single area and one of those annotations is a
link, make sure that the link is the last one you add, otherwise it will be
covered by another annotation and the user won&#39;t be able to click it.</p>
<hr/>
<p>Here is an example that uses a few of the annotation types.</p>
<pre><code># Add the link text
doc.fontSize(25)
.fillColor(&#39;blue&#39;)
.text(&#39;This is a link!&#39;, 20, 0)
# Measure the text
width = doc.widthOfString(&#39;This is a link!&#39;)
height = doc.currentLineHeight()
# Add the underline and link annotations
doc.underline(20, 0, width, height, color: &#39;blue&#39;)
.link(20, 0, width, height, &#39;http://google.com/&#39;)
# Create the highlighted text
doc.moveDown()
.fillColor(&#39;black&#39;)
.highlight(20, doc.y, doc.widthOfString(&#39;This text is highlighted!&#39;), height)
.text(&#39;This text is highlighted!&#39;)
# Create the crossed out text
doc.moveDown()
.strike(20, doc.y, doc.widthOfString(&#39;STRIKE!&#39;), height)
.text(&#39;STRIKE!&#39;)</code></pre>
<p>The output of this example looks like this.</p>
<p><img src="img/15.png"/></p>
<p>Annotations are currently not the easiest things to add to PDF documents, but
that is the fault of the PDF spec itself. Calculating a rectangle manually isn&#39;t
fun, but PDFKit makes it easier for a few common annotations applied to text, including
links, underlines, and strikes. Here&#39;s an example showing two of them:</p>
<pre><code>doc.fontSize 20
.fillColor &#39;red&#39;
.text &#39;Another link!&#39;, 20, 0,
link: &#39;http://apple.com/&#39;,
underline: true</code></pre>
<p>The output is as you&#39;d expect:</p>
<p><img src="img/16.png"/></p>
<h1>You made it!</h1>
<p>That&#39;s all there is to creating PDF documents in PDFKit. It&#39;s really quite
simple to create beautiful multi-page printable documents using Node.js!</p>
<p>This guide was actually generated from Markdown/Literate CoffeeScript files using a
PDFKit generation script. The examples are actually run to generate the output shown
inline. The script generates both the website and the PDF guide, and
can be found <a href="http://github.com/devongovett/pdfkit/tree/master/docs/generate.coffee">on Github</a>.
Check it out if you want to see an example of a slightly more complicated renderer using
a parser for Markdown and a syntax highlighter.</p>
<p>If you have any questions about what you&#39;ve learned in this guide, please don&#39;t
hesitate to <a href="http://twitter.com/devongovett">ask the author</a> or post an issue
on <a href="http://github.com/devongovett/pdfkit/issues">Github</a>. Enjoy!</p><nav><a href="/docs/images.html" class="previous">Previous</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>

125
docs/css/github.css Normal file
View File

@ -0,0 +1,125 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block; padding: 0.5em;
color: #333;
background: #f8f8f8
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #099;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: #d14
}
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold
}
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
font-weight: normal
}
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080
}
.hljs-regexp {
color: #009926
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073
}
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
color: #0086b3
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold
}
.hljs-deletion {
background: #fdd
}
.hljs-addition {
background: #dfd
}
.diff .hljs-change {
background: #0086b3
}
.hljs-chunk {
color: #aaa
}

123
docs/css/index.css Normal file
View File

@ -0,0 +1,123 @@
body {
font-family: 'Merriweather';
margin: 0;
}
h1 {
font-size: 40px;
margin-bottom: 0;
}
h1, h2, h3 {
font-family: 'Alegreya';
font-weight: 700;
}
h1 + h2 {
margin-top: 0;
}
body > nav {
display: block;
position: fixed;
width: 250px;
height: 100%;
background: #F4F4F4;
font-size: 15px;
padding-right: 10px;
}
nav > ul {
padding-top: 25px;
padding-left: 15px;
list-style-type: none;
}
nav li > ul {
padding-left: 20px;
list-style-type: none;
}
hr {
display: none;
}
body > nav a {
text-decoration: none;
color: #555;
padding-left: 20px;
text-indent: -20px;
display: inline-block;
padding-bottom: 7px;
}
body > nav > ul > li > a {
font-weight: bold;
}
nav a.selected {
color: #AA0000;
}
.main {
position: absolute;
left: 310px;
top: 0;
width: 800px;
padding-bottom: 20px;
}
.main a[href] {
color: #AA0000;
}
.main a[href]:active {
text-shadow: rgba(170, 0, 0, 0.5) 0 0 20px;
}
code {
font-size: 14px;
font-family: 'Source Code Pro';
font-weight: 700;
}
pre {
white-space: pre-wrap;
}
pre code {
font-weight: 400;
}
p {
line-height: 1.5em;
}
.main nav {
display: block;
position: relative;
height: 24px;
}
.main nav .next {
position: absolute;
right: 0;
top: 0;
}
.main ul {
padding-left: 25px;
}
.main ul li {
padding: 3px 0;
}
#documentation, #documentation + p {
display: none;
}
h1#pdfkit + h2 {
margin-top: 0;
font-size: 1.2em;
}

85
docs/getting_started.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Getting Started with PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html" class="selected">Getting Started </a><ul><li><a href="#installation">Installation</a></li><li><a href="#creating_a_document">Creating a document</a></li><li><a href="#adding_pages">Adding pages</a></li><li><a href="#setting_document_metadata">Setting document metadata</a></li><li><a href="#adding_content">Adding content</a></li><li><a href="#saving_the_document">Saving the document</a></li></ul></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/annotations.html">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="getting_started_with_pdfkit">Getting Started with PDFKit</h1>
<h2 id="installation">Installation</h2>
<p>Installation uses the <a href="http://npmjs.org/">npm</a> package manager. Just type the
following command after installing npm.</p>
<pre><code>npm install pdfkit</code></pre>
<h2 id="creating_a_document">Creating a document</h2>
<p>Creating a PDFKit document is quite simple. Just require the <code>pdfkit</code> module
in your CoffeeScript or JavaScript source file and create an instance of the
<code>PDFDocument</code> class.</p>
<pre><code>PDFDocument = require &#39;pdfkit&#39;
doc = new PDFDocument</code></pre>
<h2 id="adding_pages">Adding pages</h2>
<p>The first page of a PDFKit document is added for you automatically when you
create the document. Subsequent pages must be added by you. Luckily, it is
quite simple!</p>
<pre><code>doc.addPage()</code></pre>
<p>You can also set some options for the page, such as it&#39;s size and orientation.</p>
<p>The <code>layout</code> property can be either <code>portrait</code> (the default) or <code>landscape</code>.
The <code>size</code> property can be either an array specifying <code>[width, height]</code> in PDF
points (72 per inch), or a string specifying a predefined size. A
list of the predefined paper sizes can be seen <a href="http://pdfkit.org/docs/paper_sizes.html">here</a>. The
default is <code>letter</code>.</p>
<p>Passing a page options object to the <code>PDFDocument</code> constructor will
set the default paper size and layout for every page in the document, which is
then overridden by individual options passed to the <code>addPage</code> method.</p>
<p>You can set the page margins in two ways. The first is by setting the <code>margin</code>
property (singular) to a number, which applies that margin to all edges. The
other way is to set the <code>margins</code> property (plural) to an object with <code>top</code>,
<code>bottom</code>, <code>left</code>, and <code>right</code> values. The default is a 1 inch (72 point) margin
on all sides.</p>
<p>For example:</p>
<pre><code># Add a 50 point margin on all sides
doc.addPage
margin: 50
# Add different margins on each side
doc.addPage
margins: { top: 50, bottom: 50, left: 72, right: 72 }</code></pre>
<hr/>
<h2 id="setting_document_metadata">Setting document metadata</h2>
<p>PDF documents can have various metadata associated with them, such as the
title, or author of the document. You can add that information by adding it to
the <code>doc.info</code> object, or by passing an info object into the document at
creation time.</p>
<p>Here is a list of all of the properties you can add to the document metadata.
According to the PDF spec, each property must have it&#39;s first letter
capitalized.</p>
<ul><li><code>Title</code> - the title of the document</li><li><code>Author</code> - the name of the author</li><li><code>Subject</code> - the subject of the document</li><li><code>Keywords</code> - keywords associated with the document</li><li><code>CreationDate</code> - the date the document was created (added automatically by PDFKit)</li><li><code>ModDate</code> - the date the document was last modified</li></ul>
<h2 id="adding_content">Adding content</h2>
<p>Once you&#39;ve created a <code>PDFDocument</code> instance, you can add content to the
document. Check out the other sections to the left under &quot;Documentation&quot; to
learn about each type of content you can add.</p>
<h2 id="saving_the_document">Saving the document</h2>
<p>When you are ready to write the PDF document to a file, just call the <code>write</code>
method with a filename. If you want to send the document in response to an
HTTP request, or just need a string representation of the document, just call
the <code>output</code> method.</p>
<p>That&#39;s the basics! Now let&#39;s move on to PDFKit&#39;s powerful vector graphics
abilities.</p><nav><a href="/docs/../index.html" class="previous">Previous</a><a href="/docs/vector.html" class="next">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>

39
docs/images.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Images in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html" class="selected">Images </a></li><li><a href="/docs/annotations.html">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="images_in_pdfkit">Images in PDFKit</h1>
<p>Adding images to PDFKit documents is an easy task. Just pass an image path to
the <code>image</code> method along with some optional arguments. PDFKit supports the
JPEG and PNG formats. If an X and Y position are not provided, the image is
rendered at the current point in the text flow (below the last line of text).
Otherwise, it is positioned absolutely at the specified point. The image will
be scaled according to the following options.</p>
<ul><li>Neither <code>width</code> or <code>height</code> provided - image is rendered at full size</li><li><code>width</code> provided but not <code>height</code> - image is scaled proportionally to fit in the provided <code>width</code></li><li><code>height</code> provided but not <code>width</code> - image is scaled proportionally to fit in the provided <code>height</code></li><li>Both <code>width</code> and <code>height</code> provided - image is stretched to the dimensions provided</li><li><code>scale</code> factor provided - image is scaled proportionally by the provided scale factor</li><li><code>fit</code> array provided - image is scaled proportionally to fit within the passed width and height</li></ul>
<p>Here is an example showing some of these options.</p>
<pre><code># Scale proprotionally to the specified width
doc.image(&#39;images/test.jpeg&#39;, 0, 15, width: 300)
.text(&#39;Proprotional to width&#39;, 0, 0)
# Fit the image within the dimensions
doc.image(&#39;images/test.jpeg&#39;, 320, 15, fit: [100, 100])
.rect(320, 15, 100, 100)
.stroke()
.text(&#39;Fit&#39;, 320, 0)
# Stretch the image
doc.image(&#39;images/test.jpeg&#39;, 320, 145, width: 200, height: 100)
.text(&#39;Stretch&#39;, 320, 130)
# Scale the image
doc.image(&#39;images/test.jpeg&#39;, 320, 280, scale: 0.25)
.text(&#39;Scale&#39;, 320, 265)</code></pre>
<hr/>
<p>This example produces the following output:</p>
<p><img src="img/14.png"/></p>
<p>That is all there is to adding images to your PDF documents with PDFKit. Now
let&#39;s look at adding annotations.</p><nav><a href="/docs/text.html" class="previous">Previous</a><a href="/docs/annotations.html" class="next">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>

BIN
docs/img/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
docs/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
docs/img/10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
docs/img/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/img/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
docs/img/13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/img/14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 944 KiB

BIN
docs/img/15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/img/16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
docs/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
docs/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
docs/img/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/img/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
docs/img/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
docs/img/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/img/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
docs/img/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
docs/js/highlight.pack.js Normal file
View File

File diff suppressed because one or more lines are too long

38
docs/js/scroll.js Normal file
View File

@ -0,0 +1,38 @@
$(function() {
$('pre code').addClass('hljs coffeescript');
hljs.initHighlightingOnLoad();
var sections = $("h2[id]");
window.onhashchange = function() {
$("a.selected").removeClass("selected");
$("a[href=" + location.hash + "]").addClass('selected');
}
$(window).bind("mousewheel DOMMouseScroll", function() {
var scrollTop = $(window).scrollTop() + document.documentElement.clientHeight / 3,
section = null,
link = null;
for (var i = 0, len = sections.length; i < len; i++) {
var top = sections.eq(i).offset().top;
if (i < len - 1) {
var nextTop = sections.eq(i + 1).offset().top;
if (scrollTop > top && scrollTop < nextTop) {
section = sections[i].id;
break;
}
}
}
if (!section) {
section = sections[len - 1].id;
}
link = $("a[href$=#" + section + "]");
if (!link.hasClass('selected')) {
$("a.selected").removeClass('selected');
link.addClass('selected');
}
});
});

170
docs/text.html Normal file
View File

@ -0,0 +1,170 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Text in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html" class="selected">Text </a><ul><li><a href="#the_basics">The basics</a></li><li><a href="#line_wrapping_and_justification">Line wrapping and justification</a></li><li><a href="#text_styling">Text styling</a></li><li><a href="#rich_text">Rich Text</a></li><li><a href="#fonts">Fonts</a></li></ul></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/annotations.html">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="text_in_pdfkit">Text in PDFKit</h1>
<h2 id="the_basics">The basics</h2>
<p>PDFKit makes adding text to documents quite simple, and includes many options
to customize the display of the output. Adding text to a document is as simple
as calling the <code>text</code> method.</p>
<pre><code>doc.text &#39;Hello world!&#39;</code></pre>
<p>Internally, PDFKit keeps track of the current X and Y position of text as it
is added to the document. This way, subsequent calls to the <code>text</code> method will
automatically appear as new lines below the previous line. However, you can
modify the position of text by passing X and Y coordinates to the <code>text</code>
method after the text itself.</p>
<pre><code>doc.text &#39;Hello world!&#39;, 100, 100</code></pre>
<p>If you want to move down or up by lines, just call the <code>moveDown</code> or <code>moveUp</code>
method with the number of lines you&#39;d like to move (1 by default).</p>
<h2 id="line_wrapping_and_justification">Line wrapping and justification</h2>
<p>PDFKit includes support for line wrapping out of the box! If no options are
given, text is automatically wrapped within the page margins and placed in the
document flow below any previous text, or at the top of the page. PDFKit
automatically inserts new pages as necessary so you don&#39;t have to worry about
doing that for long pieces of text. PDFKit can also automatically wrap text
into multiple columns.</p>
<p>If you pass a specific X and Y position for the text, it will not wrap unless
you also pass the <code>width</code> option, setting the width the text should be wrapped
to. If you set the <code>height</code> option, the text will be clipped to the number of
lines that can fit in that height.</p>
<p>When line wrapping is enabled, you can choose a text justification. There are
four options: <code>left</code> (the default), <code>center</code>, <code>right</code>, and <code>justify</code>. They
work just as they do in your favorite word processor, but here is an example
showing their use in a text box.</p>
<pre><code>lorem = &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia. Sed eu leo in turpis fringilla hendrerit. Ut nec accumsan nisl.&#39;
doc.fontSize 8
doc.text &#39;This text is left aligned. &#39; + lorem,
width: 410
align: &#39;left&#39;
doc.moveDown()
doc.text &#39;This text is centered. &#39; + lorem,
width: 410
align: &#39;center&#39;
doc.moveDown()
doc.text &#39;This text is right aligned. &#39; + lorem,
width: 410
align: &#39;right&#39;
doc.moveDown()
doc.text &#39;This text is justified. &#39; + lorem,
width: 410
align: &#39;justify&#39;
# draw bounding rectangle
doc.rect(doc.x, 0, 410, doc.y).stroke()</code></pre>
<p>The output of this example, looks like this:</p>
<p><img src="img/10.png"/></p>
<h2 id="text_styling">Text styling</h2>
<p>PDFKit has many options for controlling the look of text added to PDF
documents, which can be passed to the <code>text</code> method. They are enumerated
below.</p>
<ul><li><code>lineBreak</code> - set to <code>false</code> to disable line wrapping all together</li><li><code>width</code> - the width that text should be wrapped to (by default, the page width minus the left and right margin)</li><li><code>height</code> - the maximum height that text should be clipped to</li><li><code>ellipsis</code> - the character to display at the end of the text when it is too long. Set to <code>true</code> to use the default character.</li><li><code>columns</code> - the number of columns to flow the text into</li><li><code>columnGap</code> - the amount of space between each column (1/4 inch by default)</li><li><code>indent</code> - the amount in PDF points (72 per inch) to indent each paragraph of text</li><li><code>paragraphGap</code> - the amount of space between each paragraph of text</li><li><code>lineGap</code> - the amount of space between each line of text</li><li><code>wordSpacing</code> - the amount of space between each word in the text</li><li><code>characterSpacing</code> - the amount of space between each character in the text</li><li><code>fill</code> - whether to fill the text (<code>true</code> by default)</li><li><code>stroke</code> - whether to stroke the text</li><li><code>link</code> - a URL to link this text to (shortcut to create an annotation)</li><li><code>underline</code> - whether to underline the text</li><li><code>strike</code> - whether to strike out the text</li><li><code>continued</code> - whether the text segment will be followed immediately by another segment. Useful for changing styling in the middle of a paragraph.</li></ul>
<p>Additionally, the fill and stroke color and opacity methods described in the
<a href="vector.html">vector graphics section</a> are applied to text content as well.</p>
<hr/>
<p>Here is an example combining some of the options above, wrapping a piece of text into three columns, in a specified width and height.</p>
<pre><code>lorem = &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia. Sed eu leo in turpis fringilla hendrerit. Ut nec accumsan nisl. Suspendisse rhoncus nisl posuere tortor tempus et dapibus elit porta. Cras leo neque, elementum a rhoncus ut, vestibulum non nibh. Phasellus pretium justo turpis. Etiam vulputate, odio vitae tincidunt ultricies, eros odio dapibus nisi, ut tincidunt lacus arcu eu elit. Aenean velit erat, vehicula eget lacinia ut, dignissim non tellus. Aliquam nec lacus mi, sed vestibulum nunc. Suspendisse potenti. Curabitur vitae sem turpis. Vestibulum sed neque eget dolor dapibus porttitor at sit amet sem. Fusce a turpis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;&#39;
doc.text lorem,
columns: 3
columnGap: 15
height: 100
width: 465
align: &#39;justify&#39;</code></pre>
<p>The output looks like this:</p>
<p><img src="img/11.png"/></p>
<h2 id="rich_text">Rich Text</h2>
<p>As mentioned above, PDFKit supports a simple form of rich text via the <code>continued</code> option.
When set to true, PDFKit will retain the text wrapping state between <code>text</code> calls. This way,
when you call text again after changing the text styles, the wrapping will continue right
where it left off.</p>
<p>The options given to the first <code>text</code> call are also retained for subsequent calls after a
<code>continued</code> one, but of course you can override them. In the following example, the <code>width</code>
option from the first <code>text</code> call is retained by the second call.</p>
<pre><code>doc.fillColor &#39;green&#39;
.text lorem.slice(0, 500),
width: 465
continued: yes
.fillColor &#39;red&#39;
.text lorem.slice(500)</code></pre>
<p>Here is the output:</p>
<p><img src="img/12.png"/></p>
<h2 id="fonts">Fonts</h2>
<p>The PDF format defines 14 standard fonts that can be used in PDF documents (4
styles of Helvetica, Courier, and Times, as well as Symbol and Zapf Dingbats),
but also allows fonts to be embedded right in the document. PDFKit supports
embedding font files in the TrueType (<code>.ttf</code>), TrueType Collection (<code>.ttc</code>),
and Datafork TrueType (<code>.dfont</code>) formats.</p>
<p>To change the font used to render text, just call the <code>font</code> method. If you
are using a standard PDF font, just pass the name to the <code>font</code> method.
Otherwise, pass the path to the font file, and if the font is a collection
font (<code>.ttc</code> and <code>.dfont</code> files), meaning that they contain multiple styles in
the same file, you should pass the name of the style to be extracted from the
collection.</p>
<p>Here is an example showing how to set the font in each case.</p>
<pre><code># Set the font size
doc.fontSize(18)
# Using a standard PDF font
doc.font(&#39;Times-Roman&#39;)
.text(&#39;Hello from Times Roman!&#39;)
.moveDown(0.5)
# Using a TrueType font (.ttf)
doc.font(&#39;fonts/GoodDog.ttf&#39;)
.text(&#39;This is Good Dog!&#39;)
.moveDown(0.5)
# Using a collection font (.ttc or .dfont)
doc.font(&#39;fonts/Chalkboard.ttc&#39;, &#39;Chalkboard-Bold&#39;)
.text(&#39;This is Chalkboard, not Comic Sans.&#39;)</code></pre>
<p>The output of this example looks like this:</p>
<p><img src="img/13.png"/></p>
<p>Another nice feature of the PDFKit font support, is the ability to register a
font file under a name for use later rather than entering the path to the font
every time you want to use it.</p>
<pre><code># Register a font
doc.registerFont(&#39;Heading Font&#39;, &#39;fonts/Chalkboard.ttc&#39;, &#39;Chalkboard-Bold&#39;)
# Use the font later
doc.font(&#39;Heading Font&#39;)
.text(&#39;This is a heading.&#39;)</code></pre>
<p>That&#39;s about all there is too it for text in PDFKit. Let&#39;s move on now to
images.</p><nav><a href="/docs/vector.html" class="previous">Previous</a><a href="/docs/images.html" class="next">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>

312
docs/vector.html Normal file
View File

@ -0,0 +1,312 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vector Graphics in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/vector.html" class="selected">Vector Graphics </a><ul><li><a href="#an_introduction_to_vector_graphics">An introduction to vector graphics</a></li><li><a href="#creating_basic_shapes">Creating basic shapes</a></li><li><a href="#svg_paths">SVG paths</a></li><li><a href="#shape_helpers">Shape helpers</a></li><li><a href="#fill_and_stroke_styles">Fill and stroke styles</a></li><li><a href="#line_cap_and_line_join">Line cap and line join</a></li><li><a href="#dashed_lines">Dashed lines</a></li><li><a href="#color">Color</a></li><li><a href="#gradients">Gradients</a></li><li><a href="#winding_rules">Winding rules</a></li><li><a href="#saving_and_restoring_the_graphics_stack">Saving and restoring the graphics stack</a></li><li><a href="#transformations">Transformations</a></li><li><a href="#clipping">Clipping</a></li></ul></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/annotations.html">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="vector_graphics_in_pdfkit">Vector Graphics in PDFKit</h1>
<h2 id="an_introduction_to_vector_graphics">An introduction to vector graphics</h2>
<p>Unlike images which are defined by pixels, vector graphics are defined through
a series of drawing commands. This makes vector graphics scalable to any size
without a reduction in quality (pixelization). The PDF format was designed
with vector graphics in mind, so creating vector drawings is very easy. The
PDFKit vector graphics APIs are very similar to that of the HTML5 canvas
element, so if you are familiar at all with that API, you will find PDFKit
easy to pick up.</p>
<h2 id="creating_basic_shapes">Creating basic shapes</h2>
<p>Shapes are defined by a series of lines and curves. <code>lineTo</code>, <code>bezierCurveTo</code>
and <code>quadraticCurveTo</code> all draw from the current point (which you can set with
<code>moveTo</code>) to the specified point (always the last two arguments). Bezier
curves use two control points and quadratic curves use just one. Here is an
example that illustrates defining a path.</p>
<pre><code>doc.moveTo(0, 20) # set the current point
.lineTo(100, 160) # draw a line
.quadraticCurveTo(130, 200, 150, 120) # draw a quadratic curve
.bezierCurveTo(190, -40, 200, 200, 300, 150) # draw a bezier curve
.lineTo(400, 90) # draw another line
.stroke() # stroke the path</code></pre>
<p>The output of this example looks like this:</p>
<p><img src="img/0.png"/></p>
<p>One thing to notice about this example is the use of method chaining. All
methods in PDFKit are chainable, meaning that you can call one method right
after the other without referencing the <code>doc</code> variable again. Of course, this
is an option, so if you don&#39;t like how the code looks when chained, you don&#39;t
have to write it that way.</p>
<h2 id="svg_paths">SVG paths</h2>
<p>PDFKit includes an SVG path parser, so you can include paths written in the
SVG path syntax in your PDF documents. This makes it simple to include vector
graphics elements produced in many popular editors such as Inkscape or Adobe
Illustrator. The previous example could also be written using the SVG path
syntax like this.</p>
<pre><code>doc.path(&#39;M 0,20 L 100,160 Q 130,200 150,120 C 190,-40 200,200 300,150 L 400,90&#39;)
.stroke()</code></pre>
<p><img src="img/1.png"/></p>
<p>The PDFKit SVG parser supports all of the command types supported by SVG, so
any valid SVG path you throw at it should work as expected.</p>
<h2 id="shape_helpers">Shape helpers</h2>
<p>PDFKit also includes some helpers that make defining common shapes much
easier. Here is a list of the helpers.</p>
<ul><li><code>rect(x, y, width, height)</code></li><li><code>roundedRect(x, y, width, height, cornerRadius)</code></li><li><code>ellipse(centerX, centerY, radiusX, radiusY = radiusX)</code></li><li><code>circle(centerX, centerY, radius)</code></li><li><code>polygon(points...)</code></li></ul>
<p>The last one, <code>polygon</code>, allows you to pass in a list of points (arrays of x,y
pairs), and it will create the shape by moving to the first point, and then
drawing lines to each consecutive point. Here is how you&#39;d draw a triangle
with the polygon helper.</p>
<pre><code>doc.polygon [100, 0], [50, 100], [150, 100]
doc.stroke()</code></pre>
<p>The output of this example looks like this:</p>
<p><img src="img/2.png"/></p>
<h2 id="fill_and_stroke_styles">Fill and stroke styles</h2>
<p>So far we have only been stroking our paths, but you can also fill them with
the <code>fill</code> method, and both fill and stroke the same path with the
<code>fillAndStroke</code> method. Note that calling <code>fill</code> and then <code>stroke</code>
consecutively will not work because of a limitation in the PDF spec. Use the
<code>fillAndStroke</code> method if you want to accomplish both operations on the same
path.</p>
<p>In order to make our drawings interesting, we really need to give them some
style. PDFKit has many methods designed to do just that.</p>
<ul><li><code>lineWidth</code></li><li><code>lineCap</code></li><li><code>lineJoin</code></li><li><code>miterLimit</code></li><li><code>dash</code></li><li><code>fillColor</code></li><li><code>strokeColor</code></li><li><code>opacity</code></li><li><code>fillOpacity</code></li><li><code>strokeOpacity</code></li></ul>
<p>Some of these are pretty self explanatory, but let&#39;s go through a few of them.</p>
<h2 id="line_cap_and_line_join">Line cap and line join</h2>
<p>The <code>lineCap</code> and <code>lineJoin</code> properties accept constants describing what they
should do. This is best illustrated by an example.</p>
<pre><code># these examples are easier to see with a large line width
doc.lineWidth(25)
# line cap settings
doc.lineCap(&#39;butt&#39;)
.moveTo(50, 20)
.lineTo(100, 20)
.stroke()
doc.lineCap(&#39;round&#39;)
.moveTo(150, 20)
.lineTo(200, 20)
.stroke()
# square line cap shown with a circle instead of a line so you can see it
doc.lineCap(&#39;square&#39;)
.moveTo(250, 20)
.circle(275, 30, 15)
.stroke()
# line join settings
doc.lineJoin(&#39;miter&#39;)
.rect(50, 100, 50, 50)
.stroke()
doc.lineJoin(&#39;round&#39;)
.rect(150, 100, 50, 50)
.stroke()
doc.lineJoin(&#39;bevel&#39;)
.rect(250, 100, 50, 50)
.stroke()</code></pre>
<p>The output of this example looks like this.</p>
<p><img src="img/3.png"/></p>
<h2 id="dashed_lines">Dashed lines</h2>
<p>The <code>dash</code> method allows you to create non-continuous dashed lines. It takes a
length specifying how long each dash should be, as well as an optional hash
describing the additional properties <code>space</code> and <code>phase</code>.</p>
<p>The <code>space</code> option defines the length of the space between each dash, and the <code>phase</code> option
defines the starting point of the sequence of dashes. By default the <code>space</code>
attribute is equal to the <code>length</code> and the <code>phase</code> attribute is set to <code>0</code>.
You can use the <code>undash</code> method to make the line solid again.</p>
<p>The following example draws a circle with a dashed line where the space
between the dashes is double the length of each dash.</p>
<pre><code>doc.circle(100, 50, 50)
.dash(5, space: 10)
.stroke()</code></pre>
<p>The output of this example looks like this:</p>
<p><img src="img/4.png"/></p>
<h2 id="color">Color</h2>
<p>What is a drawing without color? PDFKit makes it simple to set the fill and
stroke color and opacity. You can pass an array specifying an RGB or CMYK
color, a hex color string, or use any of the named CSS colors.</p>
<p>The <code>fillColor</code> and <code>strokeColor</code> methods accept an optional second argument as a shortcut for
setting the <code>fillOpacity</code> and <code>strokeOpacity</code>. Finally, the <code>opacity</code> method
is a convenience method that sets both the fill and stroke opacity to the same
value.</p>
<p>The <code>fill</code> and <code>stroke</code> methods also accept a color as an argument so
that you don&#39;t have to call <code>fillColor</code> or <code>strokeColor</code> beforehand. The
<code>fillAndStroke</code> method accepts both fill and stroke colors as arguments.</p>
<pre><code>doc.circle(100, 50, 50)
.lineWidth(3)
.fillOpacity(0.8)
.fillAndStroke(&quot;red&quot;, &quot;#900&quot;)</code></pre>
<p>This example produces the following output:</p>
<p><img src="img/5.png"/></p>
<h2 id="gradients">Gradients</h2>
<p>PDFKit also supports gradient fills. Gradients can be used just like color fills,
and are applied with the same methods (e.g. <code>fillColor</code>, or just <code>fill</code>). Before
you can apply a gradient with these methods, however, you must create a gradient object.</p>
<p>There are two types of gradients: linear and radial. They are created by the <code>linearGradient</code>
and <code>radialGradient</code> methods. Their function signatures are listed below:</p>
<ul><li><code>linearGradient(x1, y1, x2, y2)</code> - <code>x1,y1</code> is the start point, <code>x2,y2</code> is the end point</li><li><code>radialGradient(x1, y2, r1, x2, y2, r2)</code> - <code>r1</code> is the inner radius, <code>r2</code> is the outer radius</li></ul>
<p>Once you have a gradient object, you need to create color stops at points along that gradient.
Stops are defined at percentage values (0 to 1), and take a color value (any usable by the
fillColor method), and an optional opacity.</p>
<p>You can see both linear and radial gradients in the following example:</p>
<pre><code># Create a linear gradient
grad = doc.linearGradient(50, 0, 150, 100)
grad.stop(0, &#39;green&#39;)
.stop(1, &#39;red&#39;)
doc.rect 50, 0, 100, 100
doc.fill grad
# Create a radial gradient
grad = doc.radialGradient(300, 50, 0, 300, 50, 50)
grad.stop(0, &#39;orange&#39;, 0)
.stop(1, &#39;orange&#39;, 1)
doc.circle 300, 50, 50
doc.fill grad</code></pre>
<p>Here is the output from the this example: </p>
<p><img src="img/6.png"/></p>
<h2 id="winding_rules">Winding rules</h2>
<p>Winding rules define how a path is filled and are best illustrated by an
example. The winding rule is an optional attribute to the <code>fill</code> and
<code>fillAndStroke</code> methods, and there are two values to choose from: <code>non-zero</code>
and <code>even-odd</code>.</p>
<pre><code># Initial setup
doc.fillColor(&#39;red&#39;)
.translate(-100, -50)
.scale(0.8)
# Draw the path with the non-zero winding rule
doc.path(&#39;M 250,75 L 323,301 131,161 369,161 177,301 z&#39;)
.fill(&#39;non-zero&#39;)
# Draw the path with the even-odd winding rule
doc.translate(280, 0)
.path(&#39;M 250,75 L 323,301 131,161 369,161 177,301 z&#39;)
.fill(&#39;even-odd&#39;)</code></pre>
<p>You&#39;ll notice that I used the <code>scale</code> and <code>translate</code> transformations in this
example. We&#39;ll cover those in a minute. The output of this example, with some
added labels, is below.</p>
<p><img src="img/7.png"/></p>
<h2 id="saving_and_restoring_the_graphics_stack">Saving and restoring the graphics stack</h2>
<p>Once you start producing more complex vector drawings, you will want to be
able to save and restore the state of the graphics context. The graphics state
is basically a snapshot of all the styles and transformations (see below) that
have been applied, and many states can be created and stored on a stack. Every
time the <code>save</code> method is called, the current graphics state is pushed onto
the stack, and when you call <code>restore</code>, the last state on the stack is applied
to the context again. This way, you can save the state, change some styles,
and then restore it to how it was before you made those changes.</p>
<h2 id="transformations">Transformations</h2>
<p>Transformations allow you to modify the look of a drawing without modifying
the drawing itself. There are three types of transformations available, as
well as a method for setting the transformation matrix yourself. They are
<code>translate</code>, <code>rotate</code> and <code>scale</code>.</p>
<p>The <code>translate</code> transformation takes two arguments, x and y, and effectively
moves the origin of the document which is (0, 0) by default, to the left and
right x and y units.</p>
<p>The <code>rotate</code> transformation takes an angle and optionally, an object with an
<code>origin</code> property. It rotates the document <code>angle</code> degrees around the passed
<code>origin</code> or by default, the center of the page.</p>
<p>The <code>scale</code> transformation takes a scale factor and an optional <code>origin</code>
passed in an options hash as with the <code>rotate</code> transformation. It is used to
increase or decrease the size of the units in the drawing, or change it&#39;s
size. For example, applying a scale of <code>0.5</code> would make the drawing appear at
half size, and a scale of <code>2</code> would make it appear twice as large.</p>
<p>If you are feeling particularly smart, you can modify the transformation
matrix yourself using the <code>transform</code> method.</p>
<p>We used the <code>scale</code> and <code>translate</code> transformations above, so here is an
example of using the <code>rotate</code> transformation. We&#39;ll set the origin of the
rotation to the center of the rectangle.</p>
<pre><code>doc.rotate(20, origin: [150, 70])
.rect(100, 20, 100, 100)
.fill(&#39;gray&#39;)</code></pre>
<p>This example produces the following effect.</p>
<p><img src="img/8.png"/></p>
<h2 id="clipping">Clipping</h2>
<p>A clipping path is a path defined using the normal path creation methods, but
instead of being filled or stroked, it becomes a mask that hides unwanted
parts of the drawing. Everything falling inside the clipping path after it is
created is visible, and everything outside the path is invisible. Here is an
example that clips a checkerboard pattern to the shape of a circle.</p>
<pre><code># Create a clipping path
doc.circle(100, 100, 100)
.clip()
# Draw a checkerboard pattern
for row in [0...10]
for col in [0...10]
color = if (col % 2) - (row % 2) then &#39;#eee&#39; else &#39;#4183C4&#39;
doc.rect(row * 20, col * 20, 20, 20)
.fill(color)</code></pre>
<p>The result of this example is the following:</p>
<p><img src="img/9.png"/></p>
<p>That&#39;s it for vector graphics in PDFKit. Now let&#39;s move on to learning about
PDFKit&#39;s text support!</p><nav><a href="/docs/getting_started.html" class="previous">Previous</a><a href="/docs/text.html" class="next">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>

80
index.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/" class="selected">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/annotations.html">Annotations </a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/demo/out.pdf">Example PDF</a></li><li><a href="http://github.com/devongovett/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="pdfkit">PDFKit</h1>
<h2 id="a_pdf_generation_library_for_node.js.">A PDF generation library for Node.js.</h2>
<h2 id="description">Description</h2>
<p>PDFKit is a PDF document generation library for Node that makes creating complex, multi-page, printable documents easy.
It&#39;s written in CoffeeScript, but you can choose to use the API in plain &#39;ol JavaScript if you like. The API embraces
chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API
is designed to be simple, so generating complex documents is often as simple as a few function calls.</p>
<p>Check out some of the <a href="http://pdfkit.org/docs/getting_started.html">documentation and examples</a> to see for yourself!
You can also read the guide as a <a href="http://pdfkit.org/docs/guide.pdf">self-generated PDF</a> with example output displayed inline.
If you&#39;d like to see how it was generated, check out the README in the <a href="https://github.com/devongovett/pdfkit/tree/master/docs">docs</a>
folder.</p>
<h2 id="installation">Installation</h2>
<p>Installation uses the <a href="http://npmjs.org/">npm</a> package manager. Just type the following command after installing npm.</p>
<pre><code>npm install pdfkit</code></pre>
<h2 id="features">Features</h2>
<ul><li>Vector graphics<ul><li>HTML5 canvas-like API</li><li>Path operations</li><li>SVG path parser for easy path creation</li><li>Transformations</li><li>Linear and radial gradients</li></ul></li><li>Text<ul><li>Line wrapping</li><li>Text alignments</li><li>Bulleted lists</li></ul></li><li>Font embedding<ul><li>Supports TrueType (.ttf), TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts</li><li>Font subsetting</li></ul></li><li>Image embedding<ul><li>Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)</li></ul></li><li>Annotations<ul><li>Links</li><li>Notes</li><li>Highlights</li><li>Underlines</li><li>etc.</li></ul></li></ul>
<h2 id="coming_soon!">Coming soon!</h2>
<ul><li>Patterns fills</li><li>Outlines</li><li>PDF Security</li><li>Higher level APIs for creating tables and laying out content</li><li>More performance optimizations</li><li>Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.</li></ul>
<h2 id="example">Example</h2>
<pre><code>PDFDocument = require &#39;pdfkit&#39;
doc = new PDFDocument
# Embed a font, set the font size, and render some text
doc.font(&#39;fonts/PalatinoBold.ttf&#39;)
.fontSize(25)
.text(&#39;Some text with an embedded font!&#39;, 100, 100)
# Add another page
doc.addPage()
.fontSize(25)
.text(&#39;Here is some vector graphics...&#39;, 100, 100)
# Draw a triangle
doc.save()
.moveTo(100, 150)
.lineTo(100, 250)
.lineTo(200, 250)
.fill(&quot;#FF3300&quot;)
# Apply some transforms and render an SVG path with the &#39;even-odd&#39; fill rule
doc.scale(0.6)
.translate(470, -380)
.path(&#39;M 250,75 L 323,301 131,161 369,161 177,301 z&#39;)
.fill(&#39;red&#39;, &#39;even-odd&#39;)
.restore()
# Add some text with annotations
doc.addPage()
.fillColor(&quot;blue&quot;)
.text(&#39;Here is a link!&#39;, 100, 100)
.underline(100, 100, 160, 27, color: &quot;#0000FF&quot;)
.link(100, 100, 160, 27, &#39;http://google.com/&#39;)
# Write the PDF file to disk
doc.write &#39;output.pdf&#39;</code></pre>
<p><a href="http://pdfkit.org/example.pdf">The PDF output from this example</a> (with a few additions) shows the power of PDFKit — producing
complex documents with a very small amount of code. For more, see the <code>demo</code> folder and the
<a href="http://pdfkit.org/docs/getting_started.html">PDFKit programming guide</a>.</p>
<h2 id="documentation">Documentation</h2>
<p>For complete API documentation and more examples, see the <a href="http://pdfkit.org/">PDFKit website</a>.</p>
<h2 id="license">License</h2>
<p>PDFKit is available under the MIT license.</p><nav><a href="/docs/getting_started.html" class="next">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script></body></html>