Introducing Sistr

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!

Viewing 5 Comments

Adam Kinney 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Nice work, Fil, this kicks ass.

reblog flag

http://adamkinney.com

Michael S.Scherotter 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Here's a font that I created with a "liberal license"
http://blogs.msdn.com/synergist/archive/2007/09...

reblog flag

http://blogs.msdn.com/Synergist

Jon Galloway 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Wow, Sistr is cool, and I like the MIT license. Any thought to hosting it on an open source project site like Google Code, CodePlex, etc.?

reblog flag

http://weblogs.asp.net/jgalloway

Fortes 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Jon -- I'm already using Google to host the SVN for the project: http://code.google.com/p/sistr/

reblog flag

2 /people/fortes/ /people/fortes/following/ http://fortes.com/ 4807956 in/fortes fortes fortes fortes fortes

Maverjk 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Hi, I've tried to use this Tool (I think that is a wonderfull Tool, especially for the Font Embedding), with the Hope that can work in ASP.NET 2.0, but after follow all instructions and done more attempts, i have reached the conclusion that probably don't work in ASP.NET 2.0! The Problem that i have found is a complete whitened of the text after that the Script is started!
If there is someone that know a solution please contact me!
Exuse me for my English

reblog flag

Trackbacks

(Trackback URL)

Font Rendering Using Silverlight » AlexHopmann.com
September 17, 2007 at 9:07 pm

[...] Fil posts about a cool library he made called Sistr that lets you use Silverlight to render high qua.... ...
MD Blog » Blog Archive » sistr and sIFR
September 20, 2007 at 6:52 am

[...] I’ve played a bit with sIFR and its cool and all, but i’ve never been one to care about ...
links for 2007-09-25 « Flatlineato
September 24, 2007 at 7:21 pm

[...] Introducing Sistr L’equivalente in silverlight si sirf per flash. In pratica permette di creare titoli con font a piacere ...
RIABG.org » sIFR vs Sistr
October 11, 2007 at 2:59 pm

[...] Ð½Ð° sIFR, ÐºÐ¾ÑÑ‚Ð¾ Ð¿Ð¾Ð»Ð·Ð²Ð° Silverlight, Ð²Ð¼ÐµÑÑ‚Ð¾ Flash. Ð˜Ð¼ÐµÑ‚Ð¾ Ðµ Sistr. Ð•Ñ‚Ð¾ Ð²Ð¸ Ð¸ Ð´ÐµÐ¼Ð¾ Ð¿ÐµÐ¹Ð¶Ð´, ÐºÑŠÐ´ÐµÑ‚Ð¾ Ð¼Ð¾Ð¶ÐµÑ‚Ðµ Ð´Ð° Ð²Ð¸Ð´Ð¸Ñ‚Ðµ ...