الـ Localization في React و css
علي الشيخ • منذ 5 سنوات
كيف اخلي موقعي يدعم تعدد اللغات في React؟
وهل اقدر اعكس بعض خواص الـ CSS مثل الـ float او padding-left الخ... او لازم انشء ملف css جديد؟
ساعد بالإجابة
"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."
الإجابات (1)
عمار الخوالدة • منذ 5 سنوات
أنا لا استخدم React لكن يمكنني افادتك بشكل عام،
أولا بالنسبة لـ CSS، فأنت غالبا حتى تقوم بقلب الموقع من RTL الى LTR او العكس، ستستخدم الـ dir attribute على عنصر كبير كـ html او body، مثلا:
<html dir="rtl">
<head>
.....
</head>
<body>
<p>اتجاه العناصر هنا سيكون من اليمين الى اليسار</p>
</body>
</html>
----------------------------------------------------------------
<html dir="ltr">
<head>
.....
</head>
<body>
<p>اتجاه العناصر هنا سيكون من اليسار الى اليمين</p>
</body>
</html>
سيتم قلب كل العناصر في الموقع، لكن ستبقى مشكلة خصائص الـ CSS مثل padding و margin و border وغيرها اذا حددت باتجاه معين.
لكن بما ان لدينا Attribute يوضح الاتجاه الذي نحتاجه فالمشكلة يمكن حلها ببساطة باستخدام CSS Selectors، انظر الى هذا المثال:
.classname { /* الستايل في الحالة الرئيسية */
padding-left: 5px;
}
[dir=rtl] .classname { /* الستايل في حالة كان الاتجاه من اليمين الى اليسار */
padding-right: 5px;
}
وهكذا بالنسبة لجميع الكلاسات التي تريد عكسها.
بالنسبة لـ React فانا لا استخدمها لكن الفكرة واحدة بغض النظر عن اطار العمل المستخدم، ملف JSON يحتوي على بيانات اللغات، وبحسب اللغة الفعالة حاليا يحمل الملف الخاص بتلك اللغة،
وستجد غالبا ادوات جاهزة لهذا الموضوع، مثلا بالنسبة لـ React وجدت هذه عند البحث:
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !