RTL - 为什么边界权利没有改变

Question

我正在 HTML 中尝试从右到左的方向，因为它对于阿拉伯语、希伯来语等语言很有用

我面临的问题是右边界，当转移到 RTL 时，它不会改变它保留在同一个地方。根据我的理解，我认为当我切换到 RTL 模式时，右边框将更改为左边框。

RTL 财产到底有什么作用？它只是改变内容。如果是这样，我可以通过在 RTL 情况下将右边框更改为左边框来解决此问题。但在此之前，我只是想了解 RTL 的真正用途。请对它进行一些说明

var rtl = document.getElementById('RTL');
var content = document.getElementById('content');
var currentState;
rtl.onclick = implementRTL;

function implementRTL() {
  currentState = content.getAttribute('dir');
  if (currentState == 'ltr') {
    content.setAttribute('dir', 'rtl');
  } else {
    content.setAttribute('dir', 'ltr');
  }
}

div {
  border: 10px solid #000;
  border-right: 10px solid red
}

<div id="content" dir="ltr">
  Hi Here is the content
</div>
<button id="RTL">
  RTL SWITCH
</button>

检查下面我尝试过的代码

Answer 1

border-inline-end

当文本为 LTR 时，此属性设置右边框；当文本为 RTL 时，此属性设置左边框。border-inline-start同样，另一侧的边框也有，顶部和底部边框也有border-block-start和。border-block-end它们也正确适用于垂直文本。

var rtl = document.getElementById('RTL');
var content = document.getElementById('content');
var currentState;
rtl.onclick = implementRTL;

function implementRTL() {
  currentState = content.getAttribute('dir');
  if (currentState == 'ltr') {
    content.setAttribute('dir', 'rtl');
  } else {
    content.setAttribute('dir', 'ltr');
  }
}

div {
  border: 10px solid #000;
  /* border-right: 10px solid red; */ /* old */
  border-inline-end: 10px solid red; /* new */
}

<div id="content" dir="ltr">
  Hi Here is the content
</div>
<button id="RTL">
  RTL SWITCH
</button>

Answer 2

dir="ltr"设置块级元素内内容流的方向。这适用于文本、内联和内联块元素。它还设置文本的默认对齐方式以及表格单元格在表格行内流动的方向。

您可以在 CSS 中使用direction: rtl;并执行类似的操作：

.rtl {
  direction: rtl;
}
.element {
  border-right: 1px solid red;
}
.rtl .element {
  border-right: none;
  border-left: 1px solid red;
}

或者

.element {
  border-right: 1px solid red;
}
#content:dir(rtl) .element { 
  border-right: none;
  border-left: 1px solid red; 
}