by
 |
|
Suzuri is a Perl library for generating fonts used to draw text within HTML
<canvas> elements via the
Shodo
Javascript library.
|
|
Downloads:
|
 |
What is Suzuri ?
Formally, suzuri is the Japanese term
for an ink grinding stone, used in Japanese calligraphy ("shodo").
Currently, the HTML <canvas> tag does not provide any means of drawing text, and, as of this writing, HTML5
has not added the capability. This ommission has proven a challenge to developing rich <canvas> based
applications.
A number of solutions have been developed to provide text support for <canvas>, including
- layered DIVs: can be difficult to properly align over the canvas.
- direct vector rendering: compute intensive for the Javascript environment
- image slicing: requires pre-generation of a font image, with metric/position mapping data
Shodo applies the image slicing solution, using
Suzuri to generate the font images. While image slicing is less flexible than the other 2 approaches,
it may be more precise than layered DIVs (due to directly embedding the font images in the canvas),
and less compute intensive than the direct rendering solution. In addition, image slicing
permits the use of fonts not resident on the browser's platform, and the ability to rotate
the strings to arbitrary angles.
For Windows Users:
The easiest solution (for Windows users) is to use the suzuri.exe executable:
suzuri [ options ] "font description"
where options are
-i imgpath : specify the directory where the image/JSON files are written
-s : specify that the JSON should be written to STDOUT, rather than a file
-u urlpath : specify the URL path used in the JSON to reference the image files
"font description" is of the form "family ?slant ?weight size;color;opacity;characterset",
where ?slant, ?weight, color, opacity, and characterset are optional.
E.g.,
suzuri -i fontcat "Arial bold 20;red;;abcdefghijklmnopqrstuvwxyz"
generates a bold Arial font 20 pixels high in red with 100% opacity, using only the lowercase
letters. The files "arial_bold_20_red_100.gif" and "arial_bold_20_red_100.js"
will be written to the fontcat directory.
suzuri -i fontcat "Arial 20"
generates a regular Arial font 20 pixels high in black with 100% opacity, using all the
standard ASCII printable characters. The files "arial_20_black_100.gif" and "arial_20_black_100.js"
will be written to the fontcat directory.
Using the Perl Package
For non-Windows platforms (or for Windows developers requiring greater scripting control),
the entire Perl package may be installed. Note that the prerequisite packages must also
be installed:
Also, the Imager package will need the giflib
library to be installed (normally installed by default on most Linux distributions).
Windows users may install Imager via the ppm file hosted at the
Imager website.
The Suzuri installation will install the suzuri.pl script, which behaves
identically to the executable version described above,
with the exception that, for non-Windows platforms, the "font description"
must include a font file specification, and a fontpath option may be needed
to locate the font files:
suzuri.pl [ options ] "font description"
where options are
-f fontpath : specify the directory where the font files are located (ignored on Windows)
-i imgpath : specify the directory where the image/JSON files are written
-s : specify that the JSON should be written to STDOUT, rather than a file
-u urlpath : specify the URL path used in the JSON to reference the image files
"font description" is of the form "[fontfile?:index]family ?slant ?weight size;color;opacity;characterset",
where ?:index, ?slant, ?weight, color, opacity, and characterset are optional.
E.g.,
suzuri.pl -f /usr/share/X11/fonts/Type1 "[cour.pfa]Courier 20;red;;0123456789"
generates a Courier font 20 pixels high in red with 100% opacity, using numbers
only. The files "courier_20_red_100.gif" and "courier_20_red_100.js"
will be written to the current working directory.
suzuri.pl -f /usr/share/X11/fonts/Type1 -i fontcat "[cour.pfa]Courier 20"
generates a Courier font 20 pixels high in black with 100% opacity, using all the
standard ASCII printable characters, plus space and tab. The files
"courier_20_black_100.gif" and "courier_20_black_100.js"
will be written to the fontcat directory.
Where can I get more fonts ?
I recommend the Cooltext website,
which hosts over 1200 freely available fonts (check each font's conditions of use)
in TrueType format
(as well as hosting a great logo/button rendering service).
After downloading fonts from Cooltext, you can install them in Windows by
- Open Start->Run...
- Enter "%windir%\fonts"
- In the font explorer, select File->Install New Font
- Select each font file from the Explorer and click Open; the font
will then be installed.
On other platforms, the font files can simply be copied to a directory of your chioce, which you
must specify to suzuri.pl via the "-f" option.
Usage Notes
Previewing Generated Font Images
The GIF images generated by Suzuri can be viewed in your favorite image viewer,
or in a web browser. Be advised that some image viewers and web browsers will distort
the font image to fit the viewing area. To get a true view of the image, embed it in
an HTML page and view it in your favorite browser.
The emitted JSON file is simple (albeit, packed) text that can be editted to suit your
needs (e.g., to alter the image name, or the URL path to the image file).
Platform Support
Suzuri has only been tested on Windows XP and Linux (FC 6). While it should work on
Mac OS X, the font management on that platform is a bit complicated, and hasn't yet been tested.
What is Suzuri's license ?
Shodo and Suzuri are freely available to use, copy, modify, and redistribute
under the terms of the
Apache License 2.0.
The Suzuri executable includes components with alternate, but compatible licenses:
The following are licensed under the
Perl Artistic License:
The following is licensed under the MIT License:
Who can I contact for help and more info ?
Send help requests, suggestions, and bug reports to
shodo@presicient.com. If there
is sufficient interest, I may startup a mailling list or wiki.
