Developer's manual
- Manual →
- Setting it up →
- Right-to-left and bi-directional text
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.
![[updated]](/images/updated.gif){kind=small}
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.diris not a reliable test). You can have adirattribute 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 {
margin:0;
}
Configuration notes
All configuration options are available except:
- popup menus are not supported
- rigid horizontal overflow doesn't work - a horizontal navbar will always be flexible.
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.
