Rich Typography

Orbis is elated to introduce rich typography to the Bonsai Content Managment System.  By rich typography we mean presenting any type of typeface within an HTML page without cutting any graphics.  More importantly than the look however is the fact that this technique does not sacrafice accessibility, search engine friendliness, or markup semantics.

How It Works

Scalable Inman Flash Replacement or sIFR replaces short passages of plain browser text with text rendered in in any typeface of choice, regardless of whether or not users have that font installed on their systems.  It accomplishes this by using a combination of javascript, CSS, and Flash.

 

The Process

  1. A normal (X)HTML page is loaded into the browser.
  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes.
  3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of the page measuring each element designated as something to display in a desired typeface.
  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  5. Actionscript inside of each Flash file then draws that text in the chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

Check It Out

Notice the sub headlines above.  Surf this site to see how every h2 tag has been changed throughout the site with one line of code.

Examples:

http://orbisdesign.com/AboutOrbis_709.aspx
http://orbisdesign.com/Blog_7623.aspx
http://orbisdesign.com/Mission_296.aspx