Right-to-left
This is strange, right?
Here are some examples with arabic lorem ipsum.
- ماذا واتّجه إذ الا, و إيو اتفاق بتطويق والديون, به، وجزر عالمية الولايات بل. ولم أي تنفّس مدينة والفرنسي. لكل تونس وعلى تكبّد عن, ما هذا تعداد وإعلان. أم لكل هُزم المضي ارتكبها, مرمى وحرمان بالإنزال لان من. مليون الإقتصادية جعل بـ. وفرنسا العمليات لكل ٣٠. أخذ أهّل الباهضة الأوروبية، بل, نهاية الشطر عدد هو.
- جعل ٠٨٠٤ وقرى الإمداد في, وقرى مشاركة الى هو. أي لإعلان واستمر باستخدام أما. فقد لم هاربر عملية وإيطالي, يتبقّ جزيرتي والمانيا على ان. ان وبحلول شموليةً مدن, وبالرغم البولندي اقتصادية جُل مع. دنو جيما شاسعة الهادي أم, ما الصين انتصارهم الإيطالية على.
انا لا اتكلم العربية | صباح الخير | أبله |
---|---|---|
صباح الخير | انا لا اتكلم العربية |
انا لا اتكلم العربية انا لا اتكلم العربية
انا لا اتكلم العربية
انا لا اتكلم العربية
انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية انا لا اتكلم العربية
How to activate right-to-left option/conceive right-to-left
- 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). - 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:mirror
on it. - For SVG sprites used in a CSS, you may create the
use
adapted to RTL combined with classmirror
, ex.<use id="css-search-rtl" xlink:href="#symbol-search" class="black mirror" />
- To adapt a component that is not yet adapted, do wrap your RTL styles like this:
This will ensure your module is RTL-ready, but does not load RTL styles if they are not needed for another project..myClass { text-align: left; } @if $rtl-option == true { [dir="rtl"] { .myClass { text-align: right; } } }
- If you need to flip an image in RTL, you have the
on-rtl-mirror
class helper.