Right-to-left

This is strange, right?

Here are some examples with arabic lorem ipsum.

  • ماذا واتّجه إذ الا, و إيو اتفاق بتطويق والديون, به، وجزر عالمية الولايات بل. ولم أي تنفّس مدينة والفرنسي. لكل تونس وعلى تكبّد عن, ما هذا تعداد وإعلان. أم لكل هُزم المضي ارتكبها, مرمى وحرمان بالإنزال لان من. مليون الإقتصادية جعل بـ. وفرنسا العمليات لكل ٣٠. أخذ أهّل الباهضة الأوروبية، بل, نهاية الشطر عدد هو.
  • جعل ٠٨٠٤ وقرى الإمداد في, وقرى مشاركة الى هو. أي لإعلان واستمر باستخدام أما. فقد لم هاربر عملية وإيطالي, يتبقّ جزيرتي والمانيا على ان. ان وبحلول شموليةً مدن, وبالرغم البولندي اقتصادية جُل مع. دنو جيما شاسعة الهادي أم, ما الصين انتصارهم الإيطالية على.
صباح الخير
انا لا اتكلم العربية صباح الخير أبله
صباح الخير انا لا اتكلم العربية
انا لا اتكلم العربية انا لا اتكلم العربية
انا لا اتكلم العربية

انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية

Mastercard


How to activate right-to-left option/conceive right-to-left

  1. In the global stylesheet (styles-pm.scss), set $rtl-option: true;, this will enable additionnal styles dedicated to RTL adaptations (and not in design system partials).
  2. If an image has a real and important notion of next/previous (ex: an arrow showing something next to it), remember to flip it using mirror class (if mirrored version doesn't already exist).
    Example: becomes with class mirror on it.
  3. For SVG sprites used in a CSS, you may create the use adapted to RTL combined with class mirror, ex. <use id="css-search-rtl" xlink:href="#symbol-search" class="black mirror" />
  4. To adapt a component that is not yet adapted, do wrap your RTL styles like this:
    .myClass { text-align: left; }
    
    @if $rtl-option == true {
      [dir="rtl"] {
        .myClass { text-align: right; }
      }
    }
    
    This will ensure your module is RTL-ready, but does not load RTL styles if they are not needed for another project.
  5. If you need to flip an image in RTL, you have the on-rtl-mirror class helper.