Saucy

Dynamic Text Rendering Plugin for Rails. Like sIFR but without the hassle/flash/javascript.

Examples

<%= saucy_tag("Hi there") %>
      <%= saucy_tag("I am red", :style => {:font => {:color => 'red' }}) %>
      <%= saucy_tag("I am a red/blue sprite", 
                      :style => {:font => {:color => 'red'}}, 
                      :highlight => {:font => {:color => 'blue'}}
                    ) %>

Use

In a view:

<%= saucy_tag(text, options) %>

Available options

  1. Style needs to be a hash – see the ‘Styles’ heading below {:style => {}}
  2. Highlight option is for sprites, the styles passed in override
  3. the styles that were passed in for :style. This can be used for hover or focus effects {:highlight => {}}
  4. The html style needs to be a hash
  5. The html class needs to be a array of classNames {:html => {:style => {}, :class => []}}
  6. Tag needs to be symbol (default is :a) {:tag => :p}
  7. Transparent needs to be a boolean –
  8. this defaults to true {:transparent => false}

Styles

The style has has several options and the default style is: 

{ 
        :background => "transparent",
        :font       => {
          :size     => 18, 
          :color    => "#000", 
          :font     => "arial", 
          :stretch  => "normal" 
        },
        :stroke => {
          :width    => 0, 
          :color    => "#000", 
          :inner    => true 
        },
        :spacing    => {
          :letter   => 0, 
          :word     => 0
        },
        :rotate => 0,
        :shadow => {
          :color => "#000", 
          :opacity => 0.6, 
          :top => 2, 
          :left => 2, 
          :blur => 5.0, 
          :render => false 
        }
      }

The style that’s passed in will be merged over the top of this.

Internet Explorer

Saucy will apply an AlphaFilter if you the background color is “transparent” (or absent since this is the default)

Fonts

Fonts are loaded from the /plugins/saucy/fonts directory.

Sprites

If you set an highlight style Saucy will render a sprite consisting of 2 images, the normal and the highlight. To set a sprite to be at the highlight style, simply set the top margin to 0. E.g. the following is for a hover effect:

You need to pass in a :highlight option which is in the same format as the :style option. The :highlight option overrides the :style option (you don’t need to pass in all the styles again).

Get Involved