Skip to content

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