material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[Pagination] on table pagination row info is not in correct order on RTL

Open yaredtsy opened this issue 1 year ago • 3 comments

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:

  1. change the direction of the page to RTL
  2. it should have been 100 of 30-21 image

Current behavior 😯

image

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.

yaredtsy avatar Nov 16 '22 13:11 yaredtsy

Hello guys! Can I try and solve this issue? @ZeeshanTamboli

JonasTeixeira42 avatar Dec 13 '22 23:12 JonasTeixeira42

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 avatar Dec 13 '22 23:12 JonasTeixeira42

@JonasTeixeira42 Please go ahead.

ZeeshanTamboli avatar Dec 14 '22 13:12 ZeeshanTamboli

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 avatar Dec 22 '22 14:12 mnajdova

@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.

JonasTeixeira42 avatar Dec 23 '22 14:12 JonasTeixeira42

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

JonasTeixeira42 avatar Dec 23 '22 14:12 JonasTeixeira42

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

JonasTeixeira42 avatar Dec 23 '22 14:12 JonasTeixeira42

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

JonasTeixeira42 avatar Dec 23 '22 14:12 JonasTeixeira42

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.

JonasTeixeira42 avatar Dec 23 '22 14:12 JonasTeixeira42

So looks like this string is not translated in all locales. I guess we can start there :)

mnajdova avatar Dec 24 '22 07:12 mnajdova

@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?

JonasTeixeira42 avatar Dec 26 '22 12:12 JonasTeixeira42