Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Dynamic Text Rendering Plugin for Rails. Like sIFR but without the Hassle, Flash or even Javascript.

branch: master
Octocat-spinner-32 fonts updating November 27, 2008
Octocat-spinner-32 lib cleaning up code December 09, 2008
Octocat-spinner-32 MIT-LICENSE full plugin October 31, 2008
Octocat-spinner-32 README README formatting December 04, 2008
Octocat-spinner-32 init.rb init.rb December 04, 2008
README
Saucy
=====

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

* Automatic caching
* SEO friendly
* render any TTF font

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'}}, 
                  :hover => {:font => {:color => 'blue'}}
                ) %>
  
  
  
Use
---

In a view:

  <%= saucy_tag(text, options) %>

* text: your own text. Note it can contain newlines which will be interpreted as multiline text.
* options: html attributes to be inserted


Available options
-----------------

# Style needs to be a hash - see the 'Styles' heading below
{:style => {}}

# Hover option is for sprites, the styles passed in override
# the styles that were passed in for :style.
{:hover => {}}

# The html style needs to be a hash
# The html class needs to be a array of classNames
{:html => {:style => {}, :class => []}}

# Tag needs to be symbol (default is :a)
{:tag => :p}

# Transparent needs to be a boolean - 
# this defaults to false 
{:transparent => true}

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
    }
  }

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

Internet Explorer
-----

Saucy will apply an AlphaFilter if you pass in the transparent option as true.

 :transparent => true

Fonts
-----

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

Sprites
-------

If you're using sprites you need to have the following styles:

  <style type="text/css" media="screen">
    .saucySprite:hover {
      background-position: 0 0 !important;
    }
  </style>

If you're using tags other than the 'a' tag you'll need to apply this hover pseudo-class with JavaScript,
as IE 6 only support the hover pseudo-class for 'a' tags.

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

Try out
-------

* In your controller

  def saucy
    @stroked = { :stroke => { :color => "red", :width => 1 }, :font => { :size => 100, :color => "#fff" }, :spacing => {:letter => 100 }  }
    @thick_stroked = { :stroke => { :color => "red", :width => 20, :inner => 1 }, :font => { :size => 100, :color => "#fff" }  }
    @bauhaus = { :font => { :size => 100, :font => "bauhausl.ttf"  }  }
  end

* In saucy.html.erb

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
    <head>
      <title>Saucy</title>
      <%= javascript_include_tag :defaults %>
      <style type="text/css">
        .saucySprite:hover {
          background-position: 0 0 !important;
        }
      </style>
    </head>
    <body>
      <%= saucy_tag "default - no style" %>
      <%= saucy_tag "mutli\nline\nbauhaus", :style => @bauhaus  %>
      <%= saucy_tag "stroked!!", :style => @stroked, :html => {:class=> ["myclass"]} %>
      <%= saucy_tag "thick stroked!!", :style => @thick_stroked, :html => {:class => ["myclass2"]} %>

      <p>Different tag</p>

      <%= saucy_tag "h2 tag", :style => @bauhaus, :tag => :h2, :html => {:id => "myid"} %>

      <p>Sprites</p>

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

      <%= saucy_tag("thick stroked sprite!!", 
                      :style => @thick_stroked, 
                      :hover => {:font => {:color => 'blue'}},
                      :html => {:class => ["myclass2"]}
                    ) %>
    </body>
  </html>
Something went wrong with that request. Please try again.