{"id":67133,"date":"2006-06-12T13:24:00","date_gmt":"2006-06-12T13:24:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2006\/06\/12\/how-can-i-add-a-right-to-left-text-box-to-a-web-page\/"},"modified":"2006-06-12T13:24:00","modified_gmt":"2006-06-12T13:24:00","slug":"how-can-i-add-a-right-to-left-text-box-to-a-web-page","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-add-a-right-to-left-text-box-to-a-web-page\/","title":{"rendered":"How Can I Add a Right-to-Left Text Box to a Web Page?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I add a right-to-left text box to a Web page?

— B<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, B. To begin with, we should note that we aren\u2019t entirely sure that we know what we\u2019re talking about here. (Good point: that\u2019s a disclaimer that could<\/I> be added to all of our columns, couldn\u2019t it?) We are aware of languages – Arabic languages and Hebrew, for example – that are read from right-to-left; however, we aren\u2019t exactly proficient in any of those languages. (And, as our editor continually points out, we aren\u2019t all that good when it comes to English, either.)<\/P>\n

Nevertheless, we think (hope) that this is what you had in mind:<\/P>

<SCRIPT LANGUAGE=”VBScript”>\n    Sub TestSub\n        Msgbox ScriptArea.Value       \n    End Sub\n<\/SCRIPT><\/p>\n
<body>\n    <textarea name=”ScriptArea” rows=5 cols=70 dir=”rtl”><\/textarea><p>\n    <input id=runbutton  type=”button” value=”Run Script” onClick=”TestSub”>\n<\/body>\n<\/PRE>\n
Believe it or not, this is even easier than it looks; after all, much of the code is there in order to: 1) create a button (which you might not need in your Web page or HTA), and 2) to add a subroutine that runs when the button is clicked. As it turns out, the part you really<\/I> care about consists of nothing more than a single HTML tag:<\/P>
<textarea name=”ScriptArea” rows=5 cols=70 dir=”rtl”><\/textarea>\n<\/PRE>\n
What we\u2019re doing here is adding a multi-line text box control (or a <textarea>) named ScriptArea; we\u2019re also sizing the text box so it displays 5 rows, with 70 columns per row. Nothing too fancy there. But take a look at this additional property assignment: dir=”rtl”<\/B>. That\u2019s<\/I> the cool part. The dir<\/B> property determines the reading order of a text box. If dir is set to rtl<\/I> then the reading order is right-to-left, which is what you were looking for. If dir is set to ltr<\/I> (or if the dir property is omitted altogether) then the reading order is set to left-to-right. Believe it or not, that\u2019s all we have to do to create a right-to-left text box.<\/P>\n
Here\u2019s what the text box looks like when added to an HTA (HTML Application):<\/P>\"Hey, \n

Not bad, if we do say so ourselves. (Or, if you\u2019re reading from right-to-left: dab toN.) Type the information into the text box and click the Run Script<\/B> button; with any luck, a message box will appear echoing back the contents of the text box.<\/P>\n
Now, we know what you\u2019re thinking: yes, the text is right-justified and, yes, the periods are in an unusual place. However, the text doesn\u2019t actually read<\/I> right-to-left. True: that\u2019s because we\u2019re typing in English, which uses the so-called Latin alphabet. Text will not be displayed right-to-left when using a Latin alphabet. But things will be very different if you type using Arabic, Farsi, Hebrew, or any other language that does<\/I> read from right-to-left. (Try it and see.) <\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. You say you don\u2019t have any idea what an HTA is, and you don\u2019t really understand what it means to add an HTML control? Then you need to check out the HTA Developers Center<\/B><\/A> here in the Script Center.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
Because we have some time to kill (no baseball game tonight), we thought we\u2019d toss in some bonus code, just for the heck of it. The following Web page\/HTA has two<\/I> buttons on it: not only does it have the Run Script<\/B> button but it also has a button labeled Switch Direction<\/B>. When you click the Switch Direction<\/B> button the following subroutine runs:<\/P>
Sub SwitchSub\n    If ScriptArea.dir = “ltr” Then\n        ScriptArea.dir = “rtl”  \n    Else\n        ScriptArea.dir = “ltr”\n    End If     \nEnd Sub\n<\/PRE>\n
As you can see, this subroutine checks the value of ScriptArea\u2019s dir property. If dir is equal to ltr<\/I>, then the value is changed to rtl<\/I>; if the value is not<\/I> equal to ltr<\/I> (meaning it must be equal to rtl<\/I>) then the value is changed to ltr<\/I>. To put all that in somewhat plainer English, the button simply toggles ScriptArea between right-to-left and left-to-right. Click the button once and the text box reading direction will be left-to-right; click it a second time, and the reading direction switches back to right-to-left. Etc. etc.<\/P>\n
Here\u2019s the complete code:<\/P>
<SCRIPT LANGUAGE=”VBScript”>\n    Sub TestSub\n        Msgbox ScriptArea.Value       \n    End Sub<\/p>\n
    Sub SwitchSub\n        If ScriptArea.dir = “ltr” Then\n           ScriptArea.dir = “rtl”  \n        Else\n           ScriptArea.dir = “ltr”\n        End If     \n    End Sub\n<\/SCRIPT><\/p>\n
<body>\n    <textarea name=”ScriptArea” rows=5 cols=70 dir=”rtl”><\/textarea><p>\n    <input id=runbutton  type=”button” value=”Run Script” onClick=”TestSub”>\n    <input id=switchbutton  type=”button” value=”Switch Direction” onClick=”SwitchSub”>\n<\/body>\n<\/PRE><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I add a right-to-left text box to a Web page?— B Hey, B. To begin with, we should note that we aren\u2019t entirely sure that we know what we\u2019re talking about here. (Good point: that\u2019s a disclaimer that could be added to all of our columns, couldn\u2019t it?) We are […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-67133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I add a right-to-left text box to a Web page?— B Hey, B. To begin with, we should note that we aren\u2019t entirely sure that we know what we\u2019re talking about here. (Good point: that\u2019s a disclaimer that could be added to all of our columns, couldn\u2019t it?) We are […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/67133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=67133"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/67133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=67133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=67133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=67133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}