Slowly however certainly, builders undertake logical CSS properties to be good net residents and write CSS that follows an outlined writing mode, directionality, and textual content orientation.
width turns into inline-size, margin-inline is a shorthand for margin-left and margin-right, you get the concept.
That is all good and dandy, however there’s no less than one state of affairs the place logical CSS properties aren’t sufficient. Suppose you need to type a container and make it 50% of the viewport on the horizontal axis.
You may outline inline-size: 50vw; however is not that mixing issues up? inline-size will outline both the horizontal or vertical dimension relying on the writing mode, however 50vw will all the time be the viewport width.
I do not know if that is an actual problem as a result of I am unable to learn languages that go from prime to backside, not to mention construct an internet site. However I can think about that writing mode dependent viewport items might be helpful!
And right now I realized these viewport items exist! vi and vb take into account writing path!
vi is the proportion of the preliminary containing blocks inline axis and vb the proportion of the block axis. 🤯
In left-to-right
vi -> vw
vb -> vh
---
In top-to-bottom
vi -> vh
vb -> vw
That is complicated stuff, so I construct a part to learn the way this works!
.👋 {
writing-mode: horizontal-tb;
width: 50vw;
peak: 20vh;
}Textual content is lined out horizontally and flows from prime to backside.
The container’s horizontal dimension is 50% viewport width and its vertical dimension is 20% viewport peak.
There’s nothing fancy right here. It is just about the default.
What is the browser assist? Chrome began supporting these items not very way back.
I am no knowledgeable in languages aside from German and English, however are folks constructing Asian web sites ecstatic about these items and that they are virtually cross-browser supported on the time I am publishing this text?
If extra about it, I would love to listen to extra!
