كيفية تحويل لوحة تحكم من LTR الى RTL

Samir Boukheche · 8 أكتوبر 2022

من فضلكم لدي استفسار

توجد العديد من لوحات تحكم Admin dashboard جاهزة للتحميل

لاكنها اغلب تكون باللغة الانجليزية وتكون من اليسار الى اليمين

انا اريد تعديلات مثلا مثل slidebar يكون على اليمين بدل على اليسار

لان في اللوحة هناك تقسيمات ثابتة ومتغيرة content

من فضلكم كيف اجعل واقوم مثل هاته التغيرات لاجعلها بالعربية

اتمنى تساعدوني وشكرا جزيلا

Adnane Kadri · 8 أكتوبر 2022

لا يوجد قاعدة معينة يمكن من عليها تعديل اتجاه العناصر لأن الموضوع مرن جدا، وقد نجد كل مصمم يصف الموضوع بطريقة ما. ولكن بشكل عام قد تحتاج:

جعل اتجاه الصفحة rtl بارفاق القيمة rtl للخاصية dir لعنصر html و body وأي عناصر يتم تجاوز هاته الخاصية فيها.
ضبط محاذاة النصوص بجعلها text-align: right
ضبط وعكس اتجاه العناصر المعومة، اي تلك التي تمتلك الخاصية float.
تعديل تموضع العناصر التي تمتلك وضعية مطلقة. فان كانت تمتلك الخاصية left:0 اعطها right: 0 وهكذا.
ضبط خواص الهوامش التلقائية على المحور x. فان كان عنصر ما يمتلك margin-left:auto يجب ان تصبح الخاصية margin-right:auto

هذا بجانب انك قد تحتاج بعض التعديلات الجزئية الأخرى، التي تناسب العرض باللغة العربية مثلا.

علي عبد محسن · 8 أكتوبر 2022

يمكنك إستعمال الattribute المسمى dir على الحافظة الرئيسية التي تحيط بالكود (body) بإسناد القيمة rtl لها وتجرب إذا كانت جميع العناصر ستأخذ نفس الإتجاه المطلوب أم لا..

العناصر التي تمتلك الخاصية display بقيمة absolute مثلا ربما تحتاج تعديل قيمة left أو right لها حتى تظهر بالإتجاه الصحيح.

طبعاً تبقى هذه إرشادات عامة بدون وجود كود تتم معاينته ومن ثم الحكم عليه.

...
<body dir="rtl">
...
</body>
...

...
/*display:absolute مثلاً إذا كان لديك الفقرة التالية بخاصية */

p{ /*dir="ltr" هنا في حالة */
    display: absolute;
    left:10px
}
...
/* تقوم بتغييرها الى التالي */


p{ /*dir="rtl" هنا في حالة */
    display: absolute;
    right:10px
}
...