CSS Logical Properties and Writing Modes

/* Physical properties (fixed to screen directions) */
.physical {
    width: 300px;
    height: 200px;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    padding-left: 15px;
    border-right: 2px solid blue;
}

/* Logical properties (adapt to writing mode) */
.logical {
    inline-size: 300px;           /* Width in horizontal, height in vertical */
    block-size: 200px;            /* Height in horizontal, width in vertical */
    margin-block-start: 20px;     /* Top in horizontal */
    margin-inline-end: 10px;      /* Right in LTR, left in RTL */
    margin-block-end: 20px;       /* Bottom in horizontal */
    margin-inline-start: 10px;    /* Left in LTR, right in RTL */
    padding-inline-start: 15px;   /* Left padding in LTR */
    border-inline-end: 2px solid blue;  /* Right border in LTR */
}

/* Shorthand logical properties */
.logical-shorthand {
    margin-block: 20px;           /* margin-block-start and margin-block-end */
    margin-inline: 10px;          /* margin-inline-start and margin-inline-end */
    padding-block: 15px 10px;     /* start end */
    padding-inline: 20px 15px;    /* start end */
    border-block: 2px solid red;  /* Both block borders */
    border-inline: 1px solid blue; /* Both inline borders */
}

/* Benefits: Works automatically with RTL/vertical */
[dir="rtl"] .logical {
    /* No changes needed! margin-inline-start automatically becomes right */
}

.vertical {
    writing-mode: vertical-rl;
    /* Logical properties automatically adapt */
}

/* Old: Physical properties */
.card-old {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 4px solid blue;
    text-align: left;
}

/* New: Logical properties */
.card-new {
    inline-size: 100%;
    max-inline-size: 600px;
    margin-inline: auto;           /* Centers in both LTR and RTL */
    padding-inline: 20px;          /* Horizontal padding */
    border-inline-start: 4px solid blue;  /* Left in LTR, right in RTL */
    text-align: start;             /* Left in LTR, right in RTL */
}

/* Positioning with logical properties */
.positioned-old {
    position: absolute;
    top: 0;
    right: 0;
}

.positioned-new {
    position: absolute;
    inset-block-start: 0;          /* Top */
    inset-inline-end: 0;           /* Right in LTR, left in RTL */
}

/* Shorthand inset */
.overlay {
    position: fixed;
    inset: 0;  /* All four sides (works with any writing mode) */
}

/* Specific inset values */
.positioned-complex {
    inset-block: 20px 10px;        /* top bottom */
    inset-inline: 30px 15px;       /* left right (in LTR) */
}

/* Horizontal writing mode (default) */
.horizontal {
    writing-mode: horizontal-tb;
    /* Block axis: top → bottom (paragraphs stack vertically)
       Inline axis: left → right (text flows horizontally) */
}

.horizontal-element {
    margin-block: 20px;      /* Top and bottom margins */
    margin-inline: 10px;     /* Left and right margins (in LTR) */
    padding-block: 15px;     /* Top and bottom padding */
    padding-inline: 20px;    /* Left and right padding (in LTR) */
}

/* Vertical writing mode */
.vertical-rl {
    writing-mode: vertical-rl;
    /* Block axis: right → left (paragraphs stack from right)
       Inline axis: top → bottom (text flows downward) */
}

.vertical-element {
    margin-block: 20px;      /* Right and left margins (stacking direction) */
    margin-inline: 10px;     /* Top and bottom margins (text flow) */
    inline-size: 200px;      /* Height (inline = vertical) */
    block-size: 300px;       /* Width (block = horizontal) */
}

/* RTL (Right-to-Left) */
.rtl {
    direction: rtl;
    /* Block axis: still top → bottom
       Inline axis: right → left (text flows from right) */
}

.rtl-element {
    margin-inline-start: 20px;  /* Right margin in RTL */
    margin-inline-end: 10px;    /* Left margin in RTL */
    text-align: start;          /* Aligns right in RTL */
}

/* Practical example: Sidebar layout */
.sidebar {
    inline-size: 250px;              /* Width (adapts to writing mode) */
    padding-inline-start: 20px;      /* Left padding in LTR */
    border-inline-end: 1px solid #ccc;  /* Right border in LTR */
}

/* This automatically works in RTL */
[dir="rtl"] .sidebar {
    /* No changes needed! Properties flip automatically */
    /* padding-inline-start becomes right padding */
    /* border-inline-end becomes left border */
}

/* Flexbox with logical directions */
.flex-container {
    display: flex;
    flex-direction: row;           /* Inline direction */
    gap: 1rem;
    padding-inline: 2rem;          /* Horizontal padding */
    padding-block: 1rem;           /* Vertical padding */
}

.flex-item {
    margin-inline-end: 1rem;       /* Space after each item */
    padding-block: 0.5rem;
}

/* Grid with logical alignment */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;            /* Block-start alignment */
    justify-items: start;          /* Inline-start alignment */
}

.grid-item {
    inline-size: 100%;
    margin-block-end: 1rem;
}

/* Text alignment with logical values */
.text-content {
    text-align: start;             /* Left in LTR, right in RTL */
    margin-inline: auto;           /* Center horizontally */
    max-inline-size: 65ch;         /* Max width for reading */
}

.text-end {
    text-align: end;               /* Right in LTR, left in RTL */
}

/* Float with logical properties */
.float-start {
    float: inline-start;           /* float: left in LTR, right in RTL */
    margin-inline-end: 1rem;       /* Space after floated element */
    margin-block-end: 0.5rem;
}

.float-end {
    float: inline-end;             /* float: right in LTR, left in RTL */
    margin-inline-start: 1rem;     /* Space before floated element */
}

/* Clear with logical values */
.clear-both {
    clear: both;                   /* Still works */
}

.clear-inline-start {
    clear: inline-start;           /* Clear left in LTR */
}

/* Horizontal (default - Latin scripts) */
.horizontal {
    writing-mode: horizontal-tb;
    direction: ltr;
}

/* Horizontal RTL (Arabic, Hebrew) */
.rtl {
    writing-mode: horizontal-tb;
    direction: rtl;
}

/* Vertical right-to-left (Traditional Chinese, Japanese) */
.vertical-traditional {
    writing-mode: vertical-rl;
    text-orientation: mixed;  /* Default */
}

/* Vertical left-to-right (Mongolian) */
.vertical-mongolian {
    writing-mode: vertical-lr;
}

/* Mixed content in vertical */
.vertical-mixed {
    writing-mode: vertical-rl;
}

.vertical-mixed .english {
    text-orientation: upright;  /* Keep Latin upright */
}

/* Sideways text */
.vertical-sideways {
    writing-mode: vertical-rl;
    text-orientation: sideways;  /* Rotate 90° */
}

/* Combining characters in vertical text */
.tate-chu-yoko {
    writing-mode: vertical-rl;
}

.tate-chu-yoko .year {
    text-combine-upright: all;  /* 2024 displays horizontally */
}

/* Bidirectional text isolation */
.mixed-direction {
    unicode-bidi: isolate;
}

/* Example: English page with Arabic section */
body {
    direction: ltr;
}

.arabic-section {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: start;  /* Aligns right in RTL context */
}

/* Vertical sidebar with horizontal main content */
.page {
    display: flex;
}

.sidebar-vertical {
    writing-mode: vertical-rl;
    inline-size: 3rem;  /* Width becomes height control */
    padding-block: 1rem;
    background: #f0f0f0;
}

.main-content {
    flex: 1;
    padding: 2rem;
}

/* Book-style vertical layout (Japanese) */
.book-page {
    writing-mode: vertical-rl;
    inline-size: 100%;
    block-size: 100vh;
    padding-block: 2rem;
    padding-inline: 3rem;
    column-count: 2;
    column-gap: 3rem;
}

/* Decorative vertical text */
.vertical-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: bold;
    padding-inline: 0.5rem;
    background: linear-gradient(to bottom, blue, purple);
    color: white;
}

/* Mixed RTL and LTR content */
.bilingual-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.english-column {
    direction: ltr;
    text-align: left;
}

.arabic-column {
    direction: rtl;
    text-align: right;
    font-family: 'Arabic Font', sans-serif;
}

/* Responsive writing mode */
@media (max-width: 768px) {
    .vertical-on-desktop {
        writing-mode: horizontal-tb;  /* Switch to horizontal on mobile */
    }
}

/* Date formatting in vertical text */
.vertical-date {
    writing-mode: vertical-rl;
}

.vertical-date .date-number {
    text-combine-upright: all;  /* "12" displays horizontally */
    font-weight: bold;
}

<!-- HTML structure for multi-language -->
<!-- <html lang="en" dir="ltr"> -->
<!-- <html lang="ar" dir="rtl"> -->

/* Base styles with logical properties */
body {
    margin: 0;
    padding-inline: 2rem;
    padding-block: 1rem;
}

.container {
    max-inline-size: 1200px;
    margin-inline: auto;
}

/* Navigation that works in any direction */
.nav {
    display: flex;
    gap: 1rem;
    padding-inline: 2rem;
}

.nav-link {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-inline-start: 3px solid transparent;
}

.nav-link:hover {
    border-inline-start-color: blue;
}

/* Cards with logical spacing */
.card {
    padding-block: 1.5rem;
    padding-inline: 2rem;
    border-inline-start: 4px solid blue;
    margin-block-end: 2rem;
}

.card-title {
    margin-block-end: 0.5rem;
}

/* Sidebar positioning */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

/* Automatically flips in RTL */
.sidebar {
    padding-inline-end: 2rem;
    border-inline-end: 1px solid #ccc;
}

/* Text alignment */
.text-content {
    text-align: start;  /* Left in LTR, right in RTL */
}

.text-end-align {
    text-align: end;    /* Right in LTR, left in RTL */
}

/* Form inputs */
.form-field {
    margin-block-end: 1rem;
}

.form-label {
    display: block;
    margin-block-end: 0.25rem;
    text-align: start;
}

.form-input {
    inline-size: 100%;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border: 1px solid #ccc;
    text-align: start;
}

/* Using :dir() pseudo-class (modern browsers) */
:dir(ltr) .arrow {
    transform: rotate(0deg);  /* → */
}

:dir(rtl) .arrow {
    transform: rotate(180deg);  /* ← */
}

/* Using :lang() for language-specific styles */
:lang(ar) {
    font-family: 'Arabic Font', sans-serif;
    font-size: 1.1em;  /* Arabic often needs larger size */
    line-height: 1.8;  /* More line height for Arabic */
}

:lang(zh) {
    font-family: 'Noto Sans SC', sans-serif;  /* Simplified Chinese */
    word-break: break-all;  /* CJK line breaking */
}

:lang(ja) {
    font-family: 'Noto Sans JP', sans-serif;
    line-break: strict;  /* Japanese line breaking rules */
}

:lang(en) {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    hyphens: auto;  /* English hyphenation */
}

/* Quotation marks by language */
:lang(en) {
    quotes: '"' '"' ''' ''';  /* "English" 'quotes' */
}

:lang(fr) {
    quotes: '«\00a0' '\00a0»' '"' '"';  /* « French » "quotes" */
}

:lang(de) {
    quotes: '„' '"' '‚' ''';  /* „German" ‚quotes' */
}

/* Blockquote with auto quotes */
blockquote::before {
    content: open-quote;
}

blockquote::after {
    content: close-quote;
}

/* Font stack for multi-script support */
body {
    font-family: 
        -apple-system,           /* System font (Latin) */
        'Noto Sans Arabic',      /* Arabic */
        'Noto Sans SC',          /* Simplified Chinese */
        'Noto Sans JP',          /* Japanese */
        'Noto Sans KR',          /* Korean */
        sans-serif;
}

/* Avoid letter-spacing in connected scripts */
.text {
    letter-spacing: 0.02em;
}

:lang(ar) .text,
:lang(fa) .text,
:lang(ur) .text {
    letter-spacing: normal;  /* Preserve ligatures */
}

/* Number formatting */
.number {
    font-variant-numeric: tabular-nums;
}

:lang(ar) .number {
    /* Arabic numerals */
    font-feature-settings: 'anum' 1;
}

/* Container that works in any direction */
.page-wrapper {
    inline-size: 100%;
    max-inline-size: 1400px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 4rem);
    padding-block: 2rem;
}

/* Header with logo and navigation */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
    border-block-end: 1px solid #ccc;
}

.logo {
    margin-inline-end: 2rem;
}

/* Navigation automatically flips */
.nav {
    display: flex;
    gap: 2rem;
}

/* Main layout with sidebar */
.main-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    margin-block-start: 2rem;
}

/* Sidebar starts on inline-start (left in LTR, right in RTL) */
.sidebar {
    border-inline-end: 1px solid #ddd;
    padding-inline-end: 2rem;
}

/* Article content */
.article {
    max-inline-size: 65ch;
}

.article h2 {
    margin-block: 2rem 1rem;
    border-inline-start: 4px solid blue;
    padding-inline-start: 1rem;
}

.article p {
    margin-block-end: 1rem;
    text-align: start;
}

/* Image with caption */
.figure {
    margin-block: 2rem;
}

.figure img {
    inline-size: 100%;
    block-size: auto;
}

.caption {
    margin-block-start: 0.5rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid #999;
    font-size: 0.9em;
    color: #666;
}

/* Footer */
.footer {
    margin-block-start: 4rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid #ccc;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        border-inline-end: none;
        border-block-end: 1px solid #ddd;
        padding-inline-end: 0;
        padding-block-end: 2rem;
    }
}

/* Card with logical sizing */
.card {
    inline-size: 100%;
    max-inline-size: 400px;
    min-block-size: 200px;
    margin-block-end: 2rem;
    padding-block: 1.5rem;
    padding-inline: 2rem;
    border: 1px solid #ddd;
    border-inline-start-width: 4px;
    border-inline-start-color: blue;
}

/* Sidebar with logical dimensions */
.sidebar {
    inline-size: 250px;
    min-block-size: 100vh;
    padding-block: 2rem;
    padding-inline: 1.5rem;
    border-inline-end: 1px solid #ccc;
}

/* Container with logical spacing */
.container {
    inline-size: 100%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
    padding-block: 2rem;
}

/* Grid items with logical spacing */
.grid-item {
    padding-block: 1rem;
    padding-inline: 1.5rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid #eee;
}

/* Button with logical padding */
.button {
    padding-block: 0.75rem;
    padding-inline: 2rem;
    border: none;
    border-radius: 0.25rem;
    min-inline-size: 120px;
}

/* Input fields */
.input {
    inline-size: 100%;
    max-inline-size: 400px;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border: 1px solid #ccc;
    margin-block-end: 1rem;
}

/* Margin shorthands */
.element {
    /* Two values: block inline */
    margin-block: 2rem;              /* margin-block-start and end */
    margin-inline: 1rem;             /* margin-inline-start and end */
    
    /* Individual values */
    margin-block: 2rem 1rem;         /* start end */
    margin-inline: 1.5rem 1rem;      /* start end */
}

/* Padding shorthands */
.box {
    padding-block: 1.5rem;           /* Same start and end */
    padding-inline: 2rem;            /* Same start and end */
    
    padding-block: 2rem 1rem;        /* Different start and end */
    padding-inline: 2.5rem 1.5rem;
}

/* Border shorthands */
.bordered {
    /* All border properties */
    border-block: 2px solid blue;    /* Both block borders */
    border-inline: 1px solid gray;   /* Both inline borders */
    
    /* Individual sides */
    border-block-start: 3px solid red;
    border-inline-end: 2px dashed green;
    
    /* Width only */
    border-block-width: 2px;
    border-inline-width: 1px 3px;    /* start end */
    
    /* Color only */
    border-block-color: blue;
    border-inline-color: red green;  /* start end */
    
    /* Style only */
    border-block-style: solid;
    border-inline-style: dashed;
}

/* Inset shorthands (positioning) */
.positioned {
    position: absolute;
    
    /* Two values: block inline */
    inset-block: 0;                  /* top and bottom = 0 */
    inset-inline: 20px;              /* left and right = 20px (in LTR) */
    
    /* Different values */
    inset-block: 10px 20px;          /* start=10px, end=20px */
    inset-inline: 0 auto;            /* start=0, end=auto */
    
    /* All four sides */
    inset: 0;                        /* All sides = 0 */
    inset: 10px 20px;                /* block inline */
    inset: 10px 20px 30px 40px;      /* top right bottom left */
}

/* Border-radius with logical properties */
.rounded {
    /* Logical corner properties */
    border-start-start-radius: 8px;  /* Top-left in LTR */
    border-start-end-radius: 8px;    /* Top-right in LTR */
    border-end-start-radius: 0;      /* Bottom-left in LTR */
    border-end-end-radius: 0;        /* Bottom-right in LTR */
}

/* Scroll padding (logical) */
.scroll-container {
    scroll-padding-block: 2rem;
    scroll-padding-inline: 1rem;
    
    scroll-padding-block-start: 100px;
    scroll-padding-inline-end: 50px;
}

/* Page layout system */
.page {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    inline-size: 100%;
    padding-block: 1rem;
    padding-inline: 2rem;
    border-block-end: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}

.logo {
    inline-size: 150px;
    block-size: 40px;
}

/* Main content area */
.main {
    flex: 1;
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap: 2rem;
    padding-inline: 2rem;
    padding-block: 2rem;
}

/* Sidebar start (left in LTR, right in RTL) */
.sidebar-start {
    padding-inline-end: 2rem;
    border-inline-end: 1px solid #eee;
}

.sidebar-start nav {
    position: sticky;
    inset-block-start: 2rem;
}

.sidebar-start a {
    display: block;
    padding-block: 0.5rem;
    padding-inline-start: 1rem;
    margin-block-end: 0.25rem;
    border-inline-start: 3px solid transparent;
}

.sidebar-start a:hover {
    border-inline-start-color: blue;
    background: #f5f5f5;
}

/* Content area */
.content {
    max-inline-size: 800px;
}

.content h1 {
    margin-block-end: 1.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 2px solid #333;
}

.content p {
    margin-block-end: 1rem;
    line-height: 1.6;
}

.content blockquote {
    margin-block: 2rem;
    margin-inline-start: 2rem;
    padding-inline-start: 1.5rem;
    border-inline-start: 4px solid #0066cc;
    font-style: italic;
}

/* Sidebar end (right in LTR, left in RTL) */
.sidebar-end {
    padding-inline-start: 2rem;
    border-inline-start: 1px solid #eee;
}

.widget {
    margin-block-end: 2rem;
    padding-block: 1rem;
    padding-inline: 1.5rem;
    background: #f9f9f9;
    border-inline-start: 3px solid #0066cc;
}

/* Footer */
.footer {
    inline-size: 100%;
    margin-block-start: auto;
    padding-block: 2rem;
    padding-inline: 2rem;
    border-block-start: 1px solid #ddd;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .main {
        grid-template-columns: 1fr;
    }
    
    .sidebar-start,
    .sidebar-end {
        border: none;
        padding: 0;
        margin-block-end: 2rem;
    }
}