Question

Does YUI support rtl languages? (rtl: right to left, such as hebrew or arabic).

If so, how? I want to display a MenuBar where the different menu items start near the right margin and go to the left.

Answer 1

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).