html - RTL - 为什么右边界没有改变

Question

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

我面临的问题是 border-right 并没有改变它在转移到 RTL 时保留在同一个地方。根据我的理解，当我切换到 RTL 模式时，我认为 border-right 将更改为 border-left。

RTL 属性到底有什么作用？。它只是转移内容。 如果是这样，我可以通过在 RTL 的情况下将 border-right 更改为 left 来解决这个问题。但在此之前，我只想了解 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>