Why does inline-block change rtl ordering? - html

Question

Thanks Jax-p for linking me to this answer. It shows more correct ways of dealing with this issue. I still don't know why inline-block is working the way it is, though.
I have an Electron app showing data transfer for different users and a limit on total transfer,
like this
<span>
1 MB / 2 GB
</span>
However, in rtl languages this shows up strangely:
<span dir="rtl">
1 MB / 2 GB
</span>
I stumbled upon a solution using inline-block styling
#c > span {
display: inline-block;
}
<span id="c" dir="rtl">
<span> 1 MB </span>
/
<span> 2 GB </span>
</span>
This works, but I don't understand why. RTL users are a decent portion of my user base and so I don't want to throw a hack in I don't understand. Is this just a happy accident or is there something deeper about inline block styling that I don't understand?
Note: This doesn't work if I don't put the individual components in separate spans -- if the parent span is given inline-block styling it doesn't change the display order.

Answer 1

You second example works due to the nature of inline-block elements. They are inline level elements but create block container. In other words, they create an isolated world that cannot interact with the outside.
The direction property will work inside both inline-block element separately so there is no interaction between their content.
The main steps are as follow:
apply the direction algorithm inside each inline-block elements
apply the direction algorithm between both inline-block elements
Without inline-block, the whole text will be considered in the same direction algorithm
To better illustrate the isolation:
#c > span {
display: inline-block;
width:20px;
height:20px;
}
#c {
float:left;
clear:left;
}
<div id="c" >
<span style="background:red;"> </span>
<span style="background:blue;"> </span>
</div>
<div id="c" dir="rtl">
<span style="background:red;"> </span>
<span style="background:blue;"> </span>
</div>
The above illustrate the step 2
And the below the step 1
#c > span {
display: inline-block;
}
#c {
float:left;
clear:left;
}
<div id="c" >
<span >1 MB </span>
</div>
<div id="c" dir="rtl">
<span >1 MB </span>
</div>