3- Begin typing a credit card number. For example, typing 1234 5678 will format into 5678 1234 instead of 1234 5678.
Discussion
A lot comes into play when talking about directionality (see W3C's article on Handling RTL scripts and the official Unicode Bidirectional Algorithm documentation). I will try to explain why the current state of the inputs do not display credit card numbers correctly:
1- Numbers in RTL scripts run left-to-right within the right-to-left flow and behave differently than words. In fact numbers are known to to have weak directionality.
2- Given a native HTML input and with its directionality set to RTL:
Because of this weak directionality, numbers are seen as part of the surrounding context. Without words to provide context of the input, elements cannot determine if the number being typed should be interpreted as a credit card number.
Since users are most likely to know that they will be typing credit card numbers, I believe that it is fair to assume that their credit card number should be displayed in a left-to-right fashion.
Therefore, typing 1234 5678 in a credit card field with a RTL flow should display 1234 5678.
Stripe makes use of these conventions and displays credit card numbers similarly.
jondavidjohn
commented
6 years ago
What is the issue?
Right-to-Left (RTL) directionality causes the credit card field formatter input value to be displayed backwards.
How to reproduce the issue?
1- Create an instance of a Payform field formatter input (i.e. credit card number)
2- Use either HTML, CSS or JS to set the element's directionality to right-to-left.
HTML:
dir="rtl"CSS:
direction: rtlJS:
3- Begin typing a credit card number. For example, typing
1234 5678will format into5678 1234instead of1234 5678.Discussion
A lot comes into play when talking about directionality (see W3C's article on Handling RTL scripts and the official Unicode Bidirectional Algorithm documentation). I will try to explain why the current state of the inputs do not display credit card numbers correctly:
1- Numbers in RTL scripts run left-to-right within the right-to-left flow and behave differently than words. In fact numbers are known to to have weak directionality.
2- Given a native HTML input and with its directionality set to RTL:
12345678will give us12345678.1234 5678will give us5678 1234.CC 1234 5678will give usCC 1234 5678.1234 5678 CCwill give usCC 5678 1234.https://codepen.io/dramosrg/pen/MBWLXa
Because of this weak directionality, numbers are seen as part of the surrounding context. Without words to provide context of the input, elements cannot determine if the number being typed should be interpreted as a credit card number.
Since users are most likely to know that they will be typing credit card numbers, I believe that it is fair to assume that their credit card number should be displayed in a left-to-right fashion.
Therefore, typing
1234 5678in a credit card field with a RTL flow should display1234 5678.Stripe makes use of these conventions and displays credit card numbers similarly.