material-ui
material-ui copied to clipboard
[Pagination] on table pagination row info is not in correct order on RTL
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://mui.com/material-ui/react-pagination/#table-pagination
Steps:
- change the direction of the page to RTL
- it should have been
100 of 30-21
Current behavior 😯
Expected behavior 🤔
100 of 30-21
Context 🔦
No response
Your environment 🌎
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Hello guys! Can I try and solve this issue? @ZeeshanTamboli
I think this is happening because the page is set to "RTL", but the English text is "LTR" by default. That's why is displaying the label incorrectly since there are no "RTL" characters in the sentence to change the direction of the surrounding text.
@JonasTeixeira42 Please go ahead.
Before doing a fix, did you tested if the issue is happening with a language that is a right to left language? You can use some of the localizations. I expect that it would work as intended.
@mnajdova Yesterday, I tested every language that MUI supports. The majority works as expected when the direction of the screen is the same as the language (e.g when the text is in English and the direction is LTR). I've found some cases that I don't know whether it's a bug or not, but I put the results of the tests below so that you guys can decide it.
RTL Languages
:white_check_mark: arEG - displays correctly when direction RTL
:white_check_mark: arSA - displays correctly when direction RTL
:white_check_mark: arSD - displays correctly when direction RTL
:white_check_mark: bnBD - displays correctly when direction RTL
:white_check_mark: heIL - displays correctly when direction RTL
:x: faIR - displays incorrectly when direction RTL, since of
and of more than
text is displayed in English (of 1 1-21
| of more than 30 30-21
) and the direction is RTL
:white_check_mark: urPK - displays correctly when direction RTL
LTR Languages (Part-1)
:x: hyAM - displays correctly when direction LTR, but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:x: azAZ - displays correctly when direction LTR, but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:x: caES - displays correctly when direction LTR, but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:x: bgBG - displays correctly when direction LTR, but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:white_check_mark: zhHK - displays correctly when direction LTR - 第 21 項至第 10 項,共 10 項
| 第 21 項至第 30 項,超過 30 項
:white_check_mark: zhCN - displays correctly when direction LTR - 第 21 条到第 10 条,共 10 条
| 第 21 条到第 30 条,至少 30 条
:white_check_mark: zhTW - displays correctly when direction LTR - 21 ~ 10 / 10
| 21 ~ 30 / 30 以上
:white_check_mark: hrHR - displays correctly when direction LTR - 21–1 od 1
| 21–30 od više nego 30
:white_check_mark: csCZ - displays correctly when direction LTR - 21–1 z 1
| 21–30 z více než 30
:white_check_mark: daDK - displays correctly when direction LTR - 21-1 af 1
| 21-30 af mere end 30
:white_check_mark: nlNL - displays correctly when direction LTR - 21–1 van 1
| 21–30 van meer dan 30
:white_check_mark: enUS - displays correctly when direction LTR - 21–30 of 30
| 21–30 of more than 30
:white_check_mark: etEE - displays correctly when direction LTR - 21–1 / 1
| 21–30 / rohkem kui 30
:white_check_mark: fiFI - displays correctly when direction LTR - 21–1 / 1
| 21–30 / enemmän kuin 30
:white_check_mark: frFR - displays correctly when direction LTR - 21–1 sur 1
| 21–30 sur plus que 30
:white_check_mark: deDE - displays correctly when direction LTR - 21–1 von 1
| 21–30 von mehr als 30
:white_check_mark: elGR - displays correctly when direction LTR - 21–1 από 1
| 21–30 από πάνω από 30
:white_check_mark: hiIN - displays correctly when direction LTR - 21-1 कुल 1 में
| 21-30 कुल -1 में
:x: huHU - displays correctly when direction LTR - but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:x: isIS - displays correctly when direction LTR - but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:x: idID - displays correctly when direction LTR - but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:white_check_mark: itIT - displays correctly when direction LTR - 21–1 di 1
| 21–30 di più di 30
LTR Languages (Part-2)
:white_check_mark: jaJP - displays correctly when direction LTR - 21~1 / 1
| 21~30 / 30以上
:white_check_mark: khKH - displays correctly when direction LTR - 21 - 1 នៃ 1
| 21 - 30 នៃ ច្រើនជាង 30
:white_check_mark: kkKZ - displays correctly when direction LTR - 1 қатардың ішінен 21–1
| +30 қатардың ішінен 21–30
:white_check_mark: koKR - displays correctly when direction LTR - 21–1 / 1
| 21–30 / 30개 이상
:white_check_mark: mkMK - displays correctly when direction LTR - 21–1 од 1
| 21–30 од повеќе од 30
:white_check_mark: nbNO - displays correctly when direction LTR - 21–1 av 1
| 21–30 av mer enn 30
:white_check_mark: plPL - displays correctly when direction LTR - 21–1 z 1
| 21–30 z ponad 30
:white_check_mark: ptPT - displays correctly when direction LTR - 21–1 de 1
| 21–30 de mais de 30
:white_check_mark: ptBR - displays correctly when direction LTR - 21–1 de 1
| 21–30 de mais de 30
:x: roRO - displays correctly when direction LTR, but of
and of more
text is displayed in English (of 1 1-21
| of more than 30 30-21
)
:white_check_mark: ruRU - displays correctly when direction LTR - 21–1 из 1
| 21–30 из более чем 30
:white_check_mark: srRS - displays correctly when direction LTR - 21–1 od 1
| 21–30 od više nego 30
:white_check_mark: siLK - displays correctly when direction LTR - 21–1 දක්වා 1
| 21–30 දක්වා 30 ට වැඩි ප්රමාණයකින්
:white_check_mark: skSK - displays correctly when direction LTR - 21–1 z 1
| 21–30 z viac ako 30
:white_check_mark: esES - displays correctly when direction LTR - 21–1 de 1
| 21–30 de más de 30
:white_check_mark: svSE - displays correctly when direction LTR - 21–1 av 1
| 21–30 av fler än 30
:white_check_mark: thTH - displays correctly when direction LTR - 21–1 จาก 1
| 21–30 จาก มากกว่า 30
:x: trTR - displays correctly when direction LTR, but of
and of more
text is displayed in english (of 1 1-21
| of more than 30 30-21
)
:white_check_mark: ukUA - displays correctly when direction LTR - 21–1 з 1
| 21–30 з понад 30
:white_check_mark: viVN - displays correctly when direction LTR - 21–1 trong 1
| 21–30 trong nhiều hơn 30
I was not able to put the result of the labels in RTL languages because I use an LTR text editor, so the characters went crazy. If you guys don't understand something please tell me and I'll do my best to answer.
So looks like this string is not translated in all locales. I guess we can start there :)
@mnajdova, a quick question. This issue is related to the English language and it displays correctly when LTR. Do you think it's better to close the issue since it's working fine in English and open another one about the wrong translations or we keep it open and work on it?