Convert physical CSS properties (margin-left) to logical ones (margin-inline-start) for RTL support.
This converter rewrites physical side-based CSS declarations into flow-relative logical declarations, turning margin-left into margin-inline-start and applying the same axis vocabulary to other recognized directional properties. The declaration value is retained; the name changes so the browser resolves the edge from writing-mode and direction. The common mistake is reading inline-start as a permanent synonym for left. It is left for horizontal left-to-right text, but it becomes right for horizontal RTL text and can refer to another edge in vertical writing.
A concrete input and expected output from the current implementation.
Input
margin-left: 12px;
Expected output
margin-inline-start: 12px;
The converter keeps the 12px value and replaces the physical side name with its flow-relative counterpart. In horizontal RTL content, inline-start resolves to the right instead of remaining on the physical left.
Conversion is a declaration-name substitution. For the common horizontal LTR intent, margin-left and padding-right become margin-inline-start and padding-inline-end; top and bottom side names become block-start and block-end. Numeric values, units, colors, and keywords are not themselves made directional. A 12px margin therefore remains 12px after its property is renamed.
Inline and block are axes, not permanent aliases for horizontal and vertical. Writing-mode determines their orientation and block flow, while direction determines inline start and end. In horizontal-tb with ltr, inline-start is left; with rtl, it is right. In vertical writing modes, inline edges can be top and bottom. Converted declarations follow content flow instead of a fixed screen side.
No. Convert it when left means the inline-start side of the content. Keep margin-left when the requirement is literally the physical left edge, such as clearance for a fixed left-side control. In horizontal RTL text, margin-inline-start resolves to the right, which is appropriate only when the spacing is meant to follow content flow.
No. This conversion addresses physical CSS property names, while an RTL review can also involve shorthands, transforms, background positioning, directional icons, document order, and text direction. Test the converted rules with direction: rtl and every writing mode you support. A valid logical declaration can still represent the wrong visual or semantic intent.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.