Inserting BiDi support tags in online Textareas

Jun 6, 2009

This post will only be relevant to readers of right-to-left languages, and to developers who develop for such languages. As such, my next post will be a translation of this one into Hebrew.
A bit over a year ago, a friend of mine wrote about embedded unicode right-to-left and left-to-right characters in a flow of text. In a nutshell, when writing text that contains both LTR characters (like English) and RTL characters (like Hebrew), the flow of the text can wind up messed up. Here’s an example:

The (proper) solution to this conundrum is this: wrap your text, which you want flowing in the opposite direction from it’s encapsulating element, in the unicode characters for left-to-right embedding (or right-to-left embedding), and the Pop Directional Formatting character. For further reading, go here.

Back when Liron wrote that post of his, I thought it would be a nice little project to tackle – write a Firefox plugin or Greasemonkey user-script that allows you to encapsulate your text in these characters, for the sake of all those who will follow and read it. I have since then become familiar – and very fond of – bookmarklets. I think a bookmarklet is the best way to distribute the solution to this problem, because it’s lightweight, easy to install and modify, and (at least in theory) cross browser.

Coming to tackle this issue, I knew I needed to insert a string of characters in front of and after the selected text in a textarea. Where have I seen this done before?… Oh, right, right here in WordPress, when I want to make text I’m writing bold or italicized.
So I went about finding the Javascript behind that functionality (it’s the function edInsertTag), and I pulled out of it the bits that are relevant to this situation, and to Firefox.

With no further ado, I present to you RTL and LTR.

Simply drag those two links to your bookmark toolbar (I actually have a bookmark folder just for bookmarklets), and next time you’re writing bidirectional text, select the wrongly-flowing part, and align it properly.
You can try them out here:

I’d be happy to get feedback on these bookmarklets. They’ve only been tested in Firefox, and I think they will not work in other browsers, seeing how I only used one of the three cross-browser-compatibility parts of the wordpress JS I cannibalized. If they do work in other browsers, or do not work as expected in Firefox, please let me know.

Posted by | Categories: weekend project | Tagged: , , |Tagged: , , |

Share with others

4 Responses so far | Have Your Say!

  1. ‫החדרת תגי תמיכה בדו-כיווניות (BiDi) בשדות טקסט‬ - <Angered Brackets />
    June 20th, 2009 at 16:38 #

    [...] 2: פוסט זה הוא תרגום לעברית של הפוסט הקודם שלי, למקרה ואתם רוצים לקרוא את זה באנגלית או לחלוק עם אנשים [...]

  2. Yes, it are! » כיווניות עברית לטקסט נקי מעורב – עדכון
    July 3rd, 2009 at 02:56 #

    [...] כדי לכפר על כך שהוא אמר שהוא יעשה את זה לפני שנה וחצי ועשה את זה רק לפני חודש, הוא אפילו פרסם את זה גם [...]

  3. Dotan Cohen
    October 19th, 2009 at 21:46 #

    Not working for me, Kubuntu 9.04 with Firefox 3.0. I do not have any fancy Javascript extensions installed.

  4. Eyal Sela
    March 27th, 2010 at 22:55 #

    Doesn’t work for me :/

Leave a Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>