Inspect the working example
Two 200px content boxes have 24px inline-start and 8px inline-end padding. One is LTR and the other is an explicit RTL test. Hong Kong Chinese remains LTR; the RTL specimen exists only to test direction mapping.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| LTR | Inspect left/right padding | 24px / 8px |
| RTL test | Inspect left/right padding | 8px / 24px |
| Box budget | Content 200 + padding 32 + border 2 | Outer 234px in both directions |
Follow the browser mechanism
Logical properties follow writing mode and direction. Here horizontal writing maps inline-start to left in LTR and right in RTL. The same CSS declaration mirrors without duplicating left/right rules.
Physical left padding does not mirror
The alternative keeps physical left 24/right 8 in both directions.
<style>body{margin:8px}</style>
<style>.note{width:200px;padding-left:24px;padding-right:8px}</style><p class="note" dir="rtl">Workshop note</p>The RTL counterexample still has left 24px/right 8px, so it does not express the intended inline-start spacing.
Try the repair
Does using a logical property require the Chinese page to become RTL?
Show the worked answer
No. Keep the actual content direction. Logical properties also work for ordinary LTR pages; the RTL specimen is a separate direction test.
- Record physical computed sides for each declared direction.
- Separate direction testing from localization decisions.