For this blog article I have taken the last two text boxes from my internationalised programming challenge 9 at jsfiddle.net/coas/qa8190kn. Both text boxes contain the same text which is a mix of English and Hebrew. English is written and read left to right. Hebrew is written and read right to left. We are going to look more closely at bidirectional (bidi) text in browsersʼ text boxes. The two text boxes are:
text box 1: direction is Left ➜ Righttext box 2: direction is Left ➜ Right
The order of the text in these two boxes is in display order which is the order presented to users. The order in which it is actually stored is called memory order or logical order. It is the order in which I typed the text. The memory order is:
So, a is the first character and h is the last character of the text. Selection of text is determined by memory order. Selecting characters 3 thru 6 will give cdבא, characters 6 thru 9 gives הדגב, characters 11 thru 14 gives תזef and so forth.
Now onto the selection process. One way of selecting text is to use shift in conjunction with the arrow keys. You should make the following associations:
- text box 1, Left ➜ Right
- right arrow key becomes forward
- left arrow key becomes back
- text box 2, Left ➜ Right
- left arrow key becomes forward
- right arrow key becomes back
Having made the above associations, forget all about left and right and think only of forward and back where forward is moving forwards through the text (memory order) and back is moving backwards through the text (memory order).
Now to selection, starting with the cursor between b and c:
- shift forward forward forward, will select cdא
- shift back back, will select ab
These key sequences will select the same text in both textboxes 1 & 2. The difference is in how it is presented to the user. It is presented to the user in display order.
I suggest you practice selecting text in text boxes 1 & 2. Initially it will seem somewhat confusing. When you are selecting text in text boxes 1 & 2, use the memory order text box as a reference to more easily determine what should be selected.
Now try selecting text in the following two text boxes. They both contain the same text, which is a mix of Khmer and Arabic. Additionally, paste your selections into a word processor.
text box 3: direction is Left ➜ Righttext box 4: direction is Left ➜ Right
Onto a related topic which is cursor movement in browser text boxes. Forget text selection. Cursor movement with left and right arrow keys is in display order only. I think there should be a browser option to switch between cursor movement by display order and cursor movement by memory order. I would like the same option in word processors and text editors.
