|
|
|
|
![]() ![]() |
Mar 1 2007, 10:21 PM
Post
#1
|
|
|
Premium Member Group: Members Posts: 242 Joined: 4-August 05 From: Los Angeles Member No.: 7,624 |
sIFR 2.0
an open source solution to rich typography for the web I plan on trying this soon and just wanted to see if anyone else has had any experience with it. It looks like it could really come in handy. I was going to try it out and experiment on a past job, but the coding of the website ended up being passed on to a web programmer. Apparently it uses a combination of flash, javascript and CSS to embed non web-safe fonts into a web page while still making it appear like a normal html page. What I mean is that the user should still be able to highlight and copy text etc. If the user does not have the flash plugin or has java disabled it will just revert to the CSS styles using a web-safe font. Go here to see sIFR in action: http://www.mikeindustries.com/blog/files/sifr/2.0/ (thanks .:Brian:.) You can read more about it at: http://www.mikeindustries.com/sifr/ and http://usabletype.com/weblog/how-and-when-to-use-sifr/ Here is a description from http://www.mikeindustries.com/sifr/ QUOTE How it works Here is some more info from http://usabletype.com/weblog/how-and-when-to-use-sifr/sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire 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 you designate. 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 your page measuring each element you've designated as something you'd like "sIFRed". 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 your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie. This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed. QUOTE * sIFR does not require any changes to the (X)HTML code, all the work is done by Javascript, Flash and CSS. * If the user does not have Flash installed or Javascript enabled then the (X)HTML text is displayed and styled by CSS. * sIFR is scalable, and when rendered will adjust to the users font size settings. * sIFR is compatible with all screen readers. No problems or issues have ever been reported. * sIFR text is selectable with the mouse, although visual confirmation of the selection may be absent when selected with body text. * sIFR does not affect search engine placement or ranking, nor does it hide textual content from search engines or users. The conclusion should be that sIFR is an accessible, mature technology, and that its use must be given serious consideration by designers and developers. This post has been edited by foolakadugie: Mar 2 2007, 04:24 AM |
|
|
|
Mar 1 2007, 10:39 PM
Post
#2
|
|
|
Premium Member Group: Members Posts: 219 Joined: 13-February 07 Member No.: 20,371 |
Wow, i like the idea of this.
I have often wanted to put some strange font on my site for some reason or another (usually a heading of some sort), and I can't stand when I have to use images for that sort of thing. The idea of being able to use this for displaying the stuff is nice. Also, after looking at the page, they do have an example page: http://www.mikeindustries.com/blog/files/sifr/2.0/ So you may want to have a look at it (it looks really nice). I am not sure if I want to use this or not though, just because I have gotten my site set up, and it looks perfectly fine with standard fonts. But maybe the next time my site gets re-designed? Or maybe some other website? |
|
|
|
Mar 2 2007, 12:30 AM
Post
#3
|
|
|
The Modernator Group: Members Posts: 486 Joined: 6-August 06 From: The Interweb! Member No.: 15,021 |
I must say I am VERY impressed by this!! The graphic designer I work with is going to have a mental breakdown over this
I am forever telling him to STOP using his thousands of fancy of fancy fonts on stuff that we build..maybe now I can offer a comprimise Thanks a lot for posting this up!! Marky;) |
|
|
|
Mar 2 2007, 12:43 AM
Post
#4
|
|
|
Member [ Level 2 ] Group: Members Posts: 58 Joined: 9-January 07 Member No.: 19,280 |
I'm definitely going to try this out! I'm so sick of the same fonts for all the web, and if you want to add a not-so-common-but-great font, you have to make a big image, which increases loading times, and I usually leave it out...
Now perhaps we can work with more freedom in design. I'll post here what comes out from this. |
|
|
|
Mar 2 2007, 03:49 AM
Post
#5
|
|
|
Premium Member Group: Members Posts: 242 Joined: 4-August 05 From: Los Angeles Member No.: 7,624 |
Yeah I will play with it soon and I would be interested in seeing anyone else's results with it.
The same old fonts really can get old after a while and it seems like it would definitely make things easier with fancy headers. This kind of technology really could bring a new look and more freedom to web design. I know it says that it is mainly for smaller blacks of text. Do you think the reason for that is that body type may take too long to render? I suppose that if this method is used, it would be best to use a typeface with similar proportions to that of a web-safe font so that if it does revert back to the web-safe font, their won't be any serious typographic changes that would mess with the layout. Edit: I found the answer to one of my questions: from http://usabletype.com/weblog/how-and-when-to-use-sifr/ QUOTE Loading speed
The rendering speed of the replaced text is an important consideration when using sIFR, and although speeds have been significantly increased since early versions, there can still be a distinct delay if there are many instances of sIFR on screen at one time. This is perhaps the best example of why using sIFR in moderation (ie. one headline per page, or headline per post) is currently the ideal way to use the technique. This is one of the most frustrating drawbacks of using Flash replacement. The temptation when first implementing sIFR is to replace too many elements on the one page. For this to be viable, loading speeds have to be greatly increased; and although a nice nippy server will help you out, the true culprit is the time that the rather bulky Javascript takes to run. This post has been edited by foolakadugie: Mar 2 2007, 06:05 AM |
|
|
|
Mar 2 2007, 10:41 AM
Post
#6
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 1,013 Joined: 7-November 05 From: Belgrade, Serbia Member No.: 9,500 |
Even though I am not a fan of Flash myself, I must admin that this idea/project is very good. It gives web designer a lot more freedom when choosing what fonts to use. Just like Valkyria said, you see the same fonts all the time - Arial, Verdana, Tahoma, Times New Roman and Trebuchet MS - it has become monotonous. Unfortunately, I don't believe this idea will live, since Astahost is the first place where I see it mentioned. Otherwise, it would be all over the web
|
|
|
|
Mar 6 2007, 04:58 PM
Post
#7
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 26 Joined: 6-March 07 Member No.: 20,755 |
This tricks is best for headers and some quoted elements not suited for the whole site text replacement coz it used javascripts and flash which make your site too long load.
And the version 3 is currently in beta, new features and some bug fixes. link: http://novemberborn.net/sifr3/look-into-the-future |
|
|
|
![]() ![]() |
Similar Topics
| Topics | Topics | |
|---|---|---|
|
|
|
|
Lo-Fi Version | Time is now: 11th October 2008 - 12:43 PM |