هل يمكنك تحديد الخطأ في صفحة الويب التالية؟
مستخدمي الإنترنت الذين يمكنهم قراءة اللغة العربية والبالغ عددهم 56 مليونًا ، فربما يمكنك ملاحظة أن عنوان الفيلم المكتوب باللغة العربية قد تسبب في ترتيب الكلمات ترتيباً خاطئا، حيث يقع نصف العبارة "57 reviews" على جانب من السطر بينما يقع النصف الآخر على الجانب الثاني.. ولقد أطلقنا أداة BidiChecker التي تفحص صفحات الويب بحثًا عن الأخطاء المتعلقة بمعالجة النص ثنائي الاتجاه لتساعدك على العثور على ذلك الخطأ:
وكما يوضح المثال، فإن أخطاء تحويل النص يمكن أن تقع حتى لو كان تطبيق الويب بأكمله بلغة من اليسار إلى اليمين. وفي حالة قبول التطبيق لإدخالات المستخدم أو عرضه محتوى متعدد اللغات، فقد تكون هذه البيانات بإحدى اللغات المكتوبة من اليمين لليسار، مثل العربية أو العبرية أو الفارسية أو الأردية. ومن المحتمل أن يؤدي عرض نص من اليمين إلى اليسار في بيئة من اليسار إلى اليمين، أو العكس، إلى تشويه النص في حالة عدم إجراء ذلك على نحو صحيح. ولذلك فإن معظم واجهات المستخدم، سواءً من اليسار إلى اليمين أو من اليمين إلى اليسار، تحتاج إلى تمكينها من معالجة النص ثنائي الاتجاه.
يمكن أن تكون معالجة النص ثنائي الاتجاه أمرًا معقدًا حيث تتطلب معالجة خاصة عند كل ظهور لبيانات يحتمل أن تكون ثنائية الاتجاه في واجهة المستخدم. ونتيجة لذلك، فإن دعم النص ثنائي الاتجاه غالبًا ما يتراجع عندما يضيف مطور البرامج ميزة جديدة؛ ويخفق في تضمين دعم النص ثنائي الاتجاه في الشفرة المحدّثة.
من خلال استدعاء أداة BidiChecker من مجموعة الاختبار التلقائي، يمكنك رصد الحالات غير الناجحة, قبل نشرها على الويب. وتتميز تلك الأداة بواجهة برمجة تطبيقات جافا سكريبت خالصة يمكن دمجها بسهولة في مجموعة اختبار تستند إلى إطارات عمل اختبار جافا سكريبت الشائعة مثل JSUnit. إليك نموذج اختبار للسيناريو السابق:
// Check for BiDi errors with Arabic data in an English UI. function
testArabicDataEnglishUi() {
// User reviews data to display; includes Arabic data.
var reviewsData = [
{'title': 'The Princess Bride', 'reviews': '23'},
{'title': '20,000 Leagues Under the Sea', 'reviews': '17'},
{'title': 'ستار تريك', 'reviews': '57'} // “Star Trek”
];
// Render the reviews in an English UI.
var app = new ReviewsApp(reviewsData, testDiv);
app.setLanguage('English');
app.render();
// Run BidiChecker.
var errors = bidichecker.checkPage(/* shouldBeRtl= */ false, testDiv);
// This assertion will fail due to BiDi errors!
assertArrayEquals([], errors);
}
لقد أصدرنا أداة BidiChecker كمشروع مفتوح المصدر في Google Code، وذلك حتى يتمكن مطورو برامج الويب في كل مكان من الاستفادة منها. ونتمنى أن تسهم تلك الأداة في جعل الويب مكانًا أكثر ألفة بالنسبة إلى مستخدمي اللغات المكتوبة من اليمين إلى اليسار ومطوري البرامج الذين يدعمونها.
Test your app from right to left
Can you spot the error in the following webpage?
Unless you are one of the 56 million Internet users who read Arabic, the answer is probably no. But BidiChecker, a tool for checking webpages for errors in handling of bidirectional text, finds the mistake:
Oops! The Arabic movie title causes the line to be laid out in the wrong order, with half of the phrase "57 reviews" on one side of it and half on the other.
As this example demonstrates, text transposition errors occur even if your web application is entirely in a left-to-right language. If the application accepts user input or displays multilingual content, this data may be in one of the right-to-left languages, such as Arabic, Hebrew, Farsi or Urdu. Displaying right-to-left text in a left-to-right environment, or vice versa, is likely to cause text garbling if not done correctly. So most user interfaces, whether left-to-right or right-to-left, need to be able to deal with bidirectional (BiDi) text.
Handling BiDi text is tricky and requires special processing at every appearance of potentially BiDi data in the UI. As a result, BiDi text support often regresses when a developer adds a new feature–and fails to include BiDi support in the updated code.
Called from your automated test suite, BidiChecker can catch regressions before they go live. It features a pure JavaScript API which can easily be integrated into a test suite based on common JavaScript test frameworks such as JSUnit. Here's a sample test for the above scenario:
// Check for BiDi errors with Arabic data in an English UI.
function testArabicDataEnglishUi() {
// User reviews data to display; includes Arabic data.
var reviewsData = [
{'title': 'The Princess Bride', 'reviews': '23'},
{'title': '20,000 Leagues Under the Sea', 'reviews': '17'},
{'title': 'ستار تريك', 'reviews': '57'} // “Star Trek”
];
// Render the reviews in an English UI.
var app = new ReviewsApp(reviewsData, testDiv);
app.setLanguage('English');
app.render();
// Run BidiChecker.
var errors = bidichecker.checkPage(/* shouldBeRtl= */ false, testDiv);
// This assertion will fail due to BiDi errors!
assertArrayEquals([], errors);
}
We’ve just released BidiChecker as an open source project on Google Code, so web developers everywhere can take advantage of it. We hope it makes the web a friendlier place for users of right-to-left languages and the developers who support them.