3

I want to make my site supporting both LTR and RTL languages.

What I want is, if text loaded in some element is RTL then switch direction to RTL. Also for inputs, when user type text, it should trigger if it's RTL and change direction to RTL.

Like Facebook is doing it for example. If you type some Arabic text in search it will automatically switch direction to RTL

Didn't found any practice tutorial by googling, any script or so.

I only found attribute dir="auto" which automatically triggers correct direction but looks like this it is not supported with older Browsers.

Any advice, tutorial, script how to do this would help.

9
  • The way to do this is to check the content during typing (onkeyup) and based on the content (first-char or all string) to chase the value of the dir attribute.
    – Dekel
    Dec 2, 2016 at 0:44
  • 1
    The dir="auto" is part of html5 (which, as you said, is not supported by older browsers).
    – Dekel
    Dec 2, 2016 at 0:47
  • @Dekel about your first comment. Yeap I saw that as option but is there any example of JS for that or something. I am surprised that I cannot find any example or anything
    – carpics
    Dec 6, 2016 at 22:27
  • I'm not so sure what is the problem to write it yourself. Did you try something already?
    – Dekel
    Dec 6, 2016 at 23:07
  • 1
    You are pretty close. There are several ways to go with it. Yours is one of them (but you don't need RTL languages, you need the actual characters of there languages). Learn some regex, start something, then you can get help :)
    – Dekel
    Dec 7, 2016 at 11:47

1 Answer 1

1

If you only want to support switching the textbox context from LTR to RTL when the user types, then you will have to listen to the input events (input, keypress, keydown, etc, whichever works best for your case) and let the code decide whether the textbox is LTR aligned or RTL aligned.

You should note, though, that the algorithm for this is not all that straight forward, and that different products work differently. A few examples -

  • Facebook uses an algorithm that, for the most part, tries to recognize the first "strong" character, so typing a sentence with one Hebrew word followed by a lot of English will still show the paragraph as RTL aligned. (They also seem to have a difference between what you see when you type and what you see when the comment is posted but that's a different issue)
  • Google hangouts seems to switch its RTL/LTR contexts based on the number of strong characters in each direction. As you type, your context may switch several times from LTR to RTL if you start typing one language over the other.

There is no right or wrong here, there's only preference and what works best as your algorithm.

You can read about "strong characters" in the Unicode Bidirectional Algorithm here: http://unicode.org/reports/tr9/

You can see an example of how to recognize the first "strong character" in a string for embedding purposes in MediaWiki's language file, with the regex that tests directionality (group 1 is LTR and group 2 RTL) You can use these to create a JavaScript method that sets your textarea's dir="" attribute based on either the first strong character or the majority of characters, as you see fit: https://github.com/wikimedia/mediawiki/blob/6f19bac69546b8a5cc06f91a81e364bf905dee7f/languages/Language.php#L174

As a side note, I will just point out that supporting RTL/LTR online is not just about typing and textboxes. Changing between LTR and RTL contexts also involves UI adjustments, like mirroring the alignment of the content and/or the positions of things like menus and the logo.

This is relevant if you want to allow your page to be translated to an RTL language, which means you will need to also mirror the layout. If your only goal is to switch contexts in the textbox, you shouldn't worry about this, but if you want to make sure the site allows for translation, you need to consider methods of mirroring your UI and your entire interface.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.