Reimagining web layout for accessible multilingual content
summary
Claim: CSS logical properties let one stylesheet adapt to left-to-right, right-to-left and vertical writing modes. A React demo swaps English/Arabic/Japanese and fixes misaligned headings, borders and avatars by switching text-align: start, border-inline-start and margin-inline-end instead of left/right/top/bottom. Tooling includes a VS Code extension by cafin and the styling to use logical package for stylelint. Browser support measures at about 97.55% on caniuse, and the demo works across modes.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 2:32Talk overview
- 3:14CSS physical properties limits
- 3:55CSS logical properties intro
- 5:41Logical properties building blocks
- 6:02CSS writing modes
- 7:50Horizontal vs vertical writing
- 8:10Live demo: logical properties
- 10:20Fixing multilingual layout
- 13:33Logical vs physical mapping
- 14:36Benefits of logical properties
- 16:22Browser support
- 17:49Implementing logical properties
- 18:54Conclusion
related talks
29mDo the Right (to Left) Thing Directional Content in React
26mCSS Logical Properties
30mThe Web Is Not Just Left-to-Right
29mDirectional Content in React
55mSmart Layouts
15mWriting CSS in the year 3019
35mCSS for internationalisation
30mWhen East meets West: web typography and how it can inspire modern layouts