Working Examples

For those in the know and the cut and paste crowd.

Basic Usage

For basic usage just define the font family, as displayed in your available fonts list, in regular CSS, then add the renderedFont class to the tags to be rendered.

Important Note: The font name used in your font-family definition must match exactly with the font name shown in your font list or it will not get rendered.

code

<style type="text/css">
  .rfBasic {
    font-family: "Ninja Naruto"; 
    font-size: 30px; 
    color: #99f;
  }
</style>
<span class="rfBasic renderedFont"> in line rendered font</span>
          

result

in line rendered font

Complex Usage

Additional custom parameters can be defined for your font by adding options to the font family. These options include

optionvaluedescription
rotation angle Rotate the described font by angle degrees counter clockwise.
hover class Apply class to rendered font during mouse hover
offset none | baseline | center Offset the rendered font image to the font baseline, or image center

Custom parameters are passed by appending a list of formatted key-value pairs to the font name as shown below. Here we want the text rotated 10 degrees and to change to the rfHover style when the users mouse hovers over the rendered text.

code

<style type="text/css">
  .rfComplex {
    font-family: "Ninja Naruto {hover: rfHover; rotation: 10}"; 
    font-size: 30px; 
    color: #99f;
  }
  .rfHover {
    color: #f99;
  }
</style>
<span class="rfComplex renderedFont"> in line rendered font</span>
          

result

in line rendered font

Offsets

The Offset option allows authors to align in-line text images with other text by offsetting the rendered image by the rendered fonts baseline or center.

code

<style type="text/css">
  .rfOffset {
    font-size: 20px; 
    color: #99f;
  }
  .rfOffsetNone {
     font-family: "Ninja Naruto"; 
   }
  .rfOffsetBaseline {
     font-family: "Ninja Naruto {offset: baseline;}"; 
   }
  .rfOffsetCenter {
     font-family: "Ninja Naruto {offset: center;}"; 
   }

</style>
<span class="rfOffset">Unrendered text <span class="rfOffsetNone renderedFont">No Offset</span>, <span class="rfOffsetBaseline renderedFont">Baseline</span>, <span class="rfOffsetCenter renderedFont">Center</span> </span>
          

result

Unrendered text No Offset, Baseline , Center

Spanning Multiple Lines

Multiple lines are handled and honor the text-align and line-height styles. New lines are indicated in regular HTML using <br />.

Note: The rendering engine does not currently support the rotation of Multiline text

code

<style type="text/css">
  .rfMultiLine {
    font-family: "Ninja Naruto"; 
    font-size: 20px; 
    color: #99f;
    line-height: 180%;
  }
</style>
<p style="text-align: right;"><span class="rfMultiLine renderedFont"> Some right-justified <br /> multi-line text</span></p>
           

result

Some right-justified
multi-line text

Comments:

Leave a Reply



(Your email will not be publicly displayed.)

Please type the letters and numbers shown in the image.Captcha Code