Last year I published a post on Smashing Magazine introducing Logical Properties and Values, flow-relative mappings for the physical properties and values we use on the web. For example, instead of width you might use inline-size, and the dimension would then be correct whether you were in a horizontal or vertical writing mode. Take a look at the article Understanding Logical Properties and Values for more detail. You could also have a look at some of the work I have been doing over at MDN to document and create guides for using Logical Properties and Values.
SInce I wrote the Smashing Magazine article browser support for these features has improved, with the majority of basic mappings supported by Firefox and Chrome. Also in the specification are some new shorthands. Using logical values means we get a property which sets both block or both inline values at once, for example margin-block or padding-inline. Both Chrome (behind a flag) and Firefox (in Nightly) have implementations of these, which you could see in the below CodePen if using one of those browsers.
See the Pen
2 value logical shorthands by rachelandrew (@rachelandrew)
on CodePen.
Also, in Firefox Nightly, are the longhands for logical border-radius properties:
border-start-start-radiusborder-start-end-radiusborder-end-start-radiusborder-end-end-radius
If you have Firefox Nightly, take a look at this CodePen.
See the Pen
Logical Border Radius Properties by rachelandrew (@rachelandrew)
on CodePen.
These properties and values are helpful if you are developing sites for multiple writing modes but should also be useful if you are using writing modes creatively. It’s nice to see the browser implementations adding more support for the spec.