Bidi Tutorial: RTL YUI Calendar in Arabic
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:
RTL:
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
- Declare the primary language and change the direction for the page inside the
<html>
tag with thelang
attribute anddir="rtl"
, this point in case the whole page is rtl, but if the page is ltr, we should add the rtl in widget. - 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.
- Update any JavaScript related to directionality. As much as possible, we recommend making direction configurable in your JavaScript code.
- Translate text strings from the original language to the RTL language in both the HTML page and JavaScript.
- Test sprite images in case they need to be flipped.
- Check A-grade compatibility, testing the calendar across browsers to be sure it's working fine.