ریزلوشن سے آزاد ویب ڈیزائن
- صاحب لڑی الف نظامی
- تاریخ ابتداء
جہانزیب
محفلین
فلکسیبل یا لیکوئڈ ، ایسے لے آؤٹ کو جو براؤزر کے حساب سے خود گھٹتا بڑھتا ہو کو کہتے ہیں ۔ ایسا لے آؤٹ بنانے کے لئے مقداروں کا استعمال فی صد میں کیا جاتا ہے ۔ جیسے اگر سائٹ کا درمیانی حصہ ساٹھ فی صد سائیڈ بار، بیس بیس فی صد ۔ لیکوڈ لے آؤٹ کا سب سے بڑا مسلہ اس میںتصاویر کا استعمال ہوتا ہے، جسے حل کرنے کے بھی کافی گر موجود ہیں ۔
شکریہ جہانزیب۔ اس کی مدد سے مجھے اپنے بلاگ کو فلیکسبل لے آوٹ میں تبدیل کرنے میں مدد ملی۔ پہلے ویب صفحے کی چوڑائی 800 px تھی جس کی وجہ سے زیادہ ریزلوشن پر سکرین کا کچھ حصہ خالی بچ جاتا تھا۔ اس کو 100 % کرنے سے مسلہ حل ہوگیا۔ بہت شکریہ۔
لیکویڈ لے آوٹ میں تصاویر کے ساتھ کیا مسلہ ہوتا ہے؟
ابن سعید
خادم
در اصل تصویر کا سائز بھی دو شریقے سے لکھا جا سکتا ہے۔
- فکسڈ یعنی پکسلس یا پوائنٹس میں۔
- پرسینٹ میں۔
پر ایچ ٹی ایم ایل ایلیمینٹ میں فیصد کا تعین پیرینٹ ایلیمینٹ کے ریفرینس میں ہوتا ہے جس میں روٹ ایلیمینٹ ونڈو اس کا چائلڈ باڈی اور پھر جیسا ایچ ٹی ایم ایل اسٹرکچر ہو۔ جبکہ امیجیز میں یہ فیصد امیج کی اصلی ڈئمینشن کو ریفرینس مان کر کیلکیولیٹ کی جاتی ہے اس لئے براؤزر کے ڈائمینشن کے حساب سے اس کو ایڈجسٹ کر پانا مشکل ہوتا ہے۔ اس کو جاوا اسکرپٹ کے ذریعہ حٌ کیا جا سکتا ہے۔ یعنی جب صفحہ لوڈ ہو جائے تو کسی بھی ایچ ٹی ایم ایل ایلیمینٹ کے ڈائمنشن جاوا اسکرپٹ سے حاصل کر کے اس کے تناسب میں کسی بھی امیج کی سائز کا تعین پکسلز میںکر لیا جائے۔
جبکہ امیج بیک گراؤنڈ پیٹرن کے طور پر مستعمل ہے تو اس کے کچھ ٹکڑے کرکے x-repeat اور y-repeat کے ذریعہ فلیکسیبل کیا جا سکتا ہے۔
ریزولیوشن سے آزاد ویب پیجز میں ریکویسٹ ہیڈر کے ذریعہ براؤزر کا سائز حاصل کرکے امیجیز بلکہ سارے ہی ایلیمینٹس کو اسی تناسب میں پی ایچ پی یا ایسی ہی کسی اسکرپٹ سے اسکیل کرکے صفحہ تیار کیا جاتا ہے۔ پر براؤزر کو ریسائز کرنے پر ایسے لے آؤٹس میں عمودی اور افقی اسکرول بار ڈالنے پڑ سکتے ہیں۔ ورنہ لے آؤٹ بگڑ سکتا ہے۔
فکسڈ لے آؤٹ میں چیزیں زیادہ کنٹرول میں ہوتی ہیں۔ پر اس میں صفحے کا بیشتر حصہ خالی چھوڑنا پڑتا ہے ہے۔ اور کنٹینٹ دیویژن کی چوڑائی 760 پکسلس کے آس پاس رکھنی پڑتی ہے۔ اور خابصورتی کے لئے کنٹینٹ ڈویژن کے لیفٹ اور رائٹ مارجن کو آٹو کرنا پڑتا ہے جس سے صفحہ درمیان میں آ جاتا ہے۔
فکسڈ لے آؤٹ کی مثال محفل کا انگلش فورم اور میرا حالیہ ہوم پیج ہو سکتا ہے۔ فلیکسیبل لے آؤٹ کی مثال محفل کا ڈیفالٹ اردو فورم اور شگفتہ جدول ساز کا لے آؤٹ ہو سکتا ہے۔
- فکسڈ یعنی پکسلس یا پوائنٹس میں۔
- پرسینٹ میں۔
پر ایچ ٹی ایم ایل ایلیمینٹ میں فیصد کا تعین پیرینٹ ایلیمینٹ کے ریفرینس میں ہوتا ہے جس میں روٹ ایلیمینٹ ونڈو اس کا چائلڈ باڈی اور پھر جیسا ایچ ٹی ایم ایل اسٹرکچر ہو۔ جبکہ امیجیز میں یہ فیصد امیج کی اصلی ڈئمینشن کو ریفرینس مان کر کیلکیولیٹ کی جاتی ہے اس لئے براؤزر کے ڈائمینشن کے حساب سے اس کو ایڈجسٹ کر پانا مشکل ہوتا ہے۔ اس کو جاوا اسکرپٹ کے ذریعہ حٌ کیا جا سکتا ہے۔ یعنی جب صفحہ لوڈ ہو جائے تو کسی بھی ایچ ٹی ایم ایل ایلیمینٹ کے ڈائمنشن جاوا اسکرپٹ سے حاصل کر کے اس کے تناسب میں کسی بھی امیج کی سائز کا تعین پکسلز میںکر لیا جائے۔
جبکہ امیج بیک گراؤنڈ پیٹرن کے طور پر مستعمل ہے تو اس کے کچھ ٹکڑے کرکے x-repeat اور y-repeat کے ذریعہ فلیکسیبل کیا جا سکتا ہے۔
ریزولیوشن سے آزاد ویب پیجز میں ریکویسٹ ہیڈر کے ذریعہ براؤزر کا سائز حاصل کرکے امیجیز بلکہ سارے ہی ایلیمینٹس کو اسی تناسب میں پی ایچ پی یا ایسی ہی کسی اسکرپٹ سے اسکیل کرکے صفحہ تیار کیا جاتا ہے۔ پر براؤزر کو ریسائز کرنے پر ایسے لے آؤٹس میں عمودی اور افقی اسکرول بار ڈالنے پڑ سکتے ہیں۔ ورنہ لے آؤٹ بگڑ سکتا ہے۔
فکسڈ لے آؤٹ میں چیزیں زیادہ کنٹرول میں ہوتی ہیں۔ پر اس میں صفحے کا بیشتر حصہ خالی چھوڑنا پڑتا ہے ہے۔ اور کنٹینٹ دیویژن کی چوڑائی 760 پکسلس کے آس پاس رکھنی پڑتی ہے۔ اور خابصورتی کے لئے کنٹینٹ ڈویژن کے لیفٹ اور رائٹ مارجن کو آٹو کرنا پڑتا ہے جس سے صفحہ درمیان میں آ جاتا ہے۔
فکسڈ لے آؤٹ کی مثال محفل کا انگلش فورم اور میرا حالیہ ہوم پیج ہو سکتا ہے۔ فلیکسیبل لے آؤٹ کی مثال محفل کا ڈیفالٹ اردو فورم اور شگفتہ جدول ساز کا لے آؤٹ ہو سکتا ہے۔
جہانزیب
محفلین
فرض کریں آپ کے کمپیوٹر پر ریزولوشن بارہ سو ضرب آٹھ سو کی ہے، اور آپ کی سائٹ کا مرکزی حصہ ساٹھ فی صد پر رکھا ہے، جو کہ آپ کی سکرین کے مطابق یہ چوڑائی سات سو بیس پکسلز بنتی ہے، اب آپ تحریر لکھتے ہیں، اس میںایک تصویر کا اضافہ کرتے ہیں ،اور اپنی سکرین کے حساب سے وہاں تصویر فٹ کرتے ہیں بعد میں کمپیوٹر سے تھوڑا دور ہو کر کھڑے ہو کر بلاگ پر تصویر دیکھ کر عش عش کرتے ہیں زیادہ ترنگ میں ہو تو انسان ہلکے ہلکے جھولے بھی لے لیتا ہے ۔ لیکن اسی دوران میں بھی آپ کی سائٹ پر آ جاتا ہوں، اور میرے کمپیوٹر پر ریزولوشن 800x600 کی ہے، جس کے حساب سے ساٹھ فی صد 480 پکسلز بنتا ہے، تو جو تصویر سات س بیس میں درست نظر آ رہی تھی، وہ مجھے تو آؤٹ آف دی ورلڈ لگے گی ۔
اسے فی صد کے حساب سے قابو کیا جا سکتا ہے، لیکن پھر دیکھیں کہ آپ کے پاس ایک تصویر جس کا اصل حجم 400x400 ہے کو اپنی ریزولوشن کے حساب سے بڑھا بھی لیں گے تو فرق نہیں پڑتا، لیکن ایک اور بندہ آپ کی سائٹ پر آتا ہے اور اس کے کمپیوٹر پر ریزولوشن 1600x1280 ہے، تو خود سوچیں، وہ تصویر بڑی ہو کر کتنی بھدی لگے گی ۔
اسی طرح وہ تصاویر جو کہ سانچہ میں استعمال ہوتی ہیں، ان کے ساتھ بھی ہوتا ہے ۔ بعض اوقات اگر آپ بہت ہی مزین قسم کا سانچہ استعمال کرنا چاہتے ہیں، تو اسے لیکویڈ بنانا اتنا مشکل ہوتا کہ بہتر ہے متعین چوڑائی کا سانچہ بنا لیا جائے، باقی سعود نے اوپر جاوا سکرپٹ کا بتایا ہے، جو کہ کافی استعمال ہوتا ہے ۔
ابن سعید
خادم
فانٹ سائز کی لکویڈٹی کے جواب میں عرض ہے:
سی ایس ایس میں فانٹ سائز لکھنے کے چار طریقے رائج ہیں۔
- فکسڈ یعنی پکسلز میں مثلاً 20px
- فیصد یعنی پیرینٹ ایلیمینٹ کے تناسب میں مثلاً 60%
- موسوم یعنی پہلے سے دیے گئے ناموں کے اعتبار سے مثلاً x-large
- ای ایم یونٹ میں یعنی براؤزر ڈیفالٹ فانٹ سائز کے تناسب میں مثلاً 0.9 em
آخری طریقہ آپ کی ضرورتوں کو کافی حد تک سمجھ سکے گا۔ جب کہ موسوم طریقے کو الگ الگ براؤزر الگ الگ انداز میں سمجھتے ہیں۔
سی ایس ایس میں فانٹ سائز لکھنے کے چار طریقے رائج ہیں۔
- فکسڈ یعنی پکسلز میں مثلاً 20px
- فیصد یعنی پیرینٹ ایلیمینٹ کے تناسب میں مثلاً 60%
- موسوم یعنی پہلے سے دیے گئے ناموں کے اعتبار سے مثلاً x-large
- ای ایم یونٹ میں یعنی براؤزر ڈیفالٹ فانٹ سائز کے تناسب میں مثلاً 0.9 em
آخری طریقہ آپ کی ضرورتوں کو کافی حد تک سمجھ سکے گا۔ جب کہ موسوم طریقے کو الگ الگ براؤزر الگ الگ انداز میں سمجھتے ہیں۔
جہانزیب
محفلین
سعود براؤزر کے حساب سے تو پھر بھی نہیں بڑھتا ۔ فرضکریں پیرنٹ سائز 14px رکھا جائے ، بعد میں اسے معیار مان کر عنوان کو 120 فی صد رکھنے سے وہ ہر ریزولوشن میں 14px کا ہی 120 فی صد حصہ دکھائے گا ۔
اسی طرح em میں بھی پیرنٹ فانٹ اگر رکھا ہو تو اسے بنیاد بنایا جاتا ہے ۔ ہاں اگر پیرنٹ فانٹ کا سائز متعین نہیں کریں، تو تب 16px کو معیار مانا جاتا ہے ۔
اسی طرح em میں بھی پیرنٹ فانٹ اگر رکھا ہو تو اسے بنیاد بنایا جاتا ہے ۔ ہاں اگر پیرنٹ فانٹ کا سائز متعین نہیں کریں، تو تب 16px کو معیار مانا جاتا ہے ۔
ابن سعید
خادم
جہانزیب بھائی آپ میری بات نہیں سمجھ سکے شاید۔
فیصد کا معاملہ یہ ہے کہ وہ پیرینٹ کے ریلیٹیو ہوتا ہے مثلاً ایلیمینٹ1 پیرینٹ ہو اور اس کا چائلڈ ایلیمینٹ2 ہو۔ اگر اگر ایلیمینٹ1 کی فانٹ سائز 20 پکسلز ہو اور ایلیمینٹ2 کی 50 فیصد تو ایلیمینٹ2 کے فانٹ کی سائز 10 پکسلز ہوگی۔
اسی طرح جب فانٹ سائز ای ایم میں دی جاتی ہے تو پیرنٹ چایلڈ ریلیشنشپ کا معاملہ نہیں رہتا سیدھے براؤزر ڈیفالٹ کے تناسب میں کیلکیولیٹ ہوتا ہے۔ یعنی اگر براؤزر ڈیفالٹ 16 پکسلز ہو تو اعشاریہ پانچ ای ایم سائز کا فانٹ 8 پکسلز میں دکھے گا جبکہ براؤزر ڈیفالٹ کو تبدیل کرکے 20 پکسلز کر دیا جائے تو وہی متن 10 پکسلز میں دکھے گا۔
یوں سچ پوچھئے تو اس کا ریزولیشن سے کوئی لینا دینا نہیں ہے۔ اور چاہیں تو اسے بھی جاوا اسکرپٹ سے ہینڈل کر سکتے ہیں۔ یا الٹرنیٹ اسٹائل شیٹ ایک اور آپشن ہے۔
فیصد کا معاملہ یہ ہے کہ وہ پیرینٹ کے ریلیٹیو ہوتا ہے مثلاً ایلیمینٹ1 پیرینٹ ہو اور اس کا چائلڈ ایلیمینٹ2 ہو۔ اگر اگر ایلیمینٹ1 کی فانٹ سائز 20 پکسلز ہو اور ایلیمینٹ2 کی 50 فیصد تو ایلیمینٹ2 کے فانٹ کی سائز 10 پکسلز ہوگی۔
اسی طرح جب فانٹ سائز ای ایم میں دی جاتی ہے تو پیرنٹ چایلڈ ریلیشنشپ کا معاملہ نہیں رہتا سیدھے براؤزر ڈیفالٹ کے تناسب میں کیلکیولیٹ ہوتا ہے۔ یعنی اگر براؤزر ڈیفالٹ 16 پکسلز ہو تو اعشاریہ پانچ ای ایم سائز کا فانٹ 8 پکسلز میں دکھے گا جبکہ براؤزر ڈیفالٹ کو تبدیل کرکے 20 پکسلز کر دیا جائے تو وہی متن 10 پکسلز میں دکھے گا۔
یوں سچ پوچھئے تو اس کا ریزولیشن سے کوئی لینا دینا نہیں ہے۔ اور چاہیں تو اسے بھی جاوا اسکرپٹ سے ہینڈل کر سکتے ہیں۔ یا الٹرنیٹ اسٹائل شیٹ ایک اور آپشن ہے۔
ابو کاشان
محفلین
کیا بین السطور فرق کو بھی اس سے حل کیا جا سکتا ہے۔
میں نے بلاگرز کو اردوانے کے دوران اس کا تجربہ کیا تھا لیکن وہ دوسری جگہ حل نہیں ہوا۔