المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

‎ربما رأيتم هذا التأثير مستخدم في مواقع شركة قوقل Google خصوصاً في خدمة الترجمة Google Translate، وموقع يوتيوب YouTube. عند تحويل اللغة في مدخلات النماذج Forms Input إلى اللغة العربية والبدء في كتابة الأحرف، يتم وبشكل تلقائي تحويل اتجاه النص إلى اليمين ليتماشى مع اللغة. وعند تحويل لغة النص إلى الإنجليزية، يتم تغيير الاتجاه إلى اليسار.

‎في هذا الدرس، سأقوم بشرح طريقة محاكاة نفس هذا التأثير في النماذج. طبعاً، وكما هي عادتنا في المشروع، الشفرة البرمجية في هذا المقال مطروحة بشكل مجاني وحر (مفتوحة المصدر) للاستخدام الشخصي أو التجاري بترخيص غنو GNU GPL v2.

مثال

‎مثل هذا التأثير يتم باستخدام لغة الجافاسكربت JavaScript لمعرفة المحارف المدخلة في النماذج، وبالتالي تحويل الاتجاه بشكل آلي إلى اليمين أو اليسار حسب اللغة المدخلة.

الشفرة البرمجية كاملة

‎//العربية - المدى
//0600–06FF
var rtlChars	 = '\u0600-\u06FF';
‎//العربية الملحقة - المدى
//0750–077F
rtlChars		+= '\u0750-\u077F';
‎//نماذج التقديم العربية - أ - المدى
//FB50–FDFF
rtlChars		+= '\uFB50-\uFDFF';
‎//نماذج التقديم العربية - ب - المدى
//FE70–FEFF
rtlChars		+= '\uFE70-\uFEFF';

‎//علامات ترقيم وتحكم آسكي - المدى ASCII
//0000-0020
var controlChars = '\u0000-\u0020';
‎//علامات ترقيم وتحكم عامة - المدى
//2000-200D
controlChars 	+= '\u2000-\u200D';

‎//ابدأ سحر التعبير القياسي Regular Expression
var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

function detectDirection(input)
{
‎	//تسجيل القيمة الموجودة في المدخل النصي في متغير
	var value = input.value;
‎	//يتم تحويل اتجاه المدخل النصي إذا كان أحد المحارف يتبع اللغة العربية
	if ( value.match(reRTL) )
	{
		input.dir = 'rtl';
	}
‎	//لا يتم عمل شيء إذا كانت قيمة المدخل تتبع علامات الترقيم أو التحكم
	else if( value.match(reControl) )
	{
		return false;
	}
‎	//يتم تحويل اتجاه المدخل النصي لأي محرف آخر غير العربية وعلامات الترقيم والتحكم
	else
	{
		input.dir = 'ltr';
	}
}

‎يجب أن يكون مستند HTML مرمّز بترميز الشفرة الموحدة أو ما يطلق عليها يونيكود Unicode.

الخطوة ١: تعريف محارف يونيكود الخاصة باللغة العربية في متغير باستخدام التعبير القياسي Regular Expression

var rtlChars	 = '\u0600-\u06FF';
rtlChars		+= '\u0750-\u077F';
rtlChars		+= '\uFB50-\uFDFF';
rtlChars		+= '\uFE70-\uFEFF';

‎في البداية، نقوم بتعريف جميع محارف يونيكود الخاصة باللغة العربية في متغير سنسميه rtlChars، لنتمكن من التحقق من مدخلات المستخدم لاحقاً ومقارنتها بما هو موجود لدينا. وقد أخذت هذه المحارف من موقع يونيكود.

‎طريقة التعريف تتم باستخدام نظام التعبير القياسي، حيث نقوم بتعريف المدى لهذه المحارف، فعلى سبيل المثال، المدى المحجوز لمحارف اللغة العربية الأساسية هي من U+0600 إلى U+06FF. ومن ثم نضيف المحارف الأخرى الخاصة والمحجوزة للغة العربية.

الخطوة ٢: تعريف محارف يونيكود الخاصة بعلامات الترقيم والتحكم باستخدام التعبير القياسي Regular Expression

var controlChars = '\u0000-\u0020';
controlChars 	+= '\u2000-\u200D';

‎بطريقة مشابهة للخطوة ١، نقوم بتعريف المحارف الخاصة بعلامات الترقيم والتحكم الخاصة بنظام ترميز أسكي ASCII في متغير سنسميه controlChars. علامات الترقيم والتحكم التي سندرجها هنا هي على سبيل المثال، مسافات spaces، هروب esc، تحكم ctrl.

‎سيُعيننا تعريفها هنا لاحقاً في التفريق بين هذه المحارف، والمحارف الخاصة باللغة العربية. مرة أخرى، أخذت هذه المحارف من موقع يونيكود.

الخطوة ٣: تسجيل التعبير القياسي Regular Expression

var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

‎بعد تعريفنا لهذه المحارف في المتغيرات السابقة، سنقوم بتسجيلها في كائن التعبير القياسي الخاص بلغة الجافاسكربت RegExp كل على حدى.

var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

‎المتغير reRTL سيحمل كائن التعبير القياسي الخاص بمحارف اللغة العربية المراد فحصها والتحقق منها. وستلاحظون أنني أسبقت المحارف العربية بمحارف علامات الترقيم والتحكم، وذلك لسبب أن المستخدم من الممكن أن يدرج على سبيل المثال بعض من المسافات أو علامات ترقيم وتحكم أخرى قبل ادخال أحرف عربية، وبالتالي يمكننا التحقق منها وتحويل الاتجاه حتى مع علامات الترقيم المضافة قبل الأحرف العربية.

‎أما المتغير reControl فسيحمل كائن التعبير القياسي الخاص بمحارف علامات الترقيم والتحكم المراد فحصها.

الخطوة ٤: إنشاء دالة التحقق من المدخلات

function detectDirection(input)
{
	var value = input.value;

	if ( value.match(reRTL) )
	{
		input.dir = 'rtl';
	}
	else if( value.match(reControl) )
	{
		return false;
	}
	else
	{
		input.dir = 'ltr';
	}
}

‎الآن سيبدأ السحر الحقيقي للجافاسكربت. سنقوم بإنشاء دالة التحقق من محارف اللغة المدخلة، ومن ثم تحويل اتجاه النص تلقائياً في عناصر الادخال الخاصة بالنماذج. سنسمي الدالة detectDirection وستأخذ متغير نسميه input حيث سيكون عنصر الادخال Form Input.

‎في بداية الدالة، سنقوم بتسجيل القيمة الموجودة داخل عنصر الادخال في متغير، وسنسميه value.

‎الآن ستبدآ عملية التحقق والتحويل، حيث في جملة if الشرطية الأولى، سنقوم بالتحقق ما إذا كانت القيمة المدخلة تساوي أحد المحارف العربية، فإذا تحقق الشرط، سنقوم بتحويل العنصر إلى اليمين باستخدام خاصية dir.

‎إذا لم تتحقق الجملة الشرطية الأولى، وإذا كانت القيمة المدخلة من أحد محارف علامات الترقيم والتحكم، فلا نفعل شيئاً.

‎إذا لم يتم تحقيق أي من الشروط السابق ذكرها، سنقوم بافتراض أن المحرف المدخل كان أحد المحارف الغير عربية والتي تكتب من اليسار إلى اليمين، لذلك سيتم تغيير اتجاه العنصر على حسب هذا الافتراض.

الخطوة ٥ والأخيرة: إدراج حدث “عند رفع المفتاح” أو OnKeyUp لمدخلات النماذج وربطه بالدالة

<input type="text" size="70" id="rtl-txt-input" onkeyup="detectDirection(this);" />

‎تبقى لدينا ربط التحقق مع عناصر المدخلات الخاصة بالنماذج. طريقة ربط دالة التحقق تتم بواسطة الأحداث Events. حيث سيكون حدث “عند رفع المفتاح” أو OnKeyUp لدى عناصر الادخال هو المسؤول عن مناداة الدالة الخاصة بالتحقق من المحارف المدخلة. وبالتالي تغيير اتجاه العنصر على حسب اللغة المدخلة.

افتراضات الشفرة

‎في هذه الشفرة افترضت أن اللغة العربية هي اللغة الوحيدة التي تكتب من اليمين إلى اليسار، ولكن هذا غير صحيح، حيث أن بعض اللغات الأخرى تكتب من اليمين إلى اليسار كالعبرية. ولكن لم يتم دعم هذه اللغات في هذه النسخة.

دعم المتصفحات

‎تم تجربة هذه الشفرة على المتصفحات القياسية التالية، وتعمل عليها بالشكل الصحيح.

• كروم Chrome النسخة 3
• فايرفوكس Firefox النسخة 3.5.3
• انترنت اكسبلورر Internet Explorer النسخة 7
• سفاري Safari النسخة 4
• أوبرا Opera النسخة 10

وبهذا يكون لدينا شفرة برمجية للتحقق من اللغة المدخلة في النماذج باستخدام الجافاسكربت، وبالتالي تحويل الاتجاه على حسب اللغة سواء إلى اليمين، أو اليسار بطريقة محاكية لطريقة قوقل.