Back to Details

rtl-css

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

RTL CSS with Logical Properties

使用逻辑属性的RTL CSS

The Golden Rule

黄金准则

NEVER use physical properties. ALWAYS use logical properties.
绝不使用物理属性，始终使用逻辑属性。

Property Mapping

属性映射

Physical (❌)Logical (✅)Tailwind
padding-leftpadding-inline-startps-*
padding-rightpadding-inline-endpe-*
margin-leftmargin-inline-startms-*
margin-rightmargin-inline-endme-*
leftinset-inline-startstart-*
rightinset-inline-endend-*
text-align: lefttext-align: starttext-start
text-align: righttext-align: endtext-end
border-leftborder-inline-startborder-s-*
border-rightborder-inline-endborder-e-*
物理属性（❌）逻辑属性（✅）Tailwind类
padding-leftpadding-inline-startps-*
padding-rightpadding-inline-endpe-*
margin-leftmargin-inline-startms-*
margin-rightmargin-inline-endme-*
leftinset-inline-startstart-*
rightinset-inline-endend-*
text-align: lefttext-align: starttext-start
text-align: righttext-align: endtext-end
border-leftborder-inline-startborder-s-*
border-rightborder-inline-endborder-e-*

Tailwind Examples

Tailwind示例

tsx
// ❌ WRONG - Breaks in RTL
<div className="pl-4 pr-2 ml-auto text-left border-l-2">

// ✅ CORRECT - Works everywhere
<div className="ps-4 pe-2 ms-auto text-start border-s-2">
tsx
// ❌ 错误 - 在RTL环境下会失效
<div className="pl-4 pr-2 ml-auto text-left border-l-2">

// ✅ 正确 - 在所有环境下都能正常工作
<div className="ps-4 pe-2 ms-auto text-start border-s-2">

Next.js Layout with RTL

支持RTL的Next.js布局

typescript
// app/[locale]/layout.tsx
import { isRtlLang } from 'rtl-detect';

export default function LocaleLayout({
  children,
  params: { locale },
}) {
  const dir = isRtlLang(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}
typescript
// app/[locale]/layout.tsx
import { isRtlLang } from 'rtl-detect';

export default function LocaleLayout({
  children,
  params: { locale },
}) {
  const dir = isRtlLang(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

Icon Flipping

图标翻转

tsx
// Directional icons need flip
<ChevronRight className="rtl:rotate-180" />
<ArrowRight className="rtl:rotate-180" />
<ArrowLeft className="rtl:rotate-180" />

// Universal icons - don't flip
<Check /> <X /> <Search /> <Menu /> <Home />
tsx
// 方向性图标需要翻转
<ChevronRight className="rtl:rotate-180" />
<ArrowRight className="rtl:rotate-180" />
<ArrowLeft className="rtl:rotate-180" />

// 通用图标 - 无需翻转
<Check /> <X /> <Search /> <Menu /> <Home />

Audit Command

审计命令

Run 
scripts/audit_rtl.sh
to find violations in your codebase.
运行
scripts/audit_rtl.sh
以在代码库中查找不符合规范的内容。

Checklist

检查清单

  • All padding uses ps-/pe-
  • All margins uses ms-/me-
  • Positioning uses start-/end-
  • Text uses text-start/text-end
  • Directional icons have rtl:rotate-180
  • Layout has dir attribute
  • 所有内边距使用ps-/pe-
  • 所有外边距使用ms-/me-
  • 定位使用start-/end-
  • 文本使用text-start/text-end
  • 方向性图标添加rtl:rotate-180
  • 布局包含dir属性