CSS اور jQuery کے ساتھ عمودی تال برقرار رکھیں

مواد

• قسم بچھانا
• عمودی تال
• تال کا انعقاد
• تصاویر کے ساتھ نمٹنے
• jQuery کو بہتر بنانے کے
• نتیجہ اخذ کرنا

• علم کی ضرورت ہے: سی ایس ایس ، بنیادی jQuery
• ضروری ہے: jQuery ، سی ایس ایس ، ایچ ٹی ایم ایل
• پروجیکٹ کا وقت: 30 منٹ
• سورس فائلیں ڈاؤن لوڈ کریں

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

قسم بچھانا

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

عمودی تال

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

تال کا انعقاد

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

آئیے ایک مثال کی دستاویز کے ساتھ عملی بنائیں۔ اوlyل ، ہم ایک مرئی بیس لائن گرڈ بنا کر بیٹ کو ترتیب دیں گے۔ ایسا کرنے کے ل we ، ہم باقاعدگی سے افقی لائنوں کو 22px الگ کرنے کے لئے بار بار پس منظر کی تصویر استعمال کریں گے۔

1. html {پس منظر: # fff url (baseline_22.png)؛ }

ہورے ، ہمارے پاس ہمارا کاغذ ہے!

آپ نوٹ کریں گے کہ کچھ نہیں بڑھتا ہے۔ ہر چیز کو ایک ساتھ بنانے کے ل we ہم چاہتے ہیں کہ تمام عناصر کا نچلا حصہ ان لائنوں میں سے کسی ایک کو ٹکرائے۔ ایسا کرنے کا آسان ترین طریقہ یہ ہے کہ اس بات کو یقینی بنائیں کہ تمام عناصر عمودی اونچائی (جس میں مارجن بھی شامل ہیں) اٹھائیں جو کہ 22 سے متعدد ہے۔ یہاں کچھ سی ایس ایس ہے جو صرف ایسا ہی کرتا ہے۔ میں REM یونٹ استعمال کر رہا ہوں ، لیکن براؤزرز کے لئے EM فال بیک دے رہا ہوں جو REM کو نہیں سمجھتے ہیں۔ میں تبصروں میں PX یونٹ کے برابر بھی شامل ہوں۔ اگر آپ ابھی تک REM / EM کو نہیں سمجھتے ہیں تو پھر آپ اس کے بجائے صرف px اقدار کا استعمال کرسکتے ہیں - وہ سب برابر ہیں۔

1. html {/ * فونٹ سائز: 16px ، لائن اونچائی: 22px * /
2. فونٹ: 100٪ / 1.375 "ہیلویٹیکا نیو" ، ہیلویٹیکا ، ایریل ، سانس سیریف؛
3. پس منظر: # فف یو آر ایل (بیس لائن_22.png)؛ }
5. H1، H2، H3، H4، h5، h6 {/ * مارجن-ٹاپ اور نیچے دونوں 22px * / ہیں
6. / * ایم فال بیک * / مارجن: 1.375 ایم 0؛
7. مارجن: 1.375rem 0؛ }
8. h1 {/ * فونٹ کا سائز 32px ہے ، لائن اونچائی 44px * / ہے
9. / * ایم فال بیک * / فونٹ سائز: 2 ایم؛
10. فونٹ سائز: 2 مریم؛ لائن اونچائی: 1.375؛ }
11. h2 {/ * فونٹ کا سائز 26px ہے ، لائن اونچائی 44px * / ہے
12. / * ایم فال بیک * / فونٹ سائز: 1.75 ایم؛
13. فونٹ سائز: 1.75m؛ لائن اونچائی: 1.5714285714؛ }
14. h3، h4، h5، h6 {/ * فونٹ کا سائز 22px ہے ، لائن اونچائی 22px * / ہے
15. / * ایم فال بیک * / فونٹ سائز: 1.375 ایم؛
16. فونٹ سائز: 1.375rem؛ لائن اونچائی: 1؛ }
17. p ، ul ، blockquote {/ * نیچے کا حاشیہ 22px ہے ، html (22px) line * /
18. / * ایم فال بیک * / مارجن ٹاپ: 0؛ مارجن نیچے: 1.375 ایم؛
19. مارجن ٹاپ: 0؛ مارجن نیچے: 1.375rem؛ }

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

تصاویر کے ساتھ نمٹنے

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

اس سب کو ٹھیک کرنے کے لئے ہمیں ہر امیج میں مارجن ڈالنا ہے ، جس سے مارجن لائن کا نچلا حصہ ہمارے گرڈ سے ملتا ہے۔ جو تھوڑا سا جاوا اسکرپٹ کے ساتھ خودکار کرنے کے لئے کافی آسان ہے۔ ہمارا بنیادی منصوبہ یہ ہے:

1. ہر شبیہ کی اونچائی کا پتہ لگائیں۔
2. بیس لائن کی قیمت عمودی جگہ میں کتنی بار تقسیم کرتی ہے اس تصویر کو فی الحال اٹھاتی ہے ، اور باقی رقم حاصل کرتی ہے۔
3. ہمیں آفسیٹ دینے کے لئے بیس لائن سے بقیہ کو منقطع کریں جس کی ہمیں شبیہ پر درخواست دینے کی ضرورت ہے۔
4. آفسیٹ کو تصویر کے نچلے حصے میں مارجن کے طور پر لاگو کریں۔

تصویر کی عمودی جگہ کا نچلا حصہ اب بیس لائن گرڈ کے ساتھ درست طریقے سے سیدھ ہوجائے گا۔ jQuery میں یہ ایک بنیادی فنکشن ہے جو یہ کرتا ہے:

1. $ (ونڈو). پابند (’بوجھ‘ ، فنکشن () {
2. $ ("img"). ہر (فنکشن ())
3. / * متغیرات * /
4. var this_img = $ (یہ)؛
5. var بیس لائن = 22؛
6. var img_height = this_img.height ()؛
7. / * ریاضی کریں * /
8. var باقی؛ = پارس فلوٹ (img_height٪ بیس لائن)؛
9. / * ہمیں کتنا اضافہ کرنے کی ضرورت ہے؟ * /
10. var آفسیٹ = parseFloat (بیس لائن باقی)؛
11. / * حاشیہ کو تصویر پر لگائیں * /
12. this_img.css ("مارجن-نیچے"، آفسیٹ + "px")؛
13. });
14. });

کیوں ونڈو.بائنڈ لائن چونکہ ہمیں انکے سائز کو قابل اعتماد طریقے سے حاصل کرنے سے پہلے ان تصاویر کو لوڈ کرنے تک انتظار کرنا پڑتا ہے۔ اس بنیادی کوڈ کے چلانے کی ایک مثال یہ ہے۔

jQuery کو بہتر بنانے کے

دنیا شاذ و نادر ہی سیدھا آگے ہے ، اور اس لئے یہ یہاں نکلا ہے - ہمیں عمل درآمد کی کچھ تفصیلات سے نمٹنا ہے۔ ہمارے پاس موجود فنکشن میں کیا غلط ہے؟ بہت کچھ:

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

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

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

فنکشن صرف ایک بار چلتا ہے ، لیکن ایک مائع ڈیزائن پر جب براؤزر کا دوبارہ سائز ہوتا ہے تو تصاویر کی اونچائی تبدیل ہوجاتی ہے (اسے دیکھنے کے ل quite کسی تنگ چیز کی مثال کو تبدیل کرنے کی کوشش کریں)۔ نیا سائز دینے سے دوبارہ تال ٹوٹ جاتا ہے۔ ہمیں براؤزر کے سائز کو تبدیل کرنے کے ساتھ ساتھ پیج لوڈ کے بعد چلانے کیلئے فنکشن کی ضرورت ہے۔ مائعات کی ترتیب دیگر مسائل بھی متعارف کراتی ہے۔ تصاویر اعلی پکسلز زیادہ ہوسکتی ہیں ، مثال کے طور پر 132.34px۔ اس کے نتیجے میں غیر متوقع نتائج پیدا ہو سکتے ہیں ، یہاں تک کہ اگر ہم جزوی حاشیہ کا استعمال کرتے ہیں (اگر آپ دلچسپی رکھتے ہیں تو ، یہاں کیوں ہے: trac.webkit.org/wiki/LayoutUnit)۔ لہذا ، ہمیں جزوی پکسلز کی وجہ سے لے آؤٹ کیڑے سے بچنے کے ل the اس تصویر کو پورے پکسل اونچائی میں مساج کرنے کی ضرورت ہے۔

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

آخری مثال میں آپ کو کوڈ مل جائے گا جو اس سب کو حاصل کرتا ہے۔ پلگ ان جاوا اسکرپٹ پر بھاری تبصرہ کیا گیا ہے تاکہ آپ بھی اس کی پیروی کرسکیں۔ آپ پلگ ان کو کال کرکے یہ استعمال کرسکتے ہیں:

1. $ (ونڈو). پابند (’بوجھ‘ ، فنکشن () {
2. "(" img "). بیس لائنالائن ()؛
3. });

یا ، آپ پلگ ان کو نامی کنٹینر پر مارجن لگانے کے لئے کہہ سکتے ہیں ، اگر کوئی تصویر کے والدین کی حیثیت سے موجود ہے تو:

1. $ (ونڈو). پابند (’بوجھ‘ ، فنکشن () {
2. $ ("img"). baselineAlign ({کنٹینر: ’. پاپ اپ’})؛
3. });

نتیجہ اخذ کرنا

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

سی ایس ایس کے پختگی کے بعد ، ہم اپنے پرنٹ کزنز کے ساتھ مطابق مزید خصوصیات حاصل کرنا جاری رکھتے ہیں ، لہذا معیاری ویب سائٹ بنانے کے لئے قسم کی اچھی تفہیم زیادہ اہم ہوجائے گی۔ اگر آپ عام طور پر ٹائپ کے بارے میں مزید معلومات حاصل کرنا چاہتے ہیں تو میں www.thinkingwithtype.com (اور کتاب کو اس کے ساتھ جانے کے ل buying خریدنے) کی سفارش کرتا ہوں۔ اگر آپ ٹائپ ٹریٹمنٹ کے بارے میں سی ایس ایس مضامین کے بعد ہو تو یہاں اور ویب پر دونوں جگہ متعدد مضامین موجود ہیں۔ میں یہ بھی تجویز کرتا ہوں کہ مارک بولٹن اور ایلیوٹ جے اسٹاکس سے تازہ ترین معلومات حاصل کریں ، جو دونوں ہی خاص طور پر ویب ڈیزائن کے سلسلے میں اکثر بات کرتے ہیں۔

مزے کرو!