表格中 RTL 和 LTR 方向改变时的 Padding-Right 或 Padding-Left 问题

Question

我正在用两种语言（RTL 和 LTR）开发一个项目，所以当我设计我的表格时，一些 TD 必须有右填充或左填充，当我将页面方向更改为其他时，左填充意味着右填充，反之亦然，它是我的问题是因为我应该为 RTl 设计一次表，一次为 LTR 设计表。

我的问题：

LTR                  RTL

|您好| ----> |已故|

正确的设计：

|您好| ----> |سلام |

谢谢

Answer 1

如果我理解正确的话，我想你有两个选择。

One. 相应地为特定方向文本和样式创建类。所以

<td class="rtl"></td>

和CSS

td.rtl{
    direction:rtl;
    padding-left:20px;  //OR WHATEVER
}

然后相反

ltr

Two. 以一种方式设置填充。然后使用 jQuery 检测方向并相应地调整。

所以像

$('td').each(function(){
    if($(this).css('direction') == 'rtl'){
        $(this).css({'padding-left':'//whatver','padding-right':'0'});
    }
});

Answer 2

解决方案Pure CSS

而不是使用

left

或

right

使用

*-inline-start

和

*-inline-end

.ltr { /*default not required*/ }
.rtl { direction: rtl; }

.myClass {
  padding-inline-end: 20px;
  border: 1px solid #222
}

<span class="myClass ltr"> Hello </span>
<hr/>
<span class="myClass rtl"> سلام </span>