Right to Left Web Design

Puneet Sharma

4 years ago

Here are some resource regarding Right to Left website design and development.

Steps to create CSS rules

Create a new rtl.css file and put all rtl.css rules inside it.
html[dir=”rtl”] .selector{ new css rules }
fix margin, padding, text-align, navigation-menu direction, sidebar direction, logo direction, flex-direction etc and create new css if any.

Mirroring elements

Not all interface elements need to be mirrored. Below is a comprehensive overview of elements that may be found in a website’s layout and whether or not these should be mirrored in RTL projects.

Navigation buttons & logo – a logo is usually placed in the left upper corner of English websites. In RTL websites, the logo is placed in the right upper corner. This principle also applies to the menu and navigation buttons which should be displayed in reverse order.
Form fields – headings and icons that refer to a given field on a form should be placed in the opposite position on RTL websites.
Breadcrumbs – breadcrumbs that are part of a website with a complex structure should be aligned to the right side and mirrored.
Video and audio players – video and audio players should not be mirrored because they represent playback progress instead of the flow of time.
Dates – Arabic-speaking users have their own calendar, but they are also used to the standard international date format. This element can be hyper-localized to match the locale, if the project requires it.
Calendars – calendars need to be mirrored. Monday will be displayed on the right side and Sunday on the left one.
Tables – columns of tables must be mirrored.
Browser interface – Internet Explorer and Opera display scrollbars on the left side on Arabic websites.

Right to Left Bootstrap 5 – Beta Template

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>