CSS Logical vs Physical Properties

Click the language buttons (English/العربية) in each demo below to see the difference between Physical and Logical CSS properties when switching to RTL mode.

Using Physical CSS Properties

THE PROBLEM

index-physical.html

Using Logical CSS Properties

THE SOLUTION

index-logical.html

Physical Properties (Current Oxygen)

                    /* These DON'T flip in RTL */

                    margin-left: 20px;

                    margin-right: 10px;

                    padding-left: 24px;

                    padding-right: 24px;

                    text-align: left;

                    border-left: 4px solid blue;

                    left: 20px;

                    right: auto;

Requires writing duplicate CSS rules with [dir="rtl"] selectors to manually flip every property!

Logical Properties (Proposed)

                    /* These AUTO-FLIP in RTL! */

                    margin-inline-start: 20px;

                    margin-inline-end: 10px;

                    padding-inline: 24px;

                    padding-inline: 24px;

                    text-align: start;

                    border-inline-start: 4px solid
                        blue;

                    inset-inline-start: 20px;

                    inset-inline-end: auto;

One CSS file works perfectly for BOTH LTR and RTL languages!

Property Mapping Reference

Physical Property	Logical Property	Description
margin-left / margin-right	margin-inline-start / margin-inline-end	Horizontal margins that flip in RTL
padding-left / padding-right	padding-inline-start / padding-inline-end	Horizontal padding that flips in RTL
border-left / border-right	border-inline-start / border-inline-end	Horizontal borders that flip in RTL
left / right	inset-inline-start / inset-inline-end	Position properties that flip in RTL
text-align: left / right	text-align: start / end	Text alignment that respects direction
margin-top / margin-bottom	margin-block-start / margin-block-end	Vertical margins (for vertical writing modes)
width / height	inline-size / block-size	Dimensions that adapt to writing mode

Why Oxygen Builder Needs This

First in the Market

No other WordPress page builder offers automatic logical property conversion. Oxygen would be the pioneer!

450+ Million Users

Arabic, Hebrew, Persian, and Urdu speakers would benefit. That's a massive untapped market!

Zero Extra Work

Developers write CSS once, it works everywhere. No need for duplicate RTL stylesheets!

Better UX

Native RTL users get a proper reading experience without layout bugs or misalignments.

Simple Implementation

Just add a toggle in Oxygen settings to output logical properties instead of physical ones.

Modern Standard

Logical properties have 95%+ browser support. It's the future-proof way to write CSS!

Simplifying Website Translation

Using Logical CSS Properties would dramatically simplify the use of website translation tools. Developers can translate text and achieve the same visual result as in English—without compromising design.

Current Situation

Popular translation tools (like WPML) don't adequately support Oxygen Builder
Building multilingual websites with RTL languages becomes impractical
Translation costs are high and results are unreliable
Requires manual CSS overrides for every directional property
Prevents us from choosing Oxygen for multilingual projects

With Logical Properties

Translate text content only—layout adapts automatically
No CSS modifications needed for RTL languages
Dramatically reduced translation costs
Consistent, reliable results across all languages
Makes Oxygen the ideal choice for multilingual sites

Extensive Research Conducted

We conducted extensive research trying to find solutions for RTL support in Oxygen Builder, but couldn't find satisfactory solutions. Our conclusion: Logical CSS Properties is the most suitable and future-proof solution.

One Remaining Consideration: Icons

While Logical CSS Properties handle layout direction perfectly, directional icons (like arrows) present a unique challenge. A right arrow icon won't automatically convert to a left arrow in RTL mode.

Suggested Solution: Add an option in Oxygen to mark specific icons as "Flip in RTL" which would apply a simple CSS transform.

[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

We trust the Oxygen team can determine the best implementation for this edge case.

Example: Arrow Icon Behavior

LTR Mode

RTL Mode (flipped)

This Feature Would Be Groundbreaking!

Adding a simple toggle to replace physical CSS properties with logical ones would make Oxygen Builder the #1 choice for RTL markets.

إضافة هذه الميزة ستجعل أوكسجين بيلدر الخيار الأول للأسواق العربية والشرق أوسطية

View Problem Demo View Solution Demo