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-familyproperty 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
classproperty on some of your HTML elements tosistr-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-sizein IE: Due to IE’s lack of agetComputedStyleequivalent. - 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
:hoverstate - 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!
6 Comments
Nice work, Fil, this kicks ass.
Here’s a font that I created with a “liberal license”
http://blogs.msdn.com/synergist/archive/2007/09/19/a-free-typeface-for-silverlight.aspx
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.?
Jon — I’m already using Google to host the SVN for the project: http://code.google.com/p/sistr/
ONLINE - DRUGSTORE!
PRICES of ALL MEDICINES!
FIND THAT NECESSARY…
VIAGRA, CIALIS, PHENTERMINE, SOMA… and other pills!
Welcome please: pills-prices.blogspot.com
NEW INFORMATION ABOUT PAYDAY LOANS!
Welcome please: payday-d-loans.blogspot.com
GOOD LUCK!
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
4 Trackbacks/Pingbacks
[...] Fil posts about a cool library he made called Sistr that lets you use Silverlight to render high qua…. This is a good example of the power of Silverlight (since it really enables you to use markup for stuff in your normal HTML page way). But its also unfortunately the kind of thing that isn’t going to be adopted much until Silverlight gets deployed more widely. I suspect no one wants to force people to do a download just for somewhat better visuals. [...]
[...] I’ve played a bit with sIFR and its cool and all, but i’ve never been one to care about typography that much. Well i guess theres now and alternative to sIFR (and replacing text with images) that uses Silverlight. While its nice to have another option, Silverlight hasn’t been around that long and most web users probably dont have the plugin (yet) so if you use it the users are just going to get the standard html with the added bonus of some more javascript to download (definitely not ideal). I guess if you’re really serious about having nice anti-aliased typography you’re better off going with sIRF for the time being. Check it out [...]
[...] Introducing Sistr L’equivalente in silverlight si sirf per flash. In pratica permette di creare titoli con font a piacere senza dover creare le relative immagine ma sfruttando silverlight (tags: Programmazione .Net) Posted in Link. [...]
[...] на sIFR, която ползва Silverlight, вместо Flash. Името е Sistr. Ето ви и демо пейжд, където можете да видите и [...]