Products מוצרים
Mobile AppWeb TranslatorChrome ExtensionSpeak HebrewAPIs & DevelopersHebrewCore APIEnterpriseFor NewsroomsFor GovernmentTools כלים
All Hebrew ToolsHebrew to English TranslatorEnglish to Hebrew TranslatorOnline Hebrew KeyboardVerb ConjugatorGematria CalculatorHebrew Date ConverterToday's Hebrew DateJewish Holidays This YearZmanim by CityYour Name in HebrewThe Hebrew AlphabetSlang Dictionarybaba AtlasLearn ללמוד
Hebrew GuidesAI Hebrew TutorHebrew for Yom KippurHebrew for TravelHebrew in the NewsIsraeli News in EnglishHebrew News in EnglishHebrew on WhatsAppBlogNews חדשות
baba NewsGood Morning, IsraelIsraeli NewsroomsIsraeli News APIMore עוד
PricingAboutSupportRTL CSS Checker
Paste a stylesheet and get every physical left/right property flagged, with the logical-property fix applied automatically wherever the swap is mechanical.
.notification {
margin-inline-start: 12px;
padding-inline-end: 16px;
text-align: start;
border-inline-start: 3px solid var(--accent);
border-start-start-radius: 8px;
float: inline-end;
}| Line | Found | Kind | Note |
|---|---|---|---|
| 2 | margin-left: 12px; | Fixed automatically | margin-left depends on document direction; use margin-inline-start. |
| 3 | padding-right: 16px; | Fixed automatically | padding-right depends on document direction; use padding-inline-end. |
| 4 | text-align: left; | Fixed automatically | text-align: left depends on document direction; use start. |
| 5 | border-left: 3px solid var(--accent); | Fixed automatically | border-left depends on document direction; use border-inline-start. |
| 6 | border-top-left-radius: 8px; | Fixed automatically | border-top-left-radius names a physical corner; use border-start-start-radius. |
| 7 | float: right; | Fixed automatically | float: right depends on document direction; use float: inline-end (check your target browsers). |
The Six RTL Mistakes
Almost every RTL bug traces back to one of six habits: hardcoding margin-left or padding-right instead of the inline-start/end logical property; positioning with left/right instead of inset-inline-start/end; setting text-align to left or right instead of start or end; naming a border side or a border-radius corner physically instead of logically; floating an element left or right instead of to an inline edge; and reaching for transform: translateX or a background-position side, neither of which has a clean logical equivalent, without a direction check.
The fix for the first five is almost always a rename, since logical properties render identically to their physical counterpart in a left-to-right layout and only differ once direction flips. The last category (transforms, background positions, and hardcoded direction) needs a human to decide what should actually happen in RTL.
Frequently Asked Questions
What is a "logical" CSS property?
A logical property names a side relative to text flow (inline-start, inline-end, block-start, block-end) instead of a screen side (left, right, top, bottom). margin-inline-start is the left margin in a left-to-right layout and the right margin in a right-to-left one, automatically, with no media query or [dir] selector.
Does fixing these properties break the LTR layout?
No. Logical properties render identically to their physical equivalent in a left-to-right context; the difference only shows once direction flips.
Why can't everything be auto-fixed?
A few properties (background-position, hardcoded direction, transform: translateX) don't have a drop-in logical equivalent, or depend on layout the checker can't see from CSS text alone, so those are flagged for a manual check instead of rewritten.