R – sIFR and RTL Languages

There is no support for RTL languages in YUI 2.x. I filed a bug about it over a year ago and got a response saying they might add it in a later release. (I can no longer find the bug since they switched to their new tracker, sorry.) Hopefully they're adding RTL support for YUI 3.x, but I haven't checked out the preview releases (nor can I find them mentioning adding RTL support).

That's not to say YUI menus cannot do RTL, though it takes a bit of work as there's no built-in support. I make no claims that this works 100% in all browsers, especially not IE.

First, you need the menu items to flow the opposite direction, and start on the opposite side of the page. I believe this works in most browsers (except IE6, of course, argh - for that browser, you need to do some extra work which I don't remember the answer to):

.yuimenubaritem { float: right; }

Second, you need the submenus of the MenuBar to flow the opposite direction. You can do this by changing the submenualignment attribute of your Menus' configurations:

// For the main submenu
new YAHOO.widget.MenuBar("id", { submenualignment: ["tr","br"] });

// You have to manually add all the Menus,
// so that you can set the submenualignment on each.
new YAHOO.widget.Menu("id", { submenualignment: ["tl","tr"] });

The worst part is trying to get the keyboard events to work correctly, as at this point pressing right makes the cursor go left and vice-versa. To do that, you'll have to hijack MenuBar's _onKeyDown() and change it so that, if the MenuBar is set RTL (store this info in a var somewhere), it processes left/right a bit differently. (Sorry, you'll have to figure this one out on your own, but it should be a simple matter of switching cases on key presses).

You would add the text-transform property to the CSS rules in the css property of the options object passed to the sIFR.replace method (phew!).

An example:

sIFR.replace(myFont, {
  selector: 'h2',
  css: '.sIFR-root { font-size: 20px; color: #008cba; text-transform: uppercase; }',
  wmode: 'transparent'
});