As mentioned in the introduction, DrawBot has some pro-level features for fine typography including supporting advanced OpenType features, but it also doesn't take much to get started with drawing text.

A single line of text is as quick as setting a few attributes (color, font and its size) and then setting a line of text.

size(300, 300) # Document size

font("Times-Bold", 100) # Times-Italic at 100 points in size
fill(0.5, 0, 1) # Purple: 50% red, 100% blue
text("Hello!", (10, 10)) # Type set a string, at a location

The order is still important — set the font and the fill color before drawing the text, otherwise the text wouldn't have been set with these attributes.

The text() function will draw a string starting at a particular location, in this example the bottom left corner of the text starts 10 pixels from the left side of the canvas and 10 units from the bottom of the canvas.

For longer stretches of text that you would rather have drawn into a column you can use the textBox() function. In this case, since the string of the text is so long, I've assigned it to a variable name to make the code look a little bit neater. Then, the textBox() will draw the string assigned to the variable name.

size(300, 300) # Document size

font("Times-Bold", 100) # Times-Italic at 100 points in size
fill(0.5, 0, 1) # Purple: 50% red, 100% blue
text("Hello!", (10, 10)) # Type set a string, at a location

font("Times-Roman", 11)
fill(0, 0, 0)
myText = "This is a longer string. I assigned it to a variable name to make the code look a little bit more clean, and then in the next line of this script I'll ask the textBox to draw this string. Take note that the textBox positioning needs four numbers to define where this column of text should be drawn, these numbers relate to the same way that a rectangle is drawn."
textBox(myText, (15, 15, 200, 200))

You're not limited to drawing into a single canvas, I'll add one more line half way through the code to tell DrawBot to start a new page before drawing the paragraph of text.

    size(300, 300) # Document size

font("Times-Bold", 100) # Times-Italic at 100 points in size
fill(0.5, 0, 1) # Purple: 50% red, 100% blue
text("Hello!", (10, 10)) # Type set a string, at a location

newPage()

font("Times-Roman", 11)
fill(0, 0, 0)
myText = "This is a longer string. I assigned it to a variable name to make the code look a little bit more clean, and then in the next line of this script I'll ask the textBox to draw this string. Take note that the textBox positioning needs four numbers to define where this column of text should be drawn, these numbers relate to the same way that a rectangle is drawn."
textBox(myText, (15, 15, 200, 200))
  

If you were to save this as a PDF you'll find that it will save as a single document with two pages. This newPage() function is a small but powerful building block, with a few more elements (okay, many more elements) it could be possible to design and lay out something even as complex as a book or magazine.

This guide was first published on Dec 14, 2018. It was last updated on Mar 08, 2024.

This page (Text and multi-page PDFs) was last updated on Mar 08, 2024.

Text editor powered by tinymce.