Определить текущее направление div

Question

У меня есть div, что его направление определяется содержимым, которое оно размещает (используя dir="auto"). Я бы хотел использовать CSS (если это невозможно, чем javascript), чтобы определить направление и соответственно изменить абсолютную позицию диапазона удаления.

видеть здесь в этой скрипкой: https://jsfiddle.net/psjgsnby/

<div dir="auto" class="item"> 
    text 
    <span>x</span> 
</div> 
<div dir="auto" class="item"> 
    מימין לשמאל 
    <span>x</span> 
</div> 

CSS:

.item { 
    position: relative; 
    width: 200px; 
} 
.item span { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

я ищу что-то вроде this selector:

.item span:dir(rtl) { 
    right: auto; 
    left: 0; 
} 

, но то, что работает кросс-браузер (выше работает только для firefox)

Answer 1

Я нашел решение, но очень далеко от вашего кода. Его база на display: table, потому что нам нужен динамический поток направления для каждого элемента. Не забывайте, вы можете изменить вертикальное выравнивание для разных положений.

.item { 
 
    display: table; 
 
    width: 200px; 
 
    height: 50px; 
 
} 
 

 
.item .btn, 
 
.item .content { 
 
    display: table-cell; 
 
} 
 

 
.item .btn { 
 
    vertical-align: top; 
 
} 
 

 
.item .content { 
 
    width: 100%; 
 
    vertical-align: bottom; 
 
}

<div dir="auto" class="item"> 
 
    <span class="content">text</span> 
 
    <span class="btn"> 
 
    x 
 
    </span> 
 
</div> 
 
<div dir="auto" class="item"> 
 
    <span class="content">מימין לשמאל</span> 
 
    <span class="btn"> 
 
    x 
 
    </span> 
 
</div>

Fiddle demo

Answer 2

Использование dir="auto" дает браузеру право собственности на обнаружении в каком направлении, чтобы использовать, на основе содержимого элемента.

Отметьте, что different browsers might give different results, основанный на реализации.

dir=auto фактически tells the browser to:

взгляд на первый сильно типизированных характер в элементе и работать от того, что должно быть базовое направление элемента. Если это символ иврита (или арабский и т. Д.), Элемент получит направление rtl. Если это, скажем, латинский символ, направление будет ltr.

У вас нет возможности проверить это, но если вы хотите использовать javascript, вы можете попробовать сделать то же самое. Найдите первый символ, который строго типизирован, и на основе этого используйте соответствующее направление. Единственный вопрос, который вы получили, - это языки, которые вы хотите поддержать.

Answer 3

Если вы меняете отображение контейнера на гибкость, это легко достижимо. Вам просто нужно оправдать-содержание: пространство между ними:

CSS-это еще более компактный, что у вас было:

.item { 
 
    position: relative; 
 
    display: flex; 
 
    width: 200px; 
 
    justify-content: space-between; 
 
}

<div dir="auto" class="item"> 
 
text 
 
<span>x</span> 
 
</div> 
 
<div dir="auto" class="item"> 
 
מימין לשמאל 
 
<span>x</span> 
 
</div>