سٹائل شیٹ

April 21, 2008
از :  
زمرات: ایچ ٹی ایم ایل

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

سی ایس ایس فائل کی بناوٹ

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

selector{property: value;}

جہاں سلیکٹر عموماً وہ ٹیگ ہوتا ہے جو کہ انڈیکس فائل میں ایچ ٹی ایم ایل میں استعمال کیا جاتا ہے، پراپرٹی اُس ٹیگ کا وہ حصہ ہوتا ہے جس کو ہم تبدیل کرنا چاہتے ہیں اور ویلیوو اس بات کو ظاہر کرتی ہے کہ ہم کیا تبدیلی کرنا چاہتے ہیں ۔ اب ہم اوپر والی سطر میں درست ٹیگز، پراپرٹی اور ویلیوو کا استعمال یوں کریں گے ۔

body{color: black;}

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

#left{text-align: left;}

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

<p id=”left”>This is sample text</p>

یہ ایک ویب ڈیزائنر پر منحصر ہے کہ وہ آئی ڈی سیلکٹر کا استعمال کہاں کرتا ہے ۔ عموما میں آئی ڈی سلیکٹر کو صحفہ کی ساخت کے لئے استعمال کرتا ہوں، جیسے صحفہ کا ہیڈر یا اوپری حصہ، مرکزی متن یا کونٹینٹ والا حصہ ، صحفہ کی دائیں طرف یا سائیڈبار اور صحفہ کا نچلا حصہ یا فٹر ۔ ان کی ساخت کے لئے میں آئی ڈی سیلکٹر استعمال کرتا ہوں تاکہ دوبارہ دیکھتے وقت مجھے آسانی ہو ۔
اب ہیڈر کے اندر سائٹ کا عنوان اور مینو بار یا مرکزی متن میں پوسٹ کا عنوان، متن اور تاریخ وغیرہ کے لئے جس سلیکٹر کا استعمال میں کرتا ہوں اُسے “کلاس” کے نام سے ایچ ٹی ایم ایل میں بلایا جاتا ہے اور اسے مندرجہ ذیل طریقہ سے لکھا جاتا ہے ۔

.left{text-align: left;}

اور ایچ ٹی ایم ایل میں اسے مندرجہ ذیل طریقہ سے بلایا جائے گا ۔

<p class=”left”>This is sample text</p>

اس کے علاوہ کچھ لوگ آئی ڈی سلیکٹر کو یوں بھی لکھتے ہیں ۔

div#left{text-align: left;}

اس کو بھی ایچ ٹی ایم ایل میں پہلے والے طریقہ سے ہی بلایا جاتا ہے، صرف لکھنے کا فرق ہے ۔ اب امید ہے کہ آپ کو سی ایس ایس فائل کی کچھ سمجھ آ گئی ہو گی ۔اب ہم اپنے اصل موضوع کی طرف واپس آتے ہیں کہ سی ایس ایس میں کونسی تبدیلیاں کر کے ایک بنے بنائے سانچہ کو اردو کے قابل بنایا جا سکتا ہے ۔ ہم بنے ہوئے سانچہ کے سلیکٹرز پر توجہ نہیں دیں گے، بلکہ صرف پراپرٹی اور ویلیووز ہی کو تبدیل کریں گے ۔ اب آپ پہلے یاد کر لیں کہ سلیکٹر،پراپرٹی اور ویلیوو کِس چیز کو کہتے ہیں ۔

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

font-family: veranda,sans-serif;

یا

font: 13px #fff veranda,sans-serif;

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

font-family: urdu naskh asiatype,nafees web naskh,tahoma;

آپ اپنے سانچہ میں موجود خط دکھانے کے لئے مندرجہ بالا پراپرٹی کی ویلیوز کو اردو خطوط سے بدل دیں، پوری فائل میں ایک ہی دفعہ ایسا کرنے کے لئے آپ کھلی فائل میں کنٹرول اور ایف بٹن اکٹھا دبا کر تلاش کے خانہ میں فانٹ یا فانٹ فیملی، جو بھی پراپرٹی آپ کی فائل میں استعمال ہوئی ہے لکھ کر سب کو اردو خط سے بدل دیں ۔

عبارت کی سمت ۔

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

text-align: center;

اس کی بجائے باڈی سیلکٹر کے علاوہ جہاں جہاں اس پراپرٹی کا استعمال ہوا ہے وہاں اسے ذیل سے بدل دیں ۔

text-align: right;

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

اردو میں انگریزی الفاظ کی ملاوٹ ۔

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

dir: rtl; direction: rtl;

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

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

body{font-size: 100%;}

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

body{font-size: 62.5%;}

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

18/16=1.125em
12/16=0.75em

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

font-size: 16px;

سطروں کا درمیانی فاصلہ ۔

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

line-height: 1.5em;

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

انڈیکس فائل

April 21, 2008
از :  
زمرات: ایچ ٹی ایم ایل

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

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />

ضروری نہیں کہ جو سانچہ آپ اردو میں ڈھال رہے ہیں اُس میں بالا سطر ایسے ہی ہو، یہ بھی ہو سکتا ہے کہ یہ سطر پہلے ہی سے ہمارے
معیار کے مطابق درست ہو، لیکن اگر نہیں تو تب ہم بالا سطر میں درج ذیل تبدیلی کریں گے ۔

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

پوری فائل میں ہمیں صرف ایک یہی تبدیلی کرنا ہے، اگر صحفہ کی اینکوڈنگ پہلے سے ہی یونیکورڈ کے مطابق ہے، تب اسے جوں کا توں ہی رہنے دیں اور انڈیکس فائل کو مخفوط کر لیں ۔

ویب سائٹ سانچہ کو اُردوانہ۔

April 20, 2008
از :  
زمرات: ایچ ٹی ایم ایل

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

index.html
style.css

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

« اگلا صفحہ