21

أول تطبيق ل RtlCss تعريب Bootstrap 2.x

باستعمال القليل من الاستثناءات (دزينة)

والقليل من الضبط اليدوي (3 أو 4 كلاسات)

تنفيذ سكربت RtlCss قام بالباقي. ما بميز طريقة عمل هذا السكربت أنه يمكنك أن تستفيد من CDN. حيث أنه يولد ملف css صغير يحتوي التعريب فقط يستعمل إلى جانب الملف الأصلي.

http://muayyad-alsadi.githu...
http://muayyad-alsadi.githu...
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

2
billal em أضف ردا

موضوعك مربك قليلا , تتكلم عن RtlCss كأن الجميع يعرف مذا تقصد , أضنك نسيت وضع رابط لذلك المشروع [1]

[1]

2
assassinateur أضف ردا

شكرا على المجهود الرائع! حقا، السكربت مميز جدا. فقط 3 طلبات

1- نسخة تقوم بالعكس تماما، أحيانا أبني مواقع على أساس أنها عربية ثم أريد صنع نسخة انجليزية منها، أريد أن يكون هناك سكربت يقوم بهذا بدلي وأهتم أنا بأشياء ثانوية (تغيير الخطوط مثلا)

2- هل تستطيع ترجمة المشروع للغة أخرى، بالتحديد إلى node.js حتى أحاول ربما جعلها كgrunt plugin ليسهل استخدامها

3- هذا كان كل شيء، شكرا مجددا على السكربت الرائع

1
alsadi أضف ردا

1- نسخة تقوم بالعكس تماما

السكربت يعمل mirror فأظن أنه قد يعمل بالاتجاه الآخر أيضا دون أي تعديل. هو يحول اليمين لليسار واليسار لليمين.

2- هل تستطيع ترجمة المشروع للغة أخرى، بالتحديد إلى node.js حتى أحاول ربما جعلها كgrunt plugin ليسهل استخدامها

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

لا أعرف إن كان البعض يستفيد من توفير نسخة تستخدم google app engine الذي يدعم بايثون ليقوم بها on line.

0
khashabawy أضف ردا

ولكن ال bootstrap الحالى هو bootstrap 3.x

مشروعك RtlCss مجهودك فيه كذلك و لكنه مكرر

جاءت لى فكرة منذ فتره لعمل LTR ,RTL support لأى ملف CSS بأقصى optimization ممكن و هى :

لدينا ملف main.css

يتم استخلاص السطور التى تحتوى على Direction أو text-align أو padding أو margin أو float أو borders و كذلك الخطوط المستخدم لأنه الإنجليزي تستخدم فيه خطوط غير العربى

يتم حذفها من الملف الأصلى و تخزينها فى ملف جديد بإسم LTR.CSS مثلاً

يتم تحويل الملف بإستخدام RtlCss خاصتك إلى ملف جديد بإسم RTL.CSS

بالتالى يكون لدينا 3 ملفات

main.css : و يكون Directionless .. ليس فيه أى اتجاهات

LTR.css : به الإتجاهات فقط التى تجعل الملف بإتجاه اليسار لليمين

RTL.css : به الإتجاهات فقط التى تجعل الملف بإتجاه اليمين لليسار

قمت بتطبيق الفكرة بشكل مختلف قليلاً على أحد الستايلات الخاصة بى :

الملف الأساسى و يحتوى على ال RTL :

للحصول على الملف بشكل LTR يتم إستدعاء هذا الملف بعد الملف السابق .. ليقوم بعمل override للسطور الخاصة بالإتجاهات .

4
alsadi أضف ردا

مشروعك RtlCss مجهودك فيه كذلك و لكنه مكرر

... يتم حذفها من الملف الأصلى و تخزينها فى ملف جديد بإسم LTR.CSS مثلاً

main.css : و يكون Directionless .. ليس فيه أى اتجاهات

لا بل هو يقوم بالشيء الجديد الذي تفكر فيه فهو لا يولد إلا rtl فقط دون الألوان وأحجام الخطوط ... ويستخدم مع/بعد ال main.css الذي تتحدث عنه. بمعنى يكون ملف main.css الرئيسي وملف آخر اسمه main.rtl.css دون الحاجة لعزل main.ltr.css حيث أن السكربت يتكفل بعمل override.

في الحقيقة أنا كنت من أول من عمل سكربتات لتعريب السمات (نشرت الطريقة أواخر 1430 هـ الموافق أواخر عام 2009 )

ونشرت تطبيق السكربت القديم على bootstrap في أول 2013 (يعني قبل أقل من سنتين)

الطريقة القديمة وهي أن تعمل ملف عربي يستخدم عوضا عن الملف الأصلي (يحتوي كل شيء بما فيها الألوان والخطوط ...) ومن يريد الطريقة القديمة فهي موجودة على tag السابق

ما هو الجديد في هذا السكربت الجديد؟ الجديد أنه

  • يولد ملف صغير فقط يغير الاتجاه بطريقة override يضاف بعد المراد تعريبه

  • يمكنه الاستفادة من الكاش للملف الإنجليزية

  • يمكنك من الاستفادة من CDN حيث أن الملف الإنجليزي يظل غير معدل

  • يمكنك استعمال أدوات تغير الألوان وغيرها من التخصيص دون الحاجة لتعديل ملف التعريب.

0
khashabawy أضف ردا

إعتذر إن أسأت الفهم , مجهود جبار و تشكر عليه

بالمناسبة , هل bootstrap تنوى تنزيل نسخه خاصة بال RTL ؟؟

لأن ذلك سيكون أفضل فى حالة إستخدام customized version من خلال

و هو ما أحتاجه كثيراً لجعل ال breakpoints يكون عند شاشات أكبر من شاشة الموبايل

3
alsadi أضف ردا

ولكن ال bootstrap الحالى هو bootstrap 3.x

لم تكلفني شيء أكثر من مجرد تنفيذ نفس السكربت (وإن كانت قد تحتاج تخصيص الاستثناءات). إليك boostrap 3.3.1

وإن كنت أفضل التمهل في إخراجها حتى إعداد وثائق تستخدم الكلاسات الجديدة مثل pull-start و pull-end كما في

0
khashabawy أضف ردا

هناك مشكلة عند تجربة التطبيق :

1
alsadi أضف ردا

أنا أستعمل بايثون 2 وأنت يبدو أنك تستعمل بايثون 3. يمكنك استعمال 2to3 أو تثبيت بايثون 2.

0
Mtahhan أضف ردا

مجهود جميل أخي لكن نسخة البوتستراب التي عملت عليها قديمه

بالنسبة لي لم أعد أستخدمها منذ سنة تقريباً

جهودك مشكورة

تحياتي

0
alsadi أضف ردا

طبقتها أيضا على bootstrap 3.3.1 الجديد

0
assassinateur أضف ردا

مرحبا، احاول استخدامها ولكن لا فائدة دوما، ولا أدري لماذا، النسخة التي عندي هي 2.7

المشكلة هي

C:\rtl>rtlcss.py main.css
generating RTL override for [main.css]: ...   started ...
Traceback (most recent call last):
  File "C:\rtl\RtlCss.py", line 449, in <module>
    main()
  File "C:\rtl\RtlCss.py", line 446, in main
    override_file(input_file, excludes)
  File "C:\rtl\RtlCss.py", line 420, in override_file
    css=CssFile(open(input_file, 'rt').read())
  File "C:\rtl\RtlCss.py", line 377, in __init__
    if content: self.parse(content)
  File "C:\rtl\RtlCss.py", line 408, in parse
    block.append(CssStyle(style.strip(), value.strip()))
AttributeError: 'NoneType' object has no attribute 'append'
0
assassinateur أضف ردا

نجحت في تشغيلها، عملت بروعة

المشكلة ربما كانت من الكود في الملف (كان فيه import وفيه font-face ربما سببوا المشكلة)

0
alsadi أضف ردا

أنا لم أدعم import لأنه لا ينصح بها لأنها render blocking. ربما علي إضافة ما يتجاهلها.