Developer's manual

Right-to-left and bi-directional text

Using the menu with RTL or bi-directional text is mostly no different, but there are a few things to note, and some specific limitations to consider.

Using RTL text

There are three significant things you need to do:

1. Set the horizontal alignment variable to "rtl"
This sets the writing-mode for the menu CSS, and anchors the navbar to the right-edge of the page (you can't have an RTL navbar aligned to the left).
2. Add the directionality attribute dir="rtl" to your <html> tag
This is how the menu script detects directionality (document.dir is not a reliable test). You can have a dir attribute on the <body> tag as well - that won't make a difference - but it MUST be there on <html>.
3. Ensure your page has the correct language and encoding
I know this is obvious, but it's vital to check that the language, encoding and directionality all match, or else the menu (indeed your whole page) may not display correctly.

Now, if you have a horizontal navbar and you're using absolute positioning, you'll be vulnerable to a positioning quirk in Internet Explorer and Opera, whereby the right:0; position is offset by the same amount as the document margins, and that stops the navbar from sitting flush with the edge. Therefore if you use that particular configuration you should nullify the margins, to avoid cross-browser discrepancies, like this:

html,body {

Configuration notes

All configuration options are available except:

Browser notes

Some browsers which otherwise support the menu won't work with RTL text, for reasons external to the script - Mac/IE5, Opera 5, 6 and 7.0-7.1 either don't support non-Latin encoding, or don't support directionality. But that being the case, no users of these browsers will be looking at an RTL site, so we don't have to think about them at all.

Of the browsers that remain, some have feature limitations - either because I couldn't make them work, or they were unstable and had to be disabled. Specifically:

  • In Win/IE5.0, and Mozilla Gecko browsers earlier than 1.0.2 (Netscape 7.02), there are no menus - only the main navigation bar.
  • In Konqueror, submenu indicator arrows are not supported.
  • In Safari 1.0, if you use border collapse on the links in a horizontal navbar they will overlap by one border-thickness each way; this can create the appearance of internal borders appearing to shift position slightly onmouseover.


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.