CODEWITHSUNDEEP
arrayshtmlright-to-left
vbrin27
vbrin27

Reputation: 991

Is it necessary to give direction:rtl to the input text field?

I am developing a colorpicker widget in which we support RTL. We have a hex field with # as prefix which is an input text field. If I give direction:rtl to the text field, it acts different, the typed character appends to the text but the cursor is to the left of the text.

To verify this, I changed the Language to Arabic and worked in Mac. When I choose the English keyboard, the input field is ltr, only the text alignment is to the right and When I choose the Arabic keyboard, the input field becomes rtl. If the os itself handles the text field based on keyboard language, is it necessary to give direction:rtl to the hex field in colorpicker?

Note: If I give rtl to the hex field, # gets attached to the end if the first letter is an alphabet, it gets prefixed to the text, if the first letter is a numeric. You can check this fiddle - https://jsfiddle.net/brindhaa10/cv04o8wr/

Code:

  <div class="rtl">
  <h4>
      RTL 
  </h4>
   <div class="row">  
       <input value="#ffffff" /> 
       <span> In RTL, when <b>#</b> precedes an alphabet, it is repositioned to the end </span>
  </div>
  <div class="row">
      <input value="#000fff" /> 
       <span> In RTL, when <b>#</b> precedes a number, it is not repositioned. </span>
  </div>
</div>

Same problem arises for percentage field, currency field etc... If it is RTL, is it correct to reposition the symbols Ex: 100% will be shown as %100 in RTL.

Upvotes: 0

Views: 549

Answers (1)

Leo
Leo

Reputation: 14860

You will need to extend the directional setting through to neutral and weak characters with the RLM characters which can be encoded as &rlm; or &#x200F;. So, basically, all you need to do is append the RLM character at the end of the # character...

<input value="#&#x200F;000fff" />

See snippet below...

<div style="direction:rtl">
  <input value="#&rlm;00ffff" />
</div>

Upvotes: 0

Related Questions