--- id: w3css-rtl title: "W3CSS RTL" category: "Programming_Language" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["right-to-left", "w3-rtl", "W3.CSS RTL 지원"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.87 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["w3css", "css-framework", "w3schools", "rtl", "accessibility"] raw_sources: ["https://www.w3schools.com/w3css/w3css_rtl.asp"] applied_in: [] github_commit: "" --- # [[W3CSS RTL]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) Full RTL support requires FOUR coordinated changes, not just one CSS class β€” `dir="rtl"` on `` for semantic correctness, `w3-rtl` on `` for component behavior, swapping `margin-left` for `margin-right` on main content, and repositioning the sidebar with `right:0` instead of `left:0` β€” meaning `w3-rtl` alone is necessary but not sufficient for a properly mirrored layout. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`w3-rtl`** (W3.CSS 5+) β€” adjusts text direction/alignment for right-to-left languages (Arabic, Hebrew, Persian). [S1] - **Scoped application** β€” can be applied globally to `` or locally to a specific `
`. [S1] - **`w3-ltr`** β€” reverts a specific section back to left-to-right within an otherwise RTL page. [S1] - **Full RTL checklist** β€” `dir="rtl"` on `` (semantic correctness), `w3-rtl` on `` (component behavior), `margin-right` instead of `margin-left` for main content, sidebar positioned with `right:0`. [S1] - **Manual adjustment still needed** β€” other text alignment, margins, paddings, and floats must be checked to ensure layout components flip appropriately. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) - Global RTL: `

Ω…Ψ±Ψ­Ψ¨Ψ§ Ψ¨Ωƒ في Ω…ΩˆΩ‚ΨΉΩŠ

`. [S1] - Scoped RTL: `

...

`. [S1] - Reverting a section: `

This section is back to left-to-right.

`. [S1] - Full RTL page setup: `