SifrHelper
SifrHelper is a Ruby on Rails plugin that makes using sIFR 2.0 rich font technology as simple and easy as a line of code. Get it, add a few lines of code to your layouts, add a font file or two, and enjoy the world of rich, dynamic fonts!
If you're looking to get started, you can find the latest release of SifrHelper here:
The RubyForge page for this project, with help forums, is here:
What's sIFR?
I've built my share of websites over the years, and one problem I keep running into is how to use non-standard fonts. For body text, Arial, Verdana and co. are fine, but for header text, they're dull. So, I've always used Photoshopped images containing the text I wanted styled. This is tedious, but works fine. Unless you want to select the text. Or if you're using a screen reader. Or if you have dynamic text. Or the user has their font sizes set differently. Or they want to print. Ahem.
That's why I was so excited when I first read up on sIFR font replacement, a clever Flash overlay technique that simply and cleanly takes any text on a page and replaces it with the same text in an arbitrary TrueType font. I know what you're saying to yourself right now: FLASH??? But trust me, it works. No Flash? No javascript? It degrades back to your standard font automatically and transparently. It's very, very clever.
Like a sample?
[[widget3]]
OK, so what's SifrHelper?
I wanted to use sIFR throughout my various websites, and found working with the javascript, adding the library of CSS and JS files, setting up my pages, and all that, to be tedious. So I went looking for a way to simplify using sIFR in my Rails apps. The result is SifrHelper, a Rails-based plugin that takes all the tedium out of working with sIFR.
Installing the plugin
First, you'll need to install the Engines plugin. More info here: http://rails-engines.org
The Engines plugin allows for richer plugins, and is used to manage the javascript, css, and font files associated with SifrHelper, as well as providing a way to have a nice status page. More on that in a sec...
To install the Engines plugin, use the following from your Rails project root dir:
script/plugin install engines |
Or alternately:
script/plugin install http://svn.rails-engines.org/plugins/engines |
Once that's done, you can install the SifrHelper plugin similarly:
script/plugin install svn://rubyforge.org/var/svn/sifrhelper |
If you're running production, you'll need to bounce the server, otherwise, you should be ready to go!
Sample Usage
Here's a walkthrough of using SifrHelper to use some a font on a page:
First, we add two calls to our layout file. These calls build the necessary css and javascript includes and calls.
 sample_layout.rhtml | |
<html> <head> <%= sifr_head_generator -%> </head> <body> <%= @contents_for_display -%> <%= sifr_body_generator -%> </body> </html> | |
Now, we find the text we want to change (in the layout, or in any view using that layout), and add a call to sifr_replace to tell the helper to do the switch. This assumes we have a font file named xpressive.swf installed already.
| sample_view.rhtml | |
<h1 class="xpressive">I like new fonts!</h1> <% sifr_replace('.xpressive',:xpressive) %> | |
That's it! It's simple and concise. Note that you can use a single sifr_replace call to replace any number of items. Use any CSS selector, including comma-separated lists of selectors like so:
<% sifr_replace('h1, h2, h3',:xpressive) %> |
Fonts, and how to generate and install them
sIFR uses Flash-embedded fonts to do its magic. There are a number of ways to obtain these .swf files. The best is to generate them yourself using Flash MX or similar product. Read the sIFR library docs for more information on this, including how to protect commercial fonts.
Another easy way, especially for testing, is to grab one of the font files in my font repository. These are royalty-free fonts that I've made for my own use.
Finally, you can try this font generator. I haven't used it, but it may work for you - note that you should use the latest sIFR version (2.0.6 as of this writing) to get security and usability fixes included in recent versions.
Once you have a font file, name it something useful and add it to your Rails public/fonts/ directory. That's all it takes! If you're using the engines-based version of the SifrHelper plugin, you can go to http://www.yourdomain.com/sifr/ to see the new font listed.
