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'}}, 
                  :highlight => {: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 => {}}

# Highlight option is for sprites, the styles passed in override
# the styles that were passed in for :style. This can be used for hover or focus effects
{:highlight => {}}

# 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 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:

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

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

Try out
-------

* In your controller

  def saucy
    @spacing = { 
      :font => { 
        :size => 70, 
        :color => "#cfc" 
      },
      :spacing => {
        :letter => -6 
      }  
    }

    @thick_stroked = { 
      :stroke => { 
        :color => "red",
        :width => 5 
        }, 
      :font => { 
        :size => 50, 
        :color => "#fff" 
        }  
      }

    @bauhaus = { 
      :font => { 
        :size => 50, 
        :font => "bauhausl.ttf", 
        :color => "white"  
        }  
      }
    
    @outline = { 
      :font => { 
        :size => 60, 
        :font => "basket.ttf", 
        :color => "transparent" 
        },
      :stroke => {
        :width => 2
      },
      :shadow => { 
        :render => true, 
        :top => 5, 
        :left => 5, 
        :opacity => 0.2 
        }  
      }
      

    @shadow = { 
      :font => { 
        :size => 60, 
        :font => "basket.ttf", 
        :color => "#fff" 
        }, 
      :shadow => { 
        :render => true, 
        :top => 5, 
        :left => 5, 
        :opacity => 0.2 
        }  
      }
    @rotate = { 
      :rotate => -15, 
      :font => { 
        :size => 70, 
        :font => "bauhausl.ttf", 
        :color => "#fec", 
        :stretch => "condensed" 
        }
      }

    @saucy = { 
      :font => { 
        :size => 80, 
        :font => "basket.ttf", 
        :color => "#f6c" 
        },  
      :stroke => { 
        :color => "white", 
        :width => 15, 
        :inner => 1 
        }, 
      :shadow => { 
        :render => true, 
        :top => 5, 
        :left => 5, 
        :opacity => 0.2 
        }
      }
    
    @thick_stroked = { 
      :stroke => { 
        :color => "red", 
        :width => 20, 
        :inner => 1 
      }, 
      :font => { 
        :size => 50, 
        :color => "#fff" 
        }, 
      :rotate => 10, 
      :shadow => { 
        :render => true, 
        :top => 5, 
        :left => 5 
        }   
      }
      
  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>
   
      <style type="text/css">
       body {background: url(http://www.mr-tut.com/images/uploads/803.gif); }
       p {margin-right: 3em; margin-top: 3em; float: left}
       #container {width: 1000px}
       .saucySprite:hover { margin-top: 0px !important; }
      </style>
    
    </head>
    <body>
      <%= saucy_tag "Saucy - Examples", :style=> @saucy, :tag=> "h2" %>

      <div id=container>

      <%= saucy_tag "text\non\nmultiple\nlines",:style =>  @bauhaus  %>
      <%= saucy_tag  "letter spacing...", :style => @spacing, :html => {:class=>["myclass"]} %>

      <%= saucy_tag "stroked!!", :style => @thick_stroked, :html =>{:class=>["myclass"]} %>
      <%= saucy_tag "30 degrees", :style => @rotate %>
      <%= saucy_tag  "shadow", :style => @shadow %>

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


      <%= saucy_tag("hover effects sprite!!", 
                    :style => @thick_stroked, 
                    :highlight => {:stroke => {:color => "#5fe"}},
                    :html => {:class => ["myclass2"]}
                  ) %>

      <%= saucy_tag(  "outline...",
                      :style=> @outline, 
                      :highlight => {:stroke => {:color => "blue" }} 
                    ) %>

      </div>
    </body>
  </html>