Question

我在HTML中尝试向左，因为它对阿拉伯语，希伯来语等语言有用

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

RTL属性真正做了什么？它只是改变了内容。如果是这样，我可以通过在RTL的情况下更改边框 - 从右到左来执行解决方法。但在此之前，我只想了解RTL的真正功能。请点亮它

＆＃13;

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');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

检查我尝试过的代码

Answer 1

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

您可以在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; 
}

Answer 2

好消息是，有一个css属性，尤其是：border-inline-start，它在文本为LTR时设置右边框，在RTL情况下设置左边框。见MDN。
同样，另一侧的边框为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'); } }。它们也适用于垂直文本。

坏消息是，这只适用于Firefox。

＆＃13;

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

＆＃13;

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

＆＃13;

private Context context;
private final List<String> listDataHeader;
private final HashMap<String, List<String>> listHashMap;

public ExpandableListAdapter(Context context, List<String> listDataHeader, HashMap<String, List<String>> listHashMap) {
    this.context = context;
    this.listDataHeader = listDataHeader;
    this.listHashMap = listHashMap;
}

@Override
public int getGroupCount() {
    return listDataHeader.size();
}

@Override
public int getChildrenCount(int i) {
    return listHashMap.get(listDataHeader.get(i)).size();
}

@Override
public Object getGroup(int i) {
    return listDataHeader.get(i);
}

@Override
public Object getChild(int i, int i1) {
    return listHashMap.get(listDataHeader.get(i)).get(i1); //i = group item, i1 = childItem.
}

@Override
public long getGroupId(int i) {
    return i;
}

@Override
public long getChildId(int i, int i1) {
    return i1;
}

@Override
public boolean hasStableIds() {
    return false;
}

@Override
public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
    String headerTitle = (String) getGroup(i);
    {
        LayoutInflater inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(R.layout.list_group, null);
    }
    TextView lblListHeader = (TextView) view.findViewById(R.id.lblListHeader);
    lblListHeader.setTypeface(null, Typeface.BOLD);
    lblListHeader.setText(headerTitle);

    if (i == 0)
        lblListHeader.setBackgroundColor(Color.parseColor("#ca4e18"));

    if (i == 0)
        lblListHeader.setTextColor(Color.parseColor("#EEEEEE"));

    else
        lblListHeader.setBackgroundColor(Color.parseColor("#EEEEEE"));

    return view;
}

@Override
public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
    final String childText = (String) getChild(i, i1);
    if (view == null) {

        LayoutInflater inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(R.layout.list_item2, null);
    }


    TextView txtListChild = (TextView) view.findViewById(R.id.lblListItem);
    txtListChild.setText(childText);


    return view;
}

@Override
public boolean isChildSelectable(int i, int i1) {
    return true;
}

＆＃13;

Answer 3

当内容的“dir”属性反映 ltr 或 rtl 的值时，受影响的是文本显示的方向。改变元素的边框颜色通常需要手动解决方案。以下是实现此壮举的一种方法：

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');
}

请参阅demo。

Answer 4

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);
});

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

4 个答案: