كيف أجعل بوتستراب يدعم اللغة العربية؟

المبرمج العربي · 14 يونيو 2016

أريد أن أنشئ موقع عربي باستخدام بوتستراب، فكيف أجعل بوتستراب يدعم اللغة العريبة؟ أي من حيث دعم اتجاه اللغة وغيرها...

هشام رزق الله · 14 يونيو 2016

توجد عدّة مشاريع لدعم اللغة العريبة لمشروع بوتستراب من أشهرها هذا المشروع، لكن بالنسبة لي وللكثير من المبرمجين، فأنا أفضل أن أعدّل بنفسي على الموقع لجعله يدعم العربية مثلا عن طريق وضع هذا السطر:

<html lang="ar">

واستخدام خط درويد نسخ للموقع:

  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/droid-arabic-naskh" type="text/css"/>

ومن ثم اجعل اتجاه النص من اليمين لليسار و أعدل على تنسيق CSS لجعله يستخدم الخط السابق:

body {
	font-family: 'DroidArabicNaskhRegular';
    font-weight: normal;
    font-style: normal; 
	direction: rtl;
}

هذه بعض الأشياء البسيطة التي أقوم بها لدعم اللغة العربية في مشروع بوتستراب.

hassenzouari98 · 14 يونيو 2016

من المستحسن استعمل المكتبة التي ذكرها الاخ هشام وهي مكتبة Bootstrap RTL حيث توفر عليك الجهد والعمل وتقوم بتعديل كل التنسيقات مثل float,direction,text-align.

وبالتالي سيكون كود html هكذا:

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta http-equiv="Content-Language" content="ar">
        <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
        <!--IE Compatibility Meta-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--Mobile Meta-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <!-- Bootstrap RTL -->
        <link rel="stylesheet" href="http://cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css">
        <!--ِ ِCustom CSS -->
        <link rel="stylesheet" href="style.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <title>Title_Here</title>
        <link rel="icon" type="image/x-icon" href="Icon_url_here" />
    </head>
    <body>
        <!-- Content Here -->
    </body>
</html>

وغالبا ما استعمل هذا الكود في بداية كل مشروع عربي.

ومن ثم قم بتغيير نوعية الخط الى خط خاص باللغة العربية من خلال ملف css:

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);

body {
 font-family: 'Amiri', serif; 
}

المزيد من الخطوط العربية

كيف أجعل بوتستراب يدعم اللغة العربية؟

السؤال

المبرمج العربي

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

Recommended Posts

هشام رزق الله

hassenzouari98

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية