RTL - Why the border doesn't change
I am trying to go left in my HTML as it would be useful for languages like Arabic, Hebrew
The problem I'm running into is right to right, doesn't change it, keeping it in the same place when offset in RTL. As per my understanding, I thought that right-to-left rule would change as borderline when I switch to RTL mode.
What does the RTL property really do? It just transfers content only. If so, I can do a workaround by changing the border from right to left in the RTL case. But before doing this, I just want to understand what RTL does. Please throw some light on him.
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>
Check out the code I tried
source to share
dir="ltr"
specifies the direction of flow of content within a block-level element. This applies to text, inline, and inline block elements. It also sets the default text alignment and the direction that table cells flow in the table row.
You can use direction: rtl;
in CSS and do something like this:
.rtl {
direction: rtl;
}
.element {
border-right: 1px solid red;
}
.rtl .element {
border-right: none;
border-left: 1px solid red;
}
or
.element {
border-right: 1px solid red;
}
#content:dir(rtl) .element {
border-right: none;
border-left: 1px solid red;
}
source to share
The good news is that there is a css: property for this border-inline-end
, which sets the correct border when the text is LTR and the left border in the case of RTL. See MDN .
Similarly, for the boundary on the other side has border-inline-start
and border-block-start
and border-block-end
for the upper and lower bounds. They also apply correctly to vertical text.
Bad news: this only works in Firefox.
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>
source to share
When the "dir" attribute of the content reflects either ltr or rtl, this is the direction in which the text is displayed. Changing the border color of an element usually requires a manual decision. Here's one way to accomplish this feat:
HTML:
<div id="content" dir="ltr">
Hi! Here is the content
</div>
<button id="RL">
RL SWITCH
</button>
CSS
div,.divltr {
border: 10px solid #000;
border-right: 10px solid red;
}
.divrtl {
border: 10px solid #000;
border-left: 10px solid red;
}
JAVASCRIPT:
var d = document;
d.g = d.getElementById;
var rl = d.g('RL');
var c = d.g('content');
rl.addEventListener('click',function(){
toggleWhichWay();
});
function setTextBorder(whichway) {
c.setAttribute('dir', whichway);
c.className = "div" + whichway;
}
function getCurrState() {
return c.getAttribute('dir');
}
function toggleWhichWay() {
(getCurrState() == 'ltr')? setTextBorder('rtl') :setTextBorder('ltr');
}
see demo .
source to share
var toggleButton = document.querySelector('#rtl');
var targetEle = document.querySelector('#content');
function toggleTextDir(ele) {
var dir = ele.attributes.dir.value;
ele.attributes.dir.value = dir === 'rtl' ? 'ltr' : 'rtl';
}
toggleButton.addEventListener('click', function() {
toggleTextDir(targetEle);
});
source to share