在页面上处理LTR/RTL的两种方法。-DEV365 开发者社区

创建多语言网页时，您可能需要处理从右到左写的语言。这带有一些设计问题。

首先，您必须将dir属性添加到root（<html>）元素中。但是，仅dir属性就无法解决所有问题。有时，您可能会在段落旁边有一个图像，而margin-left将它们隔开。当您切换到RTL语言时，您最终会带有一个带有左边边缘的段落，并且图像粘在其右侧。

我将向您展示我用来解决此问题的两种方法。

使用CSS变量

我认为使用CSS变量和一些计算左右边缘的方法。

html[dir="ltr"] {
  --ltr: 1;
  --rtl: 0;
}

html[dir="rtl"] {
  --ltr: 0;
  --rtl: 1;
}

p {
  margin-left: calc(var(--ltr) * 20px);
  margin-right: calc(var(--rtl) * 20px);
}

我在这里做的是将数字（0，1）分配给“布尔”变量--ltr和--rtl，声明启用了哪个方向。当dir更改时，变量交换值。然后，我通过将变量乘以所需的像素值来计算左右边缘。因此，在ltr中，左边的边距将是1 × 20px = 20px，右边缘将是0 × 20px = 0。当我们更改为RTL时，边距将交换值。

使用现代CSS

这是一种基于布尔启用/禁用变量设置边距的巧妙方法。但是，使用现代CSS有更好的方法。

p {
  margin-inline-start: 20px;
}

就是这样。较少的代码，更优雅。实际上，它指示浏览器在X轴的“启动”处添加20px边距。 X轴的开始是相对于dir属性设置的方向的。因此，在这种情况下，浏览器将在LTR方向上设置20px左边缘，并在RTL方向上设置20px右边缘。