Skip to content
/ saucy Public

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

License

Notifications You must be signed in to change notification settings

weepy/saucy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages