اذهب إلى المحتوى
  • 0

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

Samir Boukheche

السؤال

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

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

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

يمكنك إستعمال ال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
}
...
	
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

اغلب Admin dashboard تكون rtl ready

 

اذا لم تكن متوفرة وكانت نسخة البوت ستراب => 4 في هذه الحالة اتبع تعليمات الاخ علي محسن بالاعلى باضافة rtl في تاغ <html> عوضا عن body

https://getbootstrap.com/docs/5.0/getting-started/rtl/

بعد ذلك يلزمك تحويل جميع مافي ملف css من مارغن او بادينغ او خلافه اسهل واسرع طريقة عن طريق هذا الموقع

https://rtlcss.com/playground/

ضع ملف جميع الاكواد من ملف css وخذ الاكواد بعد التحويل والصقها بالملف

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...