Почему свойство direction не работает на элементах уровня блока

Question

Я хочу, чтобы функциональность наведения на панели навигации увеличивала полную высоту родительского элемента заголовка.

Я считаю, что в настоящее время этого не происходит, потому что тег привязки является встроенным элементом.Если я добавлю display: inline-block в CSS для заголовка .nav и селектора , это будет работать так, как я хочу, но НО тогда не учитывает свойство direction, которое я установил в header .nav селектор и обратный порядок элементов.

Может кто-нибудь сказать мне, почему это будет?

Я исследовал это ина сайте MDN для свойства CSS направления написано

Чтобы свойство направления оказало какое-либо влияние на элементы встроенного уровня, необходимо вставить значение свойства unicode-bidi илипереопределить.

если я добавлю unicode-bidi CSS-свойство:

1. со значением встраивания, ничего не произойдет

2. со значением переопределения bidi, слова поменялись местами.

   

Спасибо за ваше терпение, януб на все это.

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  direction: rtl;
}
header .nav a {
  //display: inline-block;
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>

Answer 1

тогда не учитывает свойство направления, которое я установил в селекторе header .nav, и меняет порядок элементов в обратном.

Это ожидаемый результат при изменении направления и наличии inline-block элементов.Порядок будет изменен.

Поведение с текстом не совсем то же самое, и здесь unicode-bidi играют его роли.В основном, когда браузер изменит направление, он не будет разбивать текст и менять порядок каждого символа.это будет сделано, только если вы измените unicode-bidi

normal

Элемент не открывает дополнительный уровень внедрения по отношению к двунаправленному алгоритму.Для встроенных элементов неявное переупорядочение ¹ работает через границы элемента.

переопределение двунаправленного текста

Это означает, что переупорядочение внутри элемента строгопоследовательность в соответствии со свойством direction; неявная ¹ часть двунаправленного алгоритма игнорируется .

Вот пример, чтобы лучше понять и увидеть разницупри наличии дополнительной обертки:

span {
  border:1px solid;
}
div {
 margin-top:10px;
}

<div style="direction:rtl;">lorem ipsum text</div>

<div style="direction:rtl;">lorem <span>ipsum text</span></div>

<div style="direction:rtl;">lorem <span style="display:inline-block">ipsum text</span></div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem ipsum text</div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span>ipsum text</span></div>

<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span style="display:inline-block">ipsum text</span></div>

¹ Алгоритм состоит из неявной части, основанной на свойствах символа, а также явных элементов управления для вложений и переопределений.CSS 2.1 использует этот алгоритм для достижения правильного двунаправленного рендеринга.Свойства 'direction' и 'unicode-bidi' позволяют авторам указать, как элементы и атрибуты языка документа соответствуют этому алгоритму.

Ссылка: https://www.w3.org/TR/CSS2/visuren.html#direction

---

Все вышеперечисленное немного сложнее, и использование направления - не лучший способ.Вы можете рассмотреть text-align с inline-block:

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  text-align:right;
}
header .nav a {
  display: inline-block;
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>

Или используйте flexbox для простого управления выравниванием:

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header {
  height: 7vh;
  width: 100vw;
  background-color: #D1C4E9;
  line-height: 7vh;
}
header .nav {
  margin-right: 3vw;
  text-align:right;
  display:flex;
  justify-content:flex-end;
}
header .nav a {
  font-size: 1.25em;
  padding: 0 2vw;
  text-decoration: none;
  color: #6A1B9A;
}
header .nav a:hover {
  background-color: #6A1B9A;
  color: #D1C4E9;
}

<header>
  
  <div class='nav'>
    <a href='#'>Home</a>
    <a href='#'>Products</a>
    <a href='#'>Services</a>
    <a href='#'>About</a>
  </div>
  
</header>