Internationalization (i18n) means preparing the code and design to handle different languages and writing modes.
Thanks to the logical properties and values, we can do more for i18n just with CSS.
The simplest example is the right-to-left (RTL) writing mode used by Arabic and Hebrew languages, among others. When you write RTL, you should mirror your site: your logo in the header moves to the right side, and your layout and text alignment similarly change place.
For more information, check out this excellent introductory video from Moriel Schottlender hosted by Jason Lengstorf:
CSS Logical Properties and Values is a newer CSS module to control the layout logically. Instead of physical left or right (top and bottom) values, we have logical left or right, depending on the writing mode.
Spruce uses logical properties and values everywhere: in the elements, the layout mixins, the style presets and the Spruce UI components. Interactive components (like tabs, carousels and drawers) also mirror their keyboard and motion behavior in RTL.
The support is excellent in every modern browser. Test your layouts with dir="rtl": the preview of every component has an RTL toggle.
For more information, please visit the following pages:
