The Adventures of a Hackerman: How I Pirated the Papyrus Font Using Javascript

hackerman

Papyrus is a font that I commonly use for digital art that I post on DeviantArt – the mixed-media “inspirational” kind that has an image with a quote or other inset text. I find that for stuff that’s either serious or humorous but mocking something serious, Papyrus is the best typeface to use. It just looks so dramatic.

Naturally, you can imagine how disappointed I was when I found that the Windows version of GIMP doesn’t have that font. I went looking for a website where I could download it, but found that all the download pages on the Internet were paywalled. I was like, really? BUY fonts? Who the hell does that? I don’t even buy my music, so I’m definitely not buying a font. I’m gonna pirate it.

So how does one pirate a font, exactly? Well, basically you need two things: First you need 1337 h4xx0r skillz like mine; second you need a ton of spare time and patience, because the process I went through was extremely lengthy and tedious. First I did a simple image search for the Papyrus font. Pretty obvious first step. I found an image that showed all the letters and numbers and some punctuation in that font. Would have been nicer if I’d found separate images for each glyph, but I guess that would be making it too easy.

After downloading the image, I opened it up in GIMP. Now this was the really tedious nightmarish part: I had to painstakingly copy every glyph into its own image, making sure I copied exactly the right number of pixels so they would all line up when I pasted them together. My object was to create a program where I could simply type letters on the keyboard and those letters would appear on the screen in the Papyrus font, as if I were using a word processor. I wanted it to be as seamless as possible. To do this I had to make sure early on that I got them lined up. It was a pain in the ass, but I eventually had a separate image for each glyph. I won’t be posting them here though. I figure if I only pirate the font for my own personal use and don’t distribute it to anyone, then the people selling it are less likely to come after me. I’m just covering my own ass, okay?

Now came the fun part: writing a program that would convert plain text into a string of those images. I figured the best language to do this in would be Javascript. As usual I will paste my code here and explain what each part of the program does:


 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5 <title>Papyrus</title>
 6 <script type="text/javascript">
 7 function submit(){
 8         var input = document.getElementById( "input" ).value;
 9         var output = document.getElementById( "output" );
10         output.innerHTML = "";
11         var len = input.length;
12         var img = "";
13         for( i = 0; i < len; i++ ){
14                 var c = input.charCodeAt( i );
15                 if( (c > 47 && c < 58) || (c > 96 && c < 123) ){
16                         img = input.charAt( i ) + ".gif";
17                 }
18                 else if( c > 64 && c < 91 ){
19                         img = input.charAt( i ) + input.charAt( i ) + ".gif";
20                 }
21                 else if( input.charAt( i ) == " " ){
22                         img = "spacer.gif";
23                 }
24                 else{
25                         switch( input.charAt( i ) ){
26                                 case "." : img = "dot.gif"break;
27                                 case "!" : img = "bang.gif"break;
28                                 case "?" : img = "question.gif"break;
29                                 case "(" : img = "lparen.gif"break;
30                                 case ")" : img = "rparen.gif"break;
31                                 case "," : img = "comma.gif"break;
32                         }
33                 }
34                 if( input.charAt( i ) == "\n" ){
35                         output.innerHTML += "<br>";
36                 }
37                 else{
38                         output.innerHTML += "<img src=\"" + img + "\">";
39                 }
40         }
41 }
42 </script>
43 <style type="text/css">
44 button {
45         colorwhite;
46         background-colorblack;
47 }
48 </style>
49 </head>
50 <body>
51 <textarea id="input"></textarea>
52 <br>
53 <button onclick="submit();">Enter</button>
54 <br><br><br>
55 <span id="output"></span>
56 </body>
57 </html>

The HTML page is divided into two regions: the input region where text is entered (represented by the input variable in the Javascript) and the output region where the Papyrus version of the text appears when the Submit button is pressed (represented by the output variable). The Javascript code first initializes these two variable (lines 8-9), clears the output region for the new message (line 10), gets the length of the input in characters (line 11), and initializes the filename for the image to display to an empty string (line 12).

The loop in lines 13-40 goes through each character in the input and “prints” the corresponding image in the output region. First it uses Javascript’s charCodeAt() function to get the ASCII value for the character (line 14). It then proceeds through a decision statement to select a filename paradigm depending on what numerical range the character code is in. For numbers (codes 48-57) and lowercase letters (codes 97-122) the filename is simply (that character).gif. For capital letters (codes 65-90) the filename is the double character and then .gif (I had to vary it somehow because filenames aren’t case-sensitive). For the space and punctuation characters, a special filename is used for each one.

Lines 34-39 print a <br> tag if the inputted character is a newline, and if the character is anything other than a newline an <img> tag with the already constructed filename is printed. The “printing” is done by appending a string to the innerHTML property (I shouldn’t have to explain what that does).

The process after that involves typing text into the text box, running the Javascript, then resizing the window so that words are not broken between lines, taking a screenshot of the browser window, pasting it into GIMP, making the white part transparent and possibly changing the color of the black part as well, doing any necessary resizing, and then copying and pasting onto the target image. It’s still a lot of work, but it sure beats copying and pasting each individual character of a quote by hand.

Possible future enhancements for this project:

  • Use Javascript event handlers and CSS styles to adjust the size of the text within the browser window in response to a certain keystroke from the user.
  • Do some minimal adjustments for better kerning (like if there’s a capital P and then a lowercase e, move the e to below the loop of the P so there isn’t that big awkward empty space).
  • Make the glyph images transparent so they actually can be overlaid in the manner described above.
  • Detect when there’s not enough space left on the page for the next word and start a new line accordingly.
  • Give the program the ability to edit the Papyrus text in real time.

So there you have it – my proven method for pirating fonts. And fortunately I only had to do it once, since Papyrus was the only font I wanted to use that I didn’t have. That’s it for today. Happy hacking.

the_choice_is_yours_by_phracker-dcbbj6t

2 thoughts on “The Adventures of a Hackerman: How I Pirated the Papyrus Font Using Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s