سٹائل شیٹ

Monday,21 April 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;

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

تبصرہ جات

“سٹائل شیٹ” پر 17 تبصرے کئے گئے ہیں
  1. nice content to copy
    😛

  2. میاں جم جم کاپی، پیسٹ کرو . اس سب کا مقصد بھی یہی ہے کہ لوگ زیادہ سے زیادہ دیکھیں .

  3. اچھا ٹیوٹوریل ہے.

  4. برائے مہربانی اپنی بلاگ رول میں میرے بلاگ کا نیا ایڈریس http://urdublog.tuzk.net اپ ڈیٹ کر دیجیے .
    اور میں نے اپنے نام کے ساتھ سے رانا ہٹا دیا ہے . برائے مہربانی میرا نام صرف “قدیر احمد” لکھیے .

    شکریہ

  5. اچھا رانا صاحب . 😛

  6. راہبر says:

    بہت اچھے جارہے ہیں بھائی صاحب…! ہم جیسے نو آموزوں کی معلومات میں کافی اضافہ کا سبب ہے یہ ٹیوٹرل. جزاک اللہ.

  7. اسلام علیکم،
    جہانزیب بھائی یہ سب تبدیلیاں کہاں کرنی ہیں‌ میں ویب ڈیزائنگ نہیں جانتا۔اس حساب سے بتائے گا شکریہ

  8. زاہد جب آپ کوئی سانچہ ڈاون لوڈ کرتے ہو تو اُس سانچہ کے فولڈر میں ایک فائل ہو گی، سی ایس ایس ایکسٹنشن کے نام سے، وہاں یہ سب تبدیلیاں کرنا ہیں .

  9. شکاری says:

    dir: rtl; direction: rtl;

    اسلام علیکم،
    اس کو سٹائل شیٹ میں کس کمانڈ کے آگے لکھنا ہے مجھے سٹائل شیٹ میں اس سے ملتی جلتی کوئی کمانڈ نہیں مل رہی.

  10. body{
    direction: rtl;
    }

  11. ڈفر says:

    او مین
    ونڈرفل
    اتنی محنت؟

  12. کیا میرے بلاگ کو بھی اپنے بلاگ رول میں شامل کر سکتے ہیں. میں اردو اور انگریزی دونوں میں پوسٹ کرتا ہوں
    شکریہ آرٹیکل کے لیے- میں پڑھ کے اس سے مستفید ہوں گا-ویسے میں ویب ڈویلپر ہوں اور یہ آسانی سے سیکھ لوں گا

  13. لو جی آپ نے کاپی کرنے کی اجازت دے ڈالی لیکن میں جہاں بھی جاکر اس کو پیسٹ‌کروں گا . وہاں آپ کا ربط ضرور ڈالوں گا اس قدر محنت سلام پیش کرتا ہوں آپ کو بھائی ….

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

    • و علیکم السلام عمیر
      فی الحال آپ اردو محفل پر ہی سوالات کریں، جو جو مسائل آپ کو درپیش ہیں ان کی فہرست بنا کر انہیں محفل پر پوسٹ کر دیں، وقت ملنے پر انشاللہ وہیں ان کا جواب ارسال کر دوں گا . فی الحال وقت کی تنگی کے باعث تفصیلا جواب لکھنے سے قاصر ہوں .

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

  16. dua says:

    اردو تھیم تو لگا لی مگر سب کچھ ترتیب سے کیسے کرتے ہیں یہ نہیں سمجھ آ رہا ہیڈنگ بڑی کرنا وغیرہ

تبصرہ کیجئے

اس بلاگ پر آپ کے تبصرہ کی حوصلہ افزائی کی جاتی ہے
اگر آپ اپنے تبصرہ کے ساتھ تصویر لگانا چاہتے ہیں، تو یہاں جا کر تصویر لگائیں ۔