direction-attribute
Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.
소스 정보
- 저장소
- thedaviddias/Front-End-Checklist
- 최근 소스 활동
- 2026년 5월 30일 03:29
- 감지된 SKILL.md 언어
- 영어
- 스타
- 74,155
- 포크
- 6,739
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- direction-attribute
- description
- Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.
- metadata
- {"category":"html","priority":"medium","difficulty":"intermediate","estimatedTime":"15","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/html/direction-attribute"}
# Set text direction for RTL languages
Without proper dir attributes, RTL text displays incorrectly, UI elements appear backwards, and screen readers announce content in the wrong order.
## Quick Reference
- Set `dir="rtl"` on <html> for Arabic, Hebrew, Persian, Urdu
- Use `dir="auto"` for user-generated content
- Combine with CSS logical properties (inline-start, inline-end)
- Test UI mirroring for navigation, icons, and layouts
- Use bidi isolation such as `<bdi>` for inline mixed-direction user content
## Check
Verify that this HTML document uses the appropriate dir attribute to indicate text direction for right-to-left languages like Arabic, Hebrew, or mixed content. Check user-generated inline text for `dir="auto"` or bidi isolation where names, handles, or snippets mix writing directions.
## Fix
Add the dir attribute to the html element or specific elements with values 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' for automatic detection. Use `<bdi>` or equivalent bidi isolation for mixed-direction inline content.
## Explain
Explain how the dir attribute helps browsers and screen readers properly display and navigate text in different writing directions.
## Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Set text direction for RTL languages. Flag exact elements, attributes, and routes where the rendered HTML violates the rule. Inspect user-generated inline content, not only page-level locale wrappers.
---
For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.
Rule page: https://frontendchecklist.io/en/rules/html/direction-attribute
GitHub에서 보기