Tricks

Using sIFR with YUI's TabView

See this excellent article: http://www.nixonmcinnes.co.uk/2008/02/26/combining-yahoo-user-interface-and-sifr-rich-tabbed-typography/ .

Display sIFR Text for Western Languages other than English

If interested in displaying sIFR text in various languages through a translator service such as Google Translate, we have developed a trick for using sIFR with Western languages other than English. Note -- this trick is specific to sIFR 3 beta and above.

As noted in sIFR documentation, developers can embed additional glyphs in their SWF font files. While the final SWF font file can be very large if glyphs for languages such as Chinese or Japanese are included, the file size only increases slightly if all characters for Western languages are included, such as ñ, ç and ê.

By including these characters, we are able to use sIFR to display text for Western languages (English, Spanish, French, German, Italian, Portuguese, etc.) and turn off sIFR when a visitor translates the site into languages with a large number of glyphs.

The way we do it is with the following 3 steps:

1. Embed additional characters for Western languages (as described above) into the SWF font file. Always check to ensure the SWF file size is still reasonable.
2. In the javascript file where sIFR is activated (or another JS file where common functions are kept), copy and paste the PageQuery and queryString functions located on the following page: JS querystring parsing function.
   Note - If you have your own function for parsing a querystring through javascript, use that as a replacement for the code mentioned in the link.
3. Add javascript code above the sIFR.activate command to set sIFR.domains conditionally. sIFR.domains allows developers to turn off sIFR when encountering domains outside their own, and is useful in this situation to allow us to display sIFR for languages like Spanish and German but not Japanese. Using the queryString function of step 2, add the following code:
   
   if (queryString("hl")=="zh-CN" || queryString("hl")=="ja" || queryString("hl")=="ru" || queryString("hl")=="ar"){
       sIFR.domains = ['yourdomain.com', 'www.yourdomain.com'];
   } else {
   if (queryString("langpair")=="en|zh-CN" || queryString("langpair")=="en|ja" || queryString("langpair")=="en|ru" || queryString("langpair")=="en|ar"){
       sIFR.domains = ['yourdomain.com', 'www.yourdomain.com'];
   }
   }
   
   This code is specifically for Google Translate, but could be modified to find querystrings identifying language translation other than "langpair" and "hl". Please note, the following language identifiers are used by Google: en = English, zh-CN = Chinese, ja = Japanese, ru = Russian, ar = Arabic.

Once the code is in place, sIFR.domains will stop sIFR from being displayed when a user translates the website into Chinese, Japanese, Russian and Arabic, and will display sIFR for other languages.

Specifically Don’t Replace Certain Text

Sometimes it might be the case that you have some text that would usually be replaced with sIFR (because you are using a general selector like “h1” in your sIFR-config file) but you don't want this and can’t use a class or ID selector because you’ve just got too many elements of that kind. In this case we can tell sIFR to not replace some elements’ text.

Here’s how to do it:

1. Use the latest version of sIFR.
2. Put the code

   parseSelector.pseudoClasses = {
     'not': function(nodes, selector) {
       var result = [];
       each: for(var i = 0, node; i < nodes.length; i++) {
         node = nodes[i];
         var ignore = parseSelector(selector, node.parentNode);
         for(var j = 0; j < ignore.length; j++) {
           if(ignore[j] == node) continue each;
         }
         result.push(node);
       }
       return result;
     }
   }

   at the very top in your sIFR-config.js
3. Apply the selector in the “replace” function in the sIFR-config.js. There are different options:
   1. If the element that is supposed to be shown as plain text (i.e. not replaced by sIFR) has a specific ID or class it’s simply: sIFR.replace(cochin, {selector: "h1, h2:not(.example)"});
      – in real words this means: every h2 that does not have the class “example” will be replaced, i.e. the h2s that have that class will not be replaced but shown as plain default text.
   2. If the element has no specific ID or class then you must use a selector that is the parent of that element. Let’s assume that our h2 that shouldn’t be replaced is in a div with the class “example” (while the other ones that are replaced are not in such a div) then we would write: sIFR.replace(cochin, {selector: "h1, div:not(.example) h2"});
      – in real words that means: Every h2 that is in a div that does not have the class “example” should be replaced, i.e. h2s in divs with that class should not be replaced but shown as plain default text.

   ---

   Use ligatures

   While you can hard-code ligatures into the source html, that causes problems with accessability and search engine indexing. Instead, use the ‘modifyContentString’ parameter to point to a function that will change the text into ligatures before it is displayed by sifr. Remember to add the ligatures to the flash movie (when the flash movie is selected, click embed... and type in the ligature’s glyph). The following example includes the most common ligatures. Use character map to identify the ligatures that are present in your chosen font. See http://thejaffes.org/test/sifrtest1.php for an example. In that example, h1 has ligature substitution of a typical font (Arno Pro). h2 shows what you can do with a font that maps a variety of special variants to the reserved unicode space (Garamond Premiere Pro.)

   Edit the following ligature_it function to only include those ligatures in your font. You can add additional replace calls for additional substitutions if provided by your font, by changing the text within the /’s to correspond to the letter grouping that will be made into a ligature, and change the unicode replacement with the proper hexadecimal unicode number for your ligature.

   var ligature_it = function(str) {
    str=str.replace(/ffl/g,'\uFB04') ;
    str=str.replace(/ffi/g,'\uFB03') ;
    str=str.replace(/st/g,'\uFB06') ;
    str=str.replace(/fl/g,'\uFB02') ;
    str=str.replace(/fi/g,'\uFB01') ;
    str=str.replace(/ff/g,'\uFB00') ;
    return str ;
}

sIFR.replace(myfont.swf, {
     selector: 'h1',
    modifyContentString: ligature_it
});


   ---

   Updated on April 03, 2008 02:01 by Phil Schalm (70.66.196.74)

   | See revision | Back in time (27 older revisions)