Why does the direction property not work on block level elements - html

Question

I want the hover functionality of the nav bar to extend the full height of the header parent element.
I believe this is currently not doing this because the anchor tag is an inline element. If I add display: inline-block to the CSS for the header .nav a selector, this works as I want it to BUT then does not honour the direction property I set in the header .nav selector and reverses the order of the elements.
Can anyone tell me why this would be?
I have researched this and on the MDN site for the direction CSS property it says
For the direction property to have any effect on inline-level
elements, the unicode-bidi property's value must be embed or override.
if i add the unicode-bidi CSS property:
with the embed value, nothing happens
with the bidi-override value, the words are reversed in place.
Thanks for your patience, I am a noob at all this.
* {
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

then does not honour the direction property I set in the header .nav selector and reverses the order of the elements.
This is the intended result when changing the direction and having inline-block elements. The order will get switched.
The behavior with text is not exactly the same and here the unicode-bidi play it roles. Basically when a browser will change the direction, it will not break down the text and change the order of each character. this will be done only if you change unicode-bidi
normal
The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit1 reordering works across element boundaries.
bidi-override
This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit1 part of the bidirectional algorithm is ignored.
Here is an example to better understand and to see the difference when having extra wrapper:
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>
1The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS 2.1 relies on this algorithm to achieve proper bidirectional rendering. The 'direction' and 'unicode-bidi' properties allow authors to specify how the elements and attributes of a document language map to this algorithm.
Reference: https://www.w3.org/TR/CSS2/visuren.html#direction
All the above is a bit complicated and the use of direction is not the way to go. You can either consider text-align with 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>
Or use flexbox to easily control alignment:
* {
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>