إضافة ملف rtl.css لتغيير الاتجاه laravel

ابراهيم الخليل سماني · 15 يوليو 2022

السلام عليكم

قمت بتغيير الإتجاه الكلي للموقع في حالة اللغة العربية عن طريق التحقق من local, لكن يوجد عناصر أخرى تحتاج ضبظ وتخصيص, هل بنفس الطريقة أضيف ملف تخصيص للغة العربية css يعالج كل التغييرات الناتجة عن تغيير الإتجاه بعدما يتحقق من local مثلا:

    <!-- Custom Arabic css -->
    <link rel="stylesheet" href="{{ @if( app()->getLocale() == 'ar') asset($activeTemplateTrue.'css/rtlcustom.css') @else  asset($activeTemplateTrue.'css/custom.css') @endif  }}">

هل هذا يعتبر عملي ؟

لكن جربت ولم ينجح ؟وضعتها في المسار الصحيح بجانب custom.css الموجود مسبقا

ماذا يعني activeTemplateTrue$ وحتى بعد تغييرها ووضع المسار مباشرة لم تضبط

تم التعديل في 15 يوليو 2022 بواسطة Brahim Semmani

سمير عبود · 15 يوليو 2022

لا أدري ما المقصود بـ activeTemplateTrue هي متغير لكن لا أعلم ما الذي يحتويه.

عُموما موضوع إضافة ملف تنسيقات خاص باللغة العربية بسيط:

@if (app()->getLocale() === 'ar')


<!-- BEGIN VENDOR CSS-->
<link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/vendors.css') }}">
<!-- END VENDOR CSS-->
<!-- BEGIN STACK CSS-->
<link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/app.css') }}">
<link rel="stylesheet" href="{{ asset('admin_assets/css-rtl/custom-rtl.css') }}">

@else


<!-- BEGIN VENDOR CSS-->
<link rel="stylesheet" href="{{ asset('admin_assets/css/vendors.css') }}">
<!-- END VENDOR CSS-->
<!-- BEGIN STACK CSS-->
<link rel="stylesheet" href="{{ asset('admin_assets/css/app.css') }}">
<!-- END STACK CSS-->


@endif

يعني فقط شرط بسيط للتحقق من اللغة و تحميل ملفات التنسيقات الموافقة. حيث في المثال أعلاه admin_assets عبارة عن مجلد موجود بداخل المجلد public.

هذه الحزمة ستُساعدك كثيراً في موضوع تعدد اللغات: laravel-localization

Adnane Kadri · 15 يوليو 2022

كتطبيق آخر، يمكنك ايضا تضمين الملف الرئيسي للتنسيقات وتحته ملف التنسيقات RTL كـ:

<link rel="stylesheet" href="{{ asset($activeTemplateTrue.'css/custom.css') }}">
<link rel="stylesheet" href="{{ asset($activeTemplateTrue.'css/rtlcustom.css') }}">

على أن ملف تنسيقات rtlcustom سيقوم بتحديد العناصر عن طريق محددات العناصر السليلة descendant combinator التي تتفرع عن العنصر body الذي يمتلك الصنف rtl. بمعنى أن أصنافك ستكون كـ:

body.rtl .my-custom-item{
   // اية تنسيقات 
}

بهاته الطريقة، لن يكون عليك كتابة التنسيقات من جديد، وانما ستحتاج فقط تجاوز التنسيقات الغير مضبوطة في الاتجاه rtl. لاحظ أن rtlcustom.css يجب تضمينه بعد custom.css ليمكن تجاوز اي تنسيقات معرفة في الملف الأول.

وبطبيعة الحال فإننا سنضيف الصنف rtl للعنصر body بشكل شرطي:

<body class="@if(app()->getLocale() == 'ar') rtl @endif">

محددات العناصر السليلة

إضافة ملف rtl.css لتغيير الاتجاه laravel

السؤال

ابراهيم الخليل سماني

2 أجوبة على هذا السؤال

Recommended Posts

سمير عبود

Adnane Kadri

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية