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.
bidihebrewjavascriptright-to-leftyui
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.
In a language implementing classical inheritance like Java, C# or C++ you start by creating a class--a blueprint for your objects--and then you can create new objects from that class or you can extend the class, defining a new class that augments the original class.
In JavaScript you first create an object (there is no concept of class), then you can augment your own object or create new objects from it. It's not difficult, but a little foreign and hard to metabolize for somebody used to the classical way.
Example:
//Define a functional object to hold persons in JavaScript
var Person = function(name) {
this.name = name;
};
//Add dynamically to the already defined object a new getter
Person.prototype.getName = function() {
return this.name;
};
//Create a new object of type Person
var john = new Person("John");
//Try the getter
alert(john.getName());
//If now I modify person, also John gets the updates
Person.prototype.sayMyName = function() {
alert('Hello, my name is ' + this.getName());
};
//Call the new method on john
john.sayMyName();
Until now I've been extending the base object, now I create another object and then inheriting from Person.
//Create a new object of type Customer by defining its constructor. It's not
//related to Person for now.
var Customer = function(name) {
this.name = name;
};
//Now I link the objects and to do so, we link the prototype of Customer to
//a new instance of Person. The prototype is the base that will be used to
//construct all new instances and also, will modify dynamically all already
//constructed objects because in JavaScript objects retain a pointer to the
//prototype
Customer.prototype = new Person();
//Now I can call the methods of Person on the Customer, let's try, first
//I need to create a Customer.
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
//If I add new methods to Person, they will be added to Customer, but if I
//add new methods to Customer they won't be added to Person. Example:
Customer.prototype.setAmountDue = function(amountDue) {
this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function() {
return this.amountDue;
};
//Let's try:
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());
var Person = function (name) {
this.name = name;
};
Person.prototype.getName = function () {
return this.name;
};
var john = new Person("John");
alert(john.getName());
Person.prototype.sayMyName = function () {
alert('Hello, my name is ' + this.getName());
};
john.sayMyName();
var Customer = function (name) {
this.name = name;
};
Customer.prototype = new Person();
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue = function (amountDue) {
this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function () {
return this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());
While as said I can't call setAmountDue(), getAmountDue() on a Person.
//The following statement generates an error.
john.setAmountDue(1000);
Unicode characters have different properties associated with them. These properties cannot be derived from the code point; you need a table that tells you if a character has a certain property or not.
You are interested in characters with bidirectional property "R" or "AL" (RandALCat).
A RandALCat character is a character with unambiguously right-to-left directionality.
Here's the complete list as of Unicode 3.2 (from RFC 3454):
D. Bidirectional tables D.1 Characters with bidirectional property "R" or "AL" ----- Start Table D.1 ----- 05BE 05C0 05C3 05D0-05EA 05F0-05F4 061B 061F 0621-063A 0640-064A 066D-066F 0671-06D5 06DD 06E5-06E6 06FA-06FE 0700-070D 0710 0712-072C 0780-07A5 07B1 200F FB1D FB1F-FB28 FB2A-FB36 FB38-FB3C FB3E FB40-FB41 FB43-FB44 FB46-FBB1 FBD3-FD3D FD50-FD8F FD92-FDC7 FDF0-FDFC FE70-FE74 FE76-FEFC ----- End Table D.1 -----
Here's some code to get the complete list as of Unicode 6.0:
var url = "http://www.unicode.org/Public/6.0.0/ucd/UnicodeData.txt";
var query = from record in new WebClient().DownloadString(url).Split('\n')
where !string.IsNullOrEmpty(record)
let properties = record.Split(';')
where properties[4] == "R" || properties[4] == "AL"
select int.Parse(properties[0], NumberStyles.AllowHexSpecifier);
foreach (var codepoint in query)
{
Console.WriteLine(codepoint.ToString("X4"));
}
Note that these values are Unicode code points. Strings in C#/.NET are UTF-16 encoded and need to be converted to Unicode code points first (see Char.ConvertToUtf32). Here's a method that checks if a string contains at least one RandALCat character:
static void IsAnyCharacterRightToLeft(string s)
{
for (var i = 0; i < s.Length; i += char.IsSurrogatePair(s, i) ? 2 : 1)
{
var codepoint = char.ConvertToUtf32(s, i);
if (IsRandALCat(codepoint))
{
return true;
}
}
return false;
}
Best Answer
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):
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:
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).