Css Module 50

  Module 50 : Using CSS Logical Properties

1. Introduction to CSS Logical Properties

Definition:

CSS Logical Properties and Values are CSS properties that control layout by flow direction (e.g., left-to-right or right-to-left) instead of physical directions like top, left, right, bottom.

             

    

 

Purpose:

Make web designs adaptable to multiple languages and writing modes (LTR, RTL, vertical writing, etc.)

Reduce duplication of stylesheets for different languages.

Improve maintainability and internationalization (i18n) readiness of layouts.

2. Why Logical Properties Matter?

Traditional CSS Example (Physical Properties):

css

code

div { margin-left: 20px; }

Only works for LTR (Left-to-Right) languages like English.

For Arabic (RTL), you would need:

css

code

div { margin-right: 20px; }

Logical CSS Example (Better):

css

code

div { margin-inline-start: 20px; }

Automatically adjusts based on the writing mode!

No need to rewrite styles for RTL languages.

3. Key Concepts

Logical Concept

Physical Equivalents

Block Dimension

top & bottom

Inline Dimension

left & right (for LTR)

Start / End

beginning / end based on flow

Writing Mode

Direction text flows (LTR, RTL, vertical)

4. Common Logical Properties Table

Property

Purpose

margin-inline-start, margin-inline-end

Control margins horizontally according to writing mode

margin-block-start, margin-block-end

Control margins vertically

padding-inline-start, padding-inline-end

Padding horizontally

padding-block-start, padding-block-end

Padding vertically

border-inline-start, border-inline-end

Borders horizontally

border-block-start, border-block-end

Borders vertically

inset-inline-start, inset-inline-end

Positioning left/right dynamically

inset-block-start, inset-block-end

Positioning top/bottom dynamically

inline-size

Width

block-size

Height

5. Practical Example: LTR to RTL Layout

5.1 Traditional Approach (BAD)

      

html

code

<div class="card"> <h2>Title</h2> <p>Description text</p> </div>

css

code

.card { margin-left: 20px; border-left: 5px solid blue; }

Problem:

In RTL, left becomes right, but CSS won't adapt.

5.2 Logical Properties Approach (GOOD)

css

code

.card { margin-inline-start: 20px; border-inline-start: 5px solid blue; }

Benefits:

In LTR: applies to the left.

In RTL: automatically applies to the right.

No extra CSS needed!

6. Exercises and Activities

Exercise 1: Convert Physical to Logical CSS

Task:

Given this CSS, rewrite it using logical properties:

css

 code

.box { padding-left: 10px; padding-right: 15px; margin-top: 20px; margin-bottom: 25px; }

Answer:

css code

.box { padding-inline-start: 10px; padding-inline-end: 15px; margin-block-start: 20px; margin-block-end: 25px; }

Exercise 2: Layout a Card Component for RTL and LTR

Scenario:

You have a card with an image on the left, text on the right.

Make it automatically flip for RTL languages.

HTML:

html

code

<div class="card"> <img src="photo.jpg" alt="Image" /> <div class="content"> <h2>Card Title</h2> <p>Description goes here.</p> </div> </div>

CSS (BAD):

css

code

.card { display: flex; flex-direction: row; } .card img { margin-right: 10px; }

CSS (Logical GOOD):

css

code

.card { display: flex; flex-direction: row; } .card img { margin-inline-end: 10px; }

margin-inline-end puts space after the image, automatically adjusting to RTL.

Exercise 3: Handling Writing Modes

Task:

Use writing-mode and logical properties to create a vertical layout.

HTML:

html

 code

<div class="vertical-card"> <h2>Vertical Title</h2> <p>Vertical description</p> </div>

CSS:

css

code

.vertical-card { writing-mode: vertical-rl; padding-block-start: 10px; margin-inline-start: 20px; }

Result:

Text flows top-to-bottom.

Padding/margins adjust accordingly without hard-coding top, left, etc.

7. Important Notes

Logical properties are supported in all modern browsers (Edge, Firefox, Chrome, Safari).

Always check fallback if supporting very old browsers (IE11 and below).

Logical properties become even more critical when you:

            

Build multi-language websites.

Build components reused across cultures.

Use vertical writing like Japanese or Mongolian scripts.

8. Advanced Tip: Mix with CSS Variables

You can make your code more dynamic:

css

 code

:root { --spacing: 1rem; } .button { padding-inline-start: var(--spacing); padding-inline-end: var(--spacing); }

Quickly adjust spaces without touching individual properties.

9. Final Summary 

Point

Details

Logical Properties

Allow design based on flow, not hardcoded directions

Benefits

Easier i18n, responsive design, less duplication

How

Use block, inline, start, end instead of top, left, etc.

Practical Use

Margins, paddings, borders, positions, sizes

Best Practices

Always think about multiple languages and flows

10. Assignment for Students

Rewrite a webpage section using logical properties only.

Test it in LTR and RTL by changing the dir attribute in HTML:

html code

<html dir="rtl">

Submit screenshots of both LTR and RTL views.