WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe - Virtual Stage • Jul 2, 2026 • Session details

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

Still relying on fixed, left-to-right CSS defaults? Hardwired physical properties break dynamic global layouts. Discover how logical CSS creates effortlessly reversible UIs from a single codebase.

Pause
Mute Enter Fullscreen
#1 about 3 min

Limitations of physical CSS in global interfaces

Traditional physical CSS properties fail to adapt to varied writing directions and responsive layouts.

#2 about 2 min

Adapting layouts with logical properties for Arabic

Replacing physical directions with logical alternatives automatically fixes layout alignment in right-to-left languages.

#3 about 2 min

Understanding the inline and block axis mental model

Logical properties map flow-relative dimensions to inline and block axes instead of physical screen edges.

#4 about 2 min

Handling vertical typography and writing modes natively

Using logical properties preserves proportions and alignment for vertical languages without maintaining separate stylesheets.

#5 about 3 min

Unifying design system components with logical CSS

Defining components with logical properties creates a single adaptable codebase that supports any layout orientation.

#6 about 2 min

Accommodating global writing systems and dynamic responsive layouts

Logical properties inherently support diverse global reading flows and adjust layout shifts across device breakpoints seamlessly.

#7 about 3 min

Improving code readability and semantic intent in styling

Writing logical CSS documents the spatial meaning of elements and simplifies everyday layout tasks like centering.

#8 about 3 min

Future-proofing codebases with modern platform aligned styling

Adopting logical directions aligns code with emerging web platform features while reducing technical debt and boilerplate.

#9 about 3 min

Evaluating physical properties for safe logical CSS migration

Assessing reference points, external coupling, and intentional asymmetry prevents visual regressions during mass stylesheet conversions.

#10 about 3 min

Auditing codebase signals to skip logical CSS conversion

Using automated search patterns to flag layout exceptions helps developers document intent and skip invalid conversions.

#11 about 2 min

Documenting migration decisions and reviewing complex UI logic

Maintaining a decision record for skipped properties protects deliberate design choices and facilitates team layout discussions.

#12 about 2 min

Testing varied text directions natively in browser developer tools

Validating logical styling behavior requires only simple HTML attribute toggles rather than physical testing devices.

#13 about 4 min

Mapping physical properties to logical counterparts for components

Reference cheat sheets accelerate the translation of specific physical layout rules into appropriate flow-relative spacing and sizing.

#14 about 3 min

Assessing global browser support and utilizing feature queries

High adoption rates among modern browsers make logical properties safe for production alongside reliable fallback queries.

#15 about 2 min

Planning a phased adoption timeline for layout modernizations

Gradual property replacements combined with continuous visual regression testing establish a sustainable workflow for styling updates.

Matching moments

3:17 min

Adopting logical properties for flexible layouts

Onur Gumus · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

3:37 min

Responsive layout challenges and user customization

7:10 min

Overcoming learning curves for modern native CSS layouts

Chris Heilmann Chris Heilmann +2 · LIVE

4:09 min

Leveraging CSS for complex system logic and state machines

Chris Heilmann Chris Heilmann +3 · LIVE

3:12 min

Adapting user interfaces for right-to-left languages

Phil Helliwell · World Congress 2023

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail
36:15
2 months ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
3 months ago

From Black Box to Glass Box : Bedrock AgentCore Observability

Yasemin Aktürk

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence thumbnail
30:41
3 months ago

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence

Julia Grosse

Better Together: Leveraging Your Observability Tools as a SIEM thumbnail
39:06
3 months ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
3 months ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
3 months ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

Future-Proof CSS thumbnail
37:55
World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

One Color to Rule Them All: Relative CSS Colors in Practice thumbnail
9:04
World Congress 2026 Europe • 3 months ago

One Color to Rule Them All: Relative CSS Colors in Practice

Mert Akça

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more thumbnail
1:10:55
LIVE • over 1 year ago

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney, Jason Pamental

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.