تھیمز میں دائیں سے بائیں رخ کا ڈائنامک سپورٹ

[ابن سعید]

السلام علیکم!

یہاں میں جاوا اسکرپٹ کے ذریعہ ویب سائٹ تھیمز میں دائیں سے بائیں رخ پھیرنے کے امکانات کا جائزہ لینا چاہتا ہوں اور احباب کی رائے کے بعد اگر فیزیبل ہوا اور وقت نے اجازت دیا تو ان خطوط پر کام کرنے کا ارادہ بھی رکھتا ہوں۔

مجھے یقین ہے کہ اس رخ پر سوچنے والا میں پہلا یا اکیلا شخص نہیں ہوں۔ مزید لوگوں نے بھی ایسی کوششیں ضرور کی ہوں گی پر باوجود تلاش کے ایسے مواد پانے میں ناکام رہا۔


موٹیویشن:

اکثر احباب کو اپنے اردو بلاگ کے تھیم کے حوالے سے خصوصاً اس کی دائیں سے بائیں رخ پھیرنے والے مسئلے کو لیکر حیران پریشان پایا ہے۔ اور اعداد و شمار کے جائزہ لینے کے بعد اس نتیجے پر پہونچا ہوں کہ ایسے صارفین کی تعداد بہت ہی قلیل ہے جو جاوا اسکرپٹ غیر فعال کر کے براؤزر استعمال کرتے ہیں۔ لہٰذا ایک ایسے جاوا اسکرپٹ پلگ ان کا استعمال قطعی مناسب ہوگا جو ڈائنامیکلی کسی بھی ویب سائٹ تھیم کا رخ پھیر سکے۔


موجودہ ٹرینڈ:

آر ٹی ایل سپورٹ دینے کا موجودہ ٹرینڈ خاصہ تکلیف دہ اور وقت طلب ہے اور ایچ ٹی ایم ایل و سی ایس ایس میں کافی مہارت کا متقاضی ہے۔ جسے تبدیلیاں کر کر کے نتائج دیکھ کر کیا جاتا ہے۔ بھلا ہو فائر بگ کا جو اس کام میں بہت معاون ثابت ہوتا ہے۔ اس کے علاوہ کچھ اسکرپٹس بھی دستیاب ہیں جو بعض کامپلیکس ایگوریتھمز کا استعمال کرکے دی گئی ایچ ٹی ایم ایل اور سی ایس ایس فائلوں میں خاطر خواہ ان لائن تبدیلیاں کر دیتے ہیں۔ پر یہ طریقہ صد فیصد کامیاب نہیں ہے۔ اور درستگی کے لئے مزید سر مارنے کی ضرورت پڑتی ہے۔ اس قسم کے ایلگورتھم میں سب سے بڑی مصیبت سی ایس ایس پراپرٹیز لکھنے کی بے شمار طریقے ہونا ہے۔ تھیم میں شامل امیجیز مزید مسائل پیدا کرتی ہیں۔ حال ہی میں میں نے سی ایس ایس اوور رائڈنگ کے طریقے کی بابت بھی ذکر کیا تھا جس میں موجودہ سی ایس ایس فائل کے نیچے ایک اور سی ایس ایس فائل شامل کیا جاتا ہے اور جن پراپرٹیز کی قدریں بدلنی ہو تی ہیں انھیں اس میں شامل کیا جاتا ہے اس طرح براؤزر انٹرپریٹ کرتے ہوئے بعد میں آنے والے قاعدے کو حتمی مانتا ہے اور پچھلے کو منسوخ گردانتا ہے۔ پر یہ طریقہ بھی خاصہ وقت طلب ہوتا ہے اور بعض حالات میں مشکل بھی۔ اور میں ذاتی طور پر اس طریقے کو ان لائن تدوین سے بہتر گردانتا ہوں۔


جاوا اسکرپٹ اپروچ:

اس تدبیر میں ایک عدد جاوا اسکرپٹ فائل rtl.js ڈاکیومینٹ ہیڈ میں شامل کر کے اس میں موجود سمت تبدیل کرنے والا فنکشن DOM لوڈ ہونے کے بعد ایکزیکیوٹ کرایا جا سکتا ہے جو تمام ایچ ٹی ایم ایل ایلیمینٹس کی مخصوص پراپرٹیز میں تبدیلیا کر دے۔ اگر دیکھا جائے تو ایس تبدیلیاں صرف چند ایک پراپرٹیز میں‌کرنے کی ضرورت ہوتی ہے۔ مثلاً

text-align, align, direction, float, border, padding, margin

ان پراپرٹیز میں بھی top اور bottom قدروں کو بدلنے کی ضرورت نہیں صرف right اور left قدروں کو ایک دوسرے سے تبدیل کرنے کی ضرورت ہوتی ہے۔ جنھیں DOM لوڈ ہونے کے بعد جاوا اسکرپٹ کے ذریعہ پڑھ کر تبدیل کیا جا سکتا ہے۔ واضح رہے کے اس طرح کی ویلو سویپنگ کے لئے ایک عارضی ویریبل کی بھی ضرورت ہوگی۔


جاوا اسکرپٹ اپروچ کے فوائد:

- ایک ہی فائل ہر تھیم کے لئے یکساں کار گر ہوگی۔
- ورڈ پریس میں بطور پلگ ان شامل کیا جا سکے گا۔
- اس طرح کی اسکرپٹ بطور بک مارکلیٹ ابھی استعمال کی جا سکے گی۔
- کچھ سیٹنگ ویریبلز کے ذریعہ بعض تبدلیوں کو کسٹمائز بھی کیا جا سکے گا مثلاً بعض لوگوں کو سائڈ بار کا الائنمینٹ بدلنا پسند نہیں ہوتا۔
- سمت تبدیل کرنے کے ساتھ ساتھ فانٹ وغیرہ اوور رائڈ کرنے کے بھی امکانات ہو سکتے ہیں، بدرجہ احسن کسی کنفیگیوریشن ویریبل کی مدد سے۔


جاوا اسکرپٹ اپروج کے مسائل:

- سبھی جاوا اسکرپٹ فعال نہیں رکھتے۔
> لیکن ایسوں کی تعداد نہ کے برابر ہے اس لئے یہ مسئلہ زیادہ پریشان کن نہیں۔

- امیج رچ تھیمز۔
> ابتداء میں امیجیز سے پاک تھیمز پر تجربے کیئے جا سکتے ہیں بعد میں آر ٹی ایل اسپیسفک امیجز کا رخ پھیر کر ان کی فائلیں محفوظ‌ کرکے انھیں بھی شامل کیا جا سکتا ہے۔

- انہیرٹینس کے باعث تبدیلی در تبدیلی۔ یعنی بعض ایلیمینٹس کی کچھ پراپرٹیز پیرینٹ ایلیمینٹ سے انہیرٹیڈ ہو تی ہیں اور پیرینٹ میں تبدیلی کرنے کے بعد چائلڈ ایلیمینٹ میں بھی وہ تبدیلی رو نما ہو چکی ہوتی ہے اور چائلڈ ایلیمینٹ میں دوبارہ تبدیلی اسے اس کی پہلی حالت میں لے آئے گی۔
> اس مسئلے کے دو حل نظر میں آ رہے ہیں۔ پہلا یہ کہ پورے ڈاکیومینٹ کے تمام ایلیمینٹس کی مخصوص پراپرٹیز کو ایک عارضی آبجیکٹ میں بطور ریپلیکا محفوظ کر لیا جائے۔ اور بعد اسے ریفرینس مان کر ڈاکیومینٹ میں تبدیلیاں کی جائیں۔ اس طرح ہم ہر بار ہر ایلیمینٹ کی اصلی ابتدئی قدر سے موازنہ کر سکیں‌گے۔ دوسرا بہتر حل یہ ہے کہ DOM ٹری کو باٹم اپ ایپروچ سے ایکسس کر کے تبدیل کیا جائے۔ اور اس کا سب سے بہتر طریقہ ریکرسیو recursive ٹریورسل ہوگا۔ اس طرح پہلے چائلڈ ایلیمینٹس کی پراپرٹیز تبدیل کی جائیں‌گی اور بعد میں‌پیرینٹ کی۔ اور یوں انہیریٹینس کے باعث آنے والے ممکنہ مسئلے سے بچا جا سکے گا۔

- ملٹیپل سیلیکٹرز کے باعث اوور رائڈنگ کا مسئلہ۔ یعنی ایک ہی ایلیمینٹ کئی سی ایس ایس سیلیکٹرس کا ٹارگیٹ ہو سکتا ہے۔ مثلاً tag, class یا id میں‌سے ایک سے زائد کے لئے سی ایس ایس رولز موجود ہوں جو کی کسی ایک ہی ایلیمنٹ آبجیکٹ پر اثر انداز ہو رہے ہوں۔ اور ان میں سے کنھیں دو میں یکساں تبدیلی اوور رائڈ ہو کر تبدیلی کا اثر زائل کر بیٹھے۔
> اس مسئلے کا واضح حل میرے دماغ میں فی الحال موجود نہیں۔ ہاں سی ایس ایس رولز کی پرایورٹی قانون کو سامنے رکھ کر شاید اس مسئلئ کا حل نکالا جا سکتا ہے۔ اس طرح کے زیادہ اسپیسفک رول کو بعد میں تبدیل کیا جائے۔ خیر تجربہ کرنے سے قبل کچھ کہنا مشکل ہوگا۔ ویسے مجھے لگتا ہے کہ اس میں‌بعض جاوا اسکرپٹ اور DOM پیچیدگیا مشکل پیدا کریں گی۔ مثلاً یہ جاننا کہ کوئی پراپرٹی ان لائن ڈیفائن ہے یا خارجی سی ایس ایس سے۔ واضح رہے کہ ہم ایچ ٹی ایم ایل ڈاکیومینٹ یا سی ایس ایس فائل کے کنٹینٹ پڑھ کر تبدیلایں نہیں‌کر رہے بلکہ لوڈیڈ ڈوم کو پڑھ کر تبدیلیاں کر رہے ہیں اس لئے شاید یہ مسئلہ سرے سے آئے ہی نہ بلکہ ڈوم میں وہ اوور رائڈنگ اور پرایورٹی سے متعلق ساری انالسس پہلے سے ہو چکی ہوتی ہے۔

- رن ٹائم میں آنے والی تبدیلیاں جو کسی دوسرے جاوا اسکرپٹ کے باعث رو نما ہوں۔
> قیاس ہے کہ ایسی تبدیلیاں کم ہی تھیمز میں ہوتی ہیں۔ اور اگر ہوئیں بھی تو ان میں دائیں بائیں سے متعلق تبدیلیاں مزید کم ہونگی جنھیں ابتدائی مرحلے میں اگنور کیا جا سکتا ہے۔ بعد میں مخصوص ایوینٹ ہینڈلرز کے ذریعہ شاید ایسی تبدیلیوں کو بھی کنٹرول کیا جا سکے۔


اتدائی ایلگورتھم

TRAVERSE(document.body)

function TRAVERSE(obj) begin
    if (obj.children?) do
        for_each child do
            TRAVERSE(child)
        end
    end
    CHANGE(obj)
end

function CHANGE(obj) begin
    target_properties = [text-align, align, direction, float, border, padding, margin ...]
    if (obj.visible_element?)
        for_each target_properties as TP do
            SWAP(obj.TP-left, obj.TP-right)
        end
    end
end

function SWAP(a, b) begin
    temp = a
    a = b
    b = temp
    return a, b
end

حرف آخر

امید ہے کہ احباب ان خطوط پر غور کریں‌گے اور ممکن ہوا تو تجربے بھی کریں گے۔ نیز اپنی قیمتی رائے سے آگاہ کریں گے۔ اس پورے پراسیس میں جہاں کہیں بھی خامیاں اور بہتری کے امکان ہوں اس پر تجزیہ ضرور کیجئے۔

والسلام

--
ابن سعید

 

[اظفر]

جاوا

السلام علیکم
برادر یہاں ایک چیز کا آپ نے ذکر نہیں کیا۔۔ جاوا سکرپٹ‌تو اکثر آفس اور کالجز ، یونی ورسٹیز میں‌ بلاک ہوتے ہیں ۔ اس کا کیا حل کریں گے ؟

 

[ابن سعید]

اظفر بھائی یہ بات آپ سے کس نے کہہ دی؟ مجھے واقعی کوئی ایسا طریقہ نہیں معلوم جس کے ذریعہ جاوا اسکرپٹ کو فعال کرنے سے صارف کو روکا جا سکے۔ برادر یہ سیٹنگ تو براؤزر میں ہوتی ہے۔ اور اگر ایسا ہوا تو آفس کالج اور یونیورسٹیز تو بہت ساری چیزوں کا فائدہ نہیں اٹحا سکیں گے مثلاً انھیں جی میل، یاہو میل اور دوسری بڑی سائٹوں کا سادہ ورژن استعمال کرنا ہوگا اگر دستیاب ہوا۔ اور یہ اردو ایڈیٹر بھی نہیں جس میں یہ سب کچھ لکھ رہا ہوں۔ اور اگر وہاں براؤزر کی ڈیفالٹ کنفیگوریشن ایسی ہو بھی تو ایسے کتنے صارف ہونگے جنھیں آفس میں بلاگ وغیرہ پڑھنے کی اجازت ہوگی؟ یعنی وہ ویسے بھی مسئہ نہیں ہیں۔

 

[اظفر]

نہیں برادر یہاں اکثر ایسا ہی ہے۔ جی میل ، ہاٹ‌میل اور فیس بک وغیرہ کے بہت سے آپشن کام نہیں کرتے۔ ممکن ہے انہوں نے ونڈوز کے ایڈمن اکاونٹ میں سے کوئی بلاک لگایا ہو کیوں کہ ہم تو تو محدود اکاونٹ ملتا ہے۔
rtl.js کو انشیلیایر کس طرح کرانا ہے؟ کیا الگ فایل کو کال کرنا ہے یا سارا سکرپٹ ہیڈر میں ہی ہو گا؟

 

[ابن سعید]

برادرم اظفر اس سے کوئی فرق نہیں پڑتا کہ آپ اسکرپٹ کو ہیڈر میں ان لائن شامل کر دیتے ہیں ہا کوئی جاوا اسکرپٹ فائل انکلیوڈ کرتے ہیں۔ ویسے rtl.js کہنے کا مطلب ہی یہی ہوتا ہے کہ وہ ایکسٹرنل فائل ہوگی۔

 

[اظفر]

مجھے ایک مسئلہ یاد آگیا۔ پی ایچ پی بی بی 3 کے پروسلور بیسڈ 80 فیصد تھیمز میں ایک ہی مسئلہ کامن ہے لیکن
یہ مسئلہ پر prosilver بیسڈ تھیم میں نہیں‌ہے
اور یہ مسئلہ تب آتا ہے جب فنکشن فایل میں ڈاریکشن rtl ڈیفاین کر دیں ۔ اس مسئلہ میں کچھ ویریابل مثلا موضوعات ، مراسلات پیج کے اتنا زیادہ بائیں جانب چلے جاتے ہیں کہ افقی سکرول بار آجاتا ہے۔ میں نے فائر بک کی مدد سے مسئلہ جاننے کی کوشش کی تھی لیکن ناکام رہا۔ کافی دیر کے بعد مجھے علم ہے وہی تھیم انگلش پی ایچ پی بی بی میں بالکل ٹھیک چلتا ہے لیکن جیسے ہی rtl ڈیفائن کر دیں وہ مسئلہ حاضر ہو جاتا ہے، اس کی وجہ سے بہت اچھے اچھے تھیمز اردو پی ایچ پی بی بی میں آنے محروم ہیں
میں نیا فورم انسٹال کر کے نیا ڈیٹا سے تجربہ کر چکا ہوں
میں نے یہ تجربہ دو مختلف ہوسٹس پر کیا
یہ ہمیشہ ویسے ہی رہا۔ اگر وقت ملے تو بتایئے گا میں اپنے ڈیمو فورم میں کوئی ایسا تھیم لاگو کر کے لنک بھیجوں گا۔

 

[ابن سعید]

اصلی وجہ تو تھیم دیکھ کر ہی بتائی جا سکتی ہے۔ پر آپ تجربہ کرنا چاہیں تو body ٹیگ کے ٹھیک بعد ایک div ٹیگ شامل کر دیں اور نیچے جہاں باڈی ٹیگ بند ہو رہا ہو اس سے ٹھیک پہلے اسے بند کر دیں۔ اور بجائے باڈی ٹیگ میں ڈائریکشن ڈیفائن کرنے کے اس ڈیو ٹیگ میں‌ڈیفائین کریں۔ شاید کچھ افاقہ ہو۔

 

[اظفر]

یہ کس فایل کی بات کر رہے ہیں ۔ اس میں تو 50 کے نزدیک ٹیمپلیٹ فایلز ہوتی ہیں ۔ اس کے علاوہ جب میں فائر بگ سے اس کا سورس دیکھتا تھا تو div تو جگہ جگہ پر لگی ہوئی تھی ۔ میں ابھی کوئی تھیم دیکھ کر ڈیمو سایٹ میں لگا کر آپ کو لنک بھیجتا ہوں

 

[باسم]

احمد تویجری کا سی ایس ایس کو دائیں سے بائیں تبدیل کرنے کا اسکرپٹ دیکھیے گا
اگر اس کا انٹرفیس بنا کر کہیں آن لائن کردیا جائے تو اردو والوں کو بہت آسانی ہوجائے گی
احمد ہاشمی کا سی ایس ایس مرر آزمودہ ہے
ایک اور ایسا ہی اسکرپٹ یہاں آن لائن ہے