SiteLint documentation and guidelines

Rtl content

Description

This rule ensures that web content designed for right-to-left (RTL) languages, such as Arabic, Hebrew, and Persian, is properly marked up and displayed. Correct handling of RTL content involves using appropriate HTML attributes and CSS properties to ensure that the text direction and layout are accurately reflected. Proper implementation is crucial for making RTL content accessible and readable for users who rely on these languages.

Disabilities impacted

  • Visual impairments: users with visual impairments who use screen readers need proper directionality to be set so that the content is read in the correct order.
  • Cognitive disabilities: users with cognitive disabilities benefit from consistent text direction and layout, which aids in comprehension and reduces confusion.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices need predictable and consistent text direction to interact effectively with the content.

Why it matters

Ensuring that RTL content is correctly implemented enhances accessibility and usability for users who read and write in RTL languages. Without proper directionality, the content can become confusing and difficult to read, leading to a poor user experience. Proper implementation supports inclusivity and ensures that web content is accessible to a global audience.

Coding problems and solutions

Common coding problems

  • Missing dir attribute: failing to set the dir attribute on HTML elements containing RTL text.
  • Incorrect direction: setting the wrong text direction, causing the content to display improperly.
  • Mixed directionality: inconsistent use of directionality within the same document, leading to confusing layout and text flow.

How to fix it

Set the dir attribute correctly

Use the dir attribute to specify the text direction as rtl for elements containing RTL text.

Incorrect example
<html lang="ar">
<head>
    <title>مرحبا بكم</title>
</head>
<body>
    <p>هذا نص باللغة العربية.</p>
</body>
</html>
Correct example
<html lang="ar" dir="rtl">
<head>
    <title>مرحبا بكم</title>
</head>
<body>
    <p>هذا نص باللغة العربية.</p>
</body>
</html>

Use CSS for directionality

In cases where the direction needs to be applied conditionally or to specific elements, use CSS properties like direction.

Incorrect example
<div>
    <p>هذا نص باللغة العربية.</p>
</div>
Correct example
<style>
.rtl-text {
    direction: rtl;
}
</style>

<div class="rtl-text">
    <p>هذا نص باللغة العربية.</p>
</div>

Handle mixed content

For documents containing both RTL and LTR content, ensure each section is marked correctly to maintain readability.

Incorrect example
<div>
    <p>هذا نص باللغة العربية.</p>
    <p>This is text in English.</p>
</div>
Correct example
<div>
    <p dir="rtl">هذا نص باللغة العربية.</p>
    <p dir="ltr">This is text in English.</p>
</div>

Considerations for bidirectional text

  • Using Unicode control characters like U+200E LEFT-TO-RIGHT OVERRIDE (LRO) and U+200F RIGHT-TO-LEFT OVERRIDE (RLO) to force the directionality of specific parts of the text.
  • Ensuring that punctuation marks are displayed correctly relative to the surrounding text.
Example with unicode control characters
<p dir="rtl">This text flows right-to-left, but <span class="ltr-text">‎this part‎</span> will flow left-to-right.</p>

Known limitations

  • Bidirectional text: handling bidirectional text (text containing both RTL and LTR segments) can be complex. Use Unicode control characters such as RLE (Right-to-Left Embedding) and LRE (Left-to-Right Embedding) where necessary.
  • Cross-browser compatibility: different browsers may render RTL content differently. Comprehensive testing across multiple browsers and devices is recommended.
  • Content management systems (CMS): ensure that CMS platforms properly support RTL content and allow easy application of the dir attribute and CSS properties.

Resources