I started looking for a way to type numbers backwards on a computer so that I could create an offline JavaScript app for practicing a multiplication technique that requires the answer to be typed in from right to left, from the ones digits up through the higher place-value digits of the answer. The final answer is read normally from left to right, but the answer is typed or hand-written from right to left, all on one line. It is called the "Criss-Cross System of Multiplication". I learned the method from the book Vedic Mathematics Made Easy, by Djaval Bathia. The relevant chapter can be downloaded for free.

My first problem was that I did not know how to type numbers backwards.

After researching online, I found writings and videos by Ms. Moriel Schottlender, Principal Engineer at Wikimedia Foundation, who is a specialist in how to display content in Wikipedia articles that use right-to-left languages like Hebrew, Arabic, or Persian. I contacted Ms. Schottlender by email and I explained my reason for wanting to type numbers backwards, and she replied immediately and solved my problem. The HTML tags <bdo dir="rtl" contenteditable></bdo>, when used with CSS to create a text entry area, will display any typed-in contents in reverse, both letters and numbers.

Ms. Schottlender gained her expertise by solving problems that arise when presenting right-to-left languages (like Hebrew, Arabic, or Persian) alongside left-to-right languages (like English) in Wikipedia pages and in software. Ms. Schottlender explains that displaying a mix of languages written in opposing directions on a webpage can be difficult because different browsers are not consistent in how they display changing directions of text. She describes her work as "system localization, supporting your user no matter where they are, and human-centered development."  Ms. Schottlender emphasizes, "I create human-centered software", and her work assisting with correctly-formatted written communication in webpages and software presenting multiple languages written in different directions certainly qualifies as a human-centered endeavor to help people understand and communicate with each other. Visit moriel.tech

Typing numbers backwards was the sine quo non of my desired "criss-cross" multiplication practice app, and Ms. Schottlender gave me a quick and easy solution. Thank you, Ms. Moriel Schottlender.

All HTML tags that can display numbers and text can display the content in reverse order. In the non-exhaustive examples below, HTML tags that can display text and numbers backwards are first displayed as code examples and are then followed by editable fields created with those HTML tags to allow experimental editing by the reader. A button is provided after each editable field to clear any editing, and a final button is provided after all the editable fields to clear all the editing fields at once. Notes accompanying each HTML tag example will point out normal and odd behaviors.

However, for HTML tags to create a visible field on a webpage, CSS style declarations must state the height, width, and background color associated with the tags to create a rectangular area on the webpage (even if the background color is "none" or "transparent"). Border lines around the rectangle should also be declared to make it easier to see the rectangle. Further, many such rectangles will not be exteriorly editable unless the opening HTML tag is embedded with the boolean attribute statement of either contenteditable or contenteditable="true" (either works). Most HTML tags also need the CSS declaration of unicode-bidi: bidi-override; which reverses the direction of text from the normal order on the user's computer, whether that is forward or backward. However, there is one set of HTML tags that have the unicode-bidi: bidi-override; property by default, the <bdo></bdo> tags provided to me by Ms. Moriel Schottlender. Finally, the CSS declaration of direction: rtl; is needed to start typing backwards from the right side of an editable field that has the CSS declaration of unicode-bidi: bidi-override; or that default property. Otherwise, without that CSS declaration of direction: rtl;, the content will be displayed in reverse order by pushing content from off the left side of the entry field without the cursor ever moving, which looks strange and would not be usable for my "Criss-Cross" Multiplication Practiceware which must have numbers typed backwards and away from the right side of the entry field.

Each example set of HTML tags below will show an embedded class attribute statement of either class="bidi" or class="noBidi". All the other CSS style declarations under both classes are the same:

 .bidi {      
    direction: rtl;
    unicode-bidi: bidi-override;
    width: 300px;
    height: 30px;
    background-color: none;
    border: 2px solid black;
    display: inline-block;
    padding: 5px;
    padding-bottom: 0;
    margin: 15px;
    margin-top: 5px;
    overflow: hidden;    
 }

 .noBidi {
    direction: rtl;
    display: inline-block;
    width: 300px;
    height: 30px;    
    background-color: none;
    border: 2px solid black;
    padding: 5px;
    padding-bottom: 0;
    margin: 15px;
    margin-top: 5px;
    overflow: hidden;     
 }             
        

Now for the examples:

While searching for alternate ways of displaying content backwards, I chanced upon Unicode codepoint ‮, which can be written in between any opening and closing HTML tags that can display text, and then all subsequent content inside the tags or added with exterior editing will be displayed backwards on the webpage without needing the CSS declaration of unicode-bidi: bidi-override;. (There is a sister codepoint ‭ that will display all subsequent text forward.)

Before Ms. Moriel Schottlender had given me a way to type numbers backwards with the <bdo></bdo> tags, I had thought that I might have to use JavaScript to immediately display each number in reverse order after each number is typed. Every programming language has a routine way of reversing the digits of a number. See, the linked geeksforgeeks.org article. However, such methods reverse a whole number rather than immediately displaying each number in reverse order as each number is typed.

The text-entry area below uses JavaScript code to append each new number to a string of any previously typed numbers, and then the reverse-display codepoint (‮) is concatenated before each updated string of numbers, and the current result is displayed after each new number is typed. As such, each newly typed number is immediately displayed in reverse order along with any previous numbers. A regular expression is used to filter out any entries that are not numbers.

Although the program works, it does not—as now written—allow common editing techniques like using the backspace key to remove numbers from the text-entry field. Even so, the program is a paradigm for how to alter typed-in entries using JavaScript and then immediately redisplay the content, thus effectively creating a little word processor.

  <script type="text/javascript">

      let str$ = "";
      let reverseCodepoint$ = "&#x202E;";
      let display$ = "";

      applet.addEventListener('keydown', (event) => {
        event.preventDefault();
        if (/^\d$/.test(event.key)) {
            str$ = str$.concat(event.key);
            display$ = (reverseCodepoint + str$);
            applet.innerHTML = display$;
        }
      });

  </script>

Click to reset all the above editing fields: Reset All Button

The steps below show how to use the "criss-cross" method for multiplying a two-digit number by a two-digit number (here, 27 x 38):

• 7 x 8 = 56. Bring down your 6 and mentally carry your 5.

        
       2 7
         ↕
  x    3 8
  ————————
         6
        
        

• 8 x 2 = 16, add your carry of 5 for 21, and hold in memory.

        
       2 7
        ⤡
  x    3 8
  ————————
         6
        
        

• 3 x 7 = 21. Add you prior subtotal of 21 for 42. Bring down your 2 and mentally carry your 4.

        
       2 7
        ⤢
  x    3 8
  ————————
       2 6
        
        

• 3 x 2 = 6, add your carry of 4 for 10, and bring it down (01 in reverse).

        
       2 7
       ↕
  x    3 8
  ————————
   1 0 2 6
        
        

• Note: When adding two-digit subtotals, like 78 + 45, I find it easier to add the tens-place digits and the ones-place digits separately, and then add them together. 70 + 40 = 110, and 8 + 5 = 13, and 110 + 13 = 123. If that was the sum of my cross-product subtotals, I would bring down my 3 and carry my 12.