Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Dynamic Text Rendering Plugin for Rails. Like sIFR but without the Hassle, Flash or even Javascript.
Ruby
branch: master

This branch is 18 commits ahead, 4 commits behind weepy:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
fonts
lib
MIT-LICENSE
README
init.rb

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.