Introducing Sistr

Note: Sistr depended on Silverlight and is long obsolete. This page only exists for historical purposes.

Over the weekend I spent some time seeing if I could replicate the functionality found in the excellent sIFR, using Silverlight instead of Flash. The result is Sistr. For the impatient – here’s a demo test page.

Note: This definitely wasn’t ready for a production site, this was an early version for feedback purposes only. There were still plenty of bugs.

Usage

1. Download sistr.js and save it to your web server.
2. Create a zip file with the font(s) you wish to use. Upload this to your webserver as well. Silverlight would only use fonts that were retrieved via HTTP.
3. Add the following into your HTML page:

<script type="text/javascript" src="sistr.js"></script>

4. In your CSS file, define a new class called sistr-replace (anything that starts with sistr- works). Here’s an example:

.sistr-replace { }

5. Use the font-family property to set the font name and URL to the font files, enclose them in quotes and separate with the | character, for example font-family: "Fil's Font|filfont.zip". Make sure you also specify backup fonts for users who don’t have Silverlight installed:

.sistr-replace {
  font-family: "FontName|fonts.zip", Verdana, Arial, Sans-Serif;
}

6. Set the class property on some of your HTML elements to sistr-replace (or whatever else you used) and reload:

<h3 class="entry-title sistr-replace">Hello World!</h3>

7. Your text should now be rendered using Silverlight.

Take a look at the demo test page as well.

Pros and Cons vs. sIFR

Pros:

• Simpler setup: All you needed to do was include sistr.js and edit your CSS. sIFR was pretty easy too, but you needed the Flash editing program in order to create a SWF file.
• Support for transparent backgrounds: sIFR provided partial support, but it wasn’t recommended within Firefox.

Cons:

• Lack of Silverlight install base: Silverlight was nowhere near as common as Flash.
• No protection for font files: In order to use a custom font with Silverlight, the font file had to be available for download on a web server. You couldn’t embed it or protect it in any way.
• Immature: Both Flash and sIFR were much more mature than Silverlight and Sistr.
• Many limitations: See below.

Known Issues

• No support for line height: Limitation in Silverlight.
• Must use absolute units for font-size in IE: Due to IE’s lack of a getComputedStyle equivalent.
• Occasional sizing issues: I suspected this was a Silverlight bug, but text would occasionally get cut off vertically.
• Font size doesn’t respond to user changes: Reloading fixed it.
• No support for :hover state
• No support for nested hyperlinks
• Text selection does not work
• Cannot support nested bold in Firefox: Worked in IE though.