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

7:10 min

Overcoming learning curves for modern native CSS layouts

Chris Heilmann +2 · LIVE

4:09 min

Leveraging CSS for complex system logic and state machines

Chris Heilmann +3 · LIVE

3:12 min

Adapting user interfaces for right-to-left languages

Phil Helliwell · WWC 2023

7:10 min

Testing CSS property knowledge and layout engine quirks

Chris Heilmann +2 · LIVE

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail
36:15
29 days ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
about 1 month 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
about 1 month 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
about 1 month ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
about 1 month ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
about 1 month ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

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

What's new in CSS for Designers?

Onur Gumus

Future-Proof CSS thumbnail
37:55
WWC 2022 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 • almost 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
WWC Europe 2026 • about 1 month ago

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

Mert Akça

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

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.