diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 964142ca5b95..4111de6a1dca 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import canUseTouchScreen from '../../../libs/canUseTouchscreen'; import compose from '../../../libs/compose'; +import * as StyleUtils from '../../../styles/StyleUtils'; const propTypes = { /** The message fragment needing to be displayed */ @@ -117,16 +118,16 @@ const ReportActionItemFragment = (props) => { return ( - {Str.htmlDecode(text)} + {StyleUtils.convertToLTR(Str.htmlDecode(props.fragment.text))} {props.fragment.isEdited && ( - - {` ${props.translate('reportActionCompose.edited')}`} - + + {` ${props.translate('reportActionCompose.edited')}`} + )} ); diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index fe7113bb6314..94bfb1188d90 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -448,6 +448,16 @@ function getPaddingLeft(paddingLeft) { }; } +/** + * Android only - convert RTL text to a LTR text using Unicode controls. + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + * @param {String} text + * @returns {String} + */ +function convertToLTR(text) { + return `\u2066${text}`; +} + export { getAvatarSize, getAvatarStyle, @@ -475,4 +485,5 @@ export { getPaymentMethodMenuWidth, parseStyleAsArray, getPaddingLeft, + convertToLTR, }; diff --git a/src/styles/styles.js b/src/styles/styles.js index 8b4f82948643..1786c2152ea0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -15,6 +15,7 @@ import textInputAlignSelf from './utilities/textInputAlignSelf'; import positioning from './utilities/positioning'; import codeStyles from './codeStyles'; import visibility from './utilities/visibility'; +import writingDirection from './utilities/writingDirection'; import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles'; import pointerEventsNone from './pointerEventsNone'; import overflowXHidden from './overflowXHidden'; @@ -148,6 +149,7 @@ const styles = { ...positioning, ...wordBreak, ...whiteSpace, + ...writingDirection, rateCol: { margin: 0, diff --git a/src/styles/utilities/writingDirection.js b/src/styles/utilities/writingDirection.js new file mode 100644 index 000000000000..d9c630c86912 --- /dev/null +++ b/src/styles/utilities/writingDirection.js @@ -0,0 +1,13 @@ +/** + * Writing direction utility styles. + * Note: writingDirection isn't supported on Android. Unicode controls are being used for Android + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + */ +export default { + rtl: { + writingDirection: 'rtl', + }, + ltr: { + writingDirection: 'ltr', + }, +};