Bidi Tutorial: RTL YUI Calendar in Arabic

By YUI TeamMay 23, 2011
This example shows how to create a right-to-left Arabic version of a "Basic Popup Calendar" with YUI 2.9.0. The YUI Calendar component contains a number of useful APIs, including a configurable close button, dynamic iframe shim, and APIs for hiding and showing from the user. LTR: YUI Calendar in English screenshot RTL: YUI Calendar in Arabic screenshot Click here to check out the working example. Click here to download all the files needed to run the example locally.

Steps to Bidirectionalize a Widget to RTL

  1. Declare the primary language and change the direction for the page inside the <html> tag with the lang attribute and dir="rtl", this point in case the whole page is rtl, but if the page is ltr, we should add the rtl in widget.
  2. Convert CSS attributes and values that relate to direction in the style sheet, including float, image positions, text-align, margin, padding, border, etc. We recommend CSSJanus for converting CSS.
  3. Update any JavaScript related to directionality. As much as possible, we recommend making direction configurable in your JavaScript code.
  4. Translate text strings from the original language to the RTL language in both the HTML page and JavaScript.
  5. Test sprite images in case they need to be flipped.
  6. Check A-grade compatibility, testing the calendar across browsers to be sure it's working fine.