Introducing Sistr

posted 2007-09-17

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 isn't ready for a production site, this is an early version for feedback purposes only. There are still plenty of bugs, trust me.

Usage

Download sistr.js and save it to your web server (or reference it directly from this site).
Create a zip file with the font(s) you wish to use. Upload this to your webserver as well (Silverlight will only use fonts that are retrieved via HTTP).

Add the following into your HTML page:

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

In your CSS file, define a new class called sistr-replace (anything that starts with "sistr-" works). Here's an example:
```
.sistr-replace { }
```
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 (e.g. font-family: "Fil's Font|filfont.zip"). Make sure you also specify backup fonts for users who don't have Silverlight installed, like so:
```
.sistr-replace { font-family: "FontName|fonts.zip", Verdana, Arial, Sans-Serif; }
```
Set the class property on some of your HTML elements to sistr-replace (or whatever else you used) and re-load. For example:
```
<h3 class="entry-title sistr-replace">Hello World!</h3>
```
Your text should now be rendered using Silverlight.

Take a look at the demo test page as well.

Pros & Cons vs. sIFR

Pro:

Simpler setup: All you need to do is include the sistr.js file in your page and edit your CSS -- you do not need to edit any Silverlight or JavaScript code. sIFR is pretty easy too, but you need the Flash editing program in order to create a SWF file.
Support for Transparent Backgrounds: sIFR provides partial support, but it's not recommended within Firefox (I believe this is an issue with Flash).

Con:

Lack of Silverlight Install Base: Silverlight is nowhere near as common as Flash.
No protection for Font Files: In order to use a custom font with Silverlight, you have to have the font file available for download on a web server -- you cannot embed it or protect it in any way. This means you must use fonts that you either created or are liberally licensed (public domain, etc).
Immature: Both Flash and sIFR are much, much more mature than Silverlight and Sistr. There are many bugs that I have not sorted out yet.
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 think this may be a Silverlight bug, but occasionally text will get cut off in the vertical direction. Not sure how to fix it yet
Font size doesn't respond to user changes: Works fine if you reload though
No support for :hover state
No support for nested hyperlinks
Text selection does not work: Not sure how screen readers react either
Cannot support nested bold in Firefox: Works in IE though

Let me know if you find others -- or want to help fix bugs!