सीएसएस आणि jQuery सह अनुलंब लय राखण्यासाठी

सामग्री

• घालण्याचे प्रकार
• अनुलंब लय
• ताल आयोजित
• प्रतिमांसह व्यवहार
• JQuery सुधारत आहे
• निष्कर्ष

• ज्ञान आवश्यक आहे: सीएसएस, मूलभूत jQuery
• आवश्यक आहे: jQuery, CSS, HTML
• प्रकल्प वेळ: 30 मिनिटे
• स्त्रोत फायली डाउनलोड करा

गृहीत धरून आपण सामग्रीमधून डिझाइन केले आहे, आपल्या डिझाइनवर परिणाम करण्याचा पहिला निर्णय आहे संबंधित संबंधित जरी नाही एखादी टाइपफेस निवडणे जे आपण आपल्या साइटवर परिणाम करणारे काहीतरी केले आहे. प्रकार मुद्रण आणि वेब डिझाइनचा मूलभूत भाग आहे आणि तो गुंतागुंतीचा आहे; तेथे बरेच संचयित अटी, सराव, नियम आणि तंतोतंत उपयोग आहेत जे त्या चांगल्या वापरासाठी जातात. हा लेख प्रकारातील एक पैलू व्यवस्थापित करण्याच्या एका तंत्राशी संबंधित आहे, एक जे ऑनलाइन करणे कठीण आहे परंतु मुद्रित आहे: नियमितपणे अनुलंब लय राखणे, ज्यामुळे आम्हाला व्यावसायिक लेआउट प्राप्त करण्याची परवानगी मिळते.

घालण्याचे प्रकार

मुद्रणात, मोठ्या आकाराच्या मजकुरासह कोणत्याही वस्तूसाठी, डिझाइनचा पाया बेसलाइन-ग्रीड असण्याची शक्यता आहे. हे पृष्ठावर रचना आणण्यासाठी वापरले जाते आणि सामग्रीच्या अनुलंब प्रवाहाचे मार्गदर्शन करते. जवळजवळ प्रत्येक गोष्ट त्या बेसलाइन ग्रिडच्या संदर्भात ठेवली जाते. आपण अटी ओळखत नसल्यास काळजी करू नका, कोणीही बेसलाइन किंवा बेसलाइन ग्रिड्सशी परिचित नाही; तुम्हाला त्यांच्याबद्दल आधीच माहिती आहे. शाळेत परत विचार करा, जेव्हा तुम्ही निःसंशयपणे रांगेत असलेल्या कागदावर लिहिले - जेव्हा आपण लिहिता तेव्हा आपण आपल्या पत्रांचा तळ सुबकपणे कागदावरील प्रत्येक ओळीवर ठेवला होता. बेसलाइन आणि बेसलाइन ग्रीड क्रियेत. बेसलाइन ही एक काल्पनिक रेखा आहे ज्यावर अक्षरे तळाशी संरेखित करतात.जर आपण आता हा लेख पाहिला तर खरोखर एक ओळ नसली तरीही आपण एक बेसलाइन "दिसेल". आपला मेंदू आपल्यास तेथे ठेवतो, म्हणूनच आपण वाक्ये वाचू शकता. अस्तर कागदावर ओळी? ते बेसलाइन ग्रीड आहेत. सरळ म्हणून आपले वाक्य सरळ आहेत आणि नियमित अंतराने सेट करतात जेणेकरून आपल्या मजकूरास नियमित अनुलंब लय असेल.

अनुलंब लय

उभे मजकूर पृष्ठावर मजकूर कोठे आहे हे दर्शवितो. हा एक घटक आहे जो मजकूराचे अवरोध स्कॅन आणि वाचण्याच्या आमच्या क्षमतेवर प्रभाव पाडतो आणि यामुळे आपल्या भावनिक प्रतिक्रियांना सूचित करण्यात मदत होते. जेव्हा मजकूरामध्ये मजबूत अनुलंब लय असते आणि चांगले अंतर असते तेव्हा आम्हाला वाटते की ते व्यावसायिक, मानले, अधिकृत आणि वाचण्यास सोयीचे आहे. जेव्हा मजकूरामध्ये कमी लय आणि अंतर असते तेव्हा आम्हाला वाटते की ते कमी मानले जाते, कमी व्यावसायिक आहे आणि बरेचदा वाचणे कठीण आहे. अनुलंब लय म्हणजे एक भाग वापरण्यायोग्य आणि एक भाग सौंदर्यशास्त्र.

ताल आयोजित

दुर्दैवाने वेब अद्याप प्रकाराशी संबंधित काही मूलभूत पद्धती लागू करण्याच्या क्षमतेच्या दृष्टीने छपाईचा चुलत भाऊ अथवा बहीण आहे. वेबवर ज्याप्रमाणे प्रिंट डिझायनर (किंवा शाळेत मूल) करतो तशाच प्रकारे आम्ही बेसलाइन ग्रिड वापरू शकत नाही - आम्ही मजकूराची बेसलाइन दस्तऐवजाच्या बेसलाइन ग्रिडमध्ये संरेखित करू शकत नाही. सीएसएसला बेसलाइन ग्रीडची संकल्पना नाही. तर, आपला मजकूर बेसलाइन ग्रिडच्या धर्तीवर अचूक बसणार नाही. त्याऐवजी रेषांमधील अंतर मध्ये ते उभ्या मध्यभागी असेल. हे वेब करू शकणारे सर्वोत्कृष्ट कार्य आहे.

चला एक उदाहरण दस्‍तऐवजासह व्यावहारिक होऊया. प्रथम, आम्ही दृश्यमान बेसलाइन ग्रिड बनवून विजय सेट करू. हे करण्यासाठी आम्ही पुनरावृत्ती होणारी पार्श्वभूमी प्रतिमा नियमित क्षैतिज रेखा 22px वेगळे काढण्यासाठी वापरू:

1. html {पार्श्वभूमी: #fff url (बेसलाइन_22.png); }

हुर्रे, आमच्याकडे आमच्या पंक्तीचा कागद आहे!

आपणास लक्षात येईल की काहीही ओझे अप करत नाही. सर्वकाही एकसारखे बनवण्यासाठी आम्हाला सर्व घटकांची तळ किनार त्या रेषांपैकी एकाला दाबायला हवी आहे. असे करण्याचा सर्वात सोपा मार्ग म्हणजे सर्व घटकांनी अनुलंब उंची (मार्जिनसह) उचलली आहे याची खात्री करुन घ्या. ही 22 ची गुणाकार आहे. असे काही सीएसएस येथे आहे. मी आरईएम युनिट वापरत आहे, परंतु आरईएमला समजत नसलेल्या ब्राउझरसाठी ईएम फॉलबॅक देत आहे. मी टिप्पण्यांमध्ये पीएक्स युनिट समकक्ष देखील समाविष्ट करीत आहे. जर आपल्याला अद्याप आरईएम / ईएम समजत नसेल तर आपण त्याऐवजी फक्त px मूल्य वापरू शकता - ते सर्व समतुल्य आहेत:

1. html {/ * फॉन्ट-आकार: 16px, ओळ-उंची: 22px * /
2. फॉन्ट: 100% / 1.375 "हेलवेटिका न्यू", हेलवेटिका, एरियल, सॅन्स-सेरिफ;
3. पार्श्वभूमी: #fff url (बेसलाइन_22.png); }
5. एच 1, एच 2, एच 3, एच 4, एच 5, एच 6 {/ * मार्जिन-टॉप आणि बॉटम 22px * /
6. / * Em फॉलबॅक * / समास: 1.375 मी 0;
7. समास: 1.375rem 0; }
8. एच 1 {/ * फॉन्ट-आकार 32px आहे, लाइन-उंची 44px * / आहे
9. / * Em फॉलबॅक * / फॉन्ट-आकार: 2 म;
10. फॉन्ट-आकार: 2 रेम; ओळ-उंची: 1.375; }
11. एच 2 {/ * फॉन्ट-आकार 26px आहे, लाइन-उंची 44px * / आहे
12. / * Em फॉलबॅक * / फॉन्ट-आकार: 1.75 मी;
13. फॉन्ट-आकार: 1.75 रेम; ओळ-उंची: 1.5714285714; }
14. एच 3, एच 4, एच 5, एच 6 {/ * फॉन्ट-आकार 22px आहे, लाइन-उंची 22px * / आहे
15. / * Em फॉलबॅक * / फॉन्ट-आकार: 1.375 मी;
16. फॉन्ट-आकार: 1.375 रेम; ओळ-उंची: 1; }
17. पी, उल, ब्लॉककोट {/ * तळाचा मार्जिन 22px आहे, html (22px) line * /
18. / * Em फॉलबॅक * / समास-टॉप: 0; समास-तळ: 1.375 मी;
19. मार्जिन-टॉप: 0; समास-तळ: 1.375rem; }

हे आपल्याला काय देते यावर एक नजर टाकूया. सर्व मजकूर छान प्रकारे संरेखित कसे झाले ते पहा. हे बेसलाइनवर बसत नाही, परंतु त्यात अंदाजे अनुलंब लय आहे. हे छान आणि नीटनेटके आहे.

प्रतिमांसह व्यवहार

प्रतिमा गोष्टी अधिक क्लिष्ट करतात. आम्ही काही समाविष्ट करतो तेव्हा आमच्या लयचे काय होते ते पहा. ते रेकॉर्डमध्ये वगळण्यासारखे व्यत्यय आणतात - टेम्पो बरोबर आहे परंतु वेळ बंद आहे. संरेखन शिफ्ट होते. हे असे आहे कारण प्रतिमा बेसची एकापेक्षा जास्त उंची असण्याची शक्यता नाही, म्हणून तळाशी धार आमच्या बेसलाइन ग्रिडशी जुळत नाही.

हे निश्चित करण्यासाठी आपल्याला प्रत्येक प्रतिमेस मार्जिन जोडणे आवश्यक आहे, मार्जिन लाइनचे तळ आमच्या ग्रिडसह बनवा. जे थोडेसे जावास्क्रिप्टसह स्वयंचलित करण्यासाठी पुरेसे सोपे आहे. आमची मूलभूत योजना येथे आहेः

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 बाकीचे = parseFloat (img_height% बेसलाइन);
9. / * आम्हाला किती जोडण्याची आवश्यकता आहे? * /
10. var ऑफसेट = parseFloat (बेसलाइन-उर्वरित);
11. / * प्रतिमेवर मार्जिन लागू करा * /
12. this_img.css ("मार्जिन-तळाशी", ऑफसेट + "पीएक्स");
13. });
14. });

का बरे विंडो.बिंद ओळ? कारण आम्ही त्यांचे आकार विश्वसनीयपणे प्राप्त करण्यापूर्वी प्रतिमा लोड होईपर्यंत प्रतीक्षा करावी लागणार आहे. या मूलभूत कोडसह चालत असलेले येथे एक उदाहरण आहे.

JQuery सुधारत आहे

जग क्वचितच सरळ-पुढे आहे आणि म्हणूनच हे येथे घडले आहे - आम्हाला अंमलबजावणीच्या काही तपशीलांसह सामोरे जावे लागेल. आमच्याकडे असलेल्या फंक्शनमध्ये काय चूक आहे? भरपूर प्रमाणात असणे:

• हे फ्लोटेड किंवा ब्लॉकऐवजी इनलाइन असलेल्या प्रतिमांसह ओंगळ परिणाम आणते.
• हे काही प्रतिमांवर, विशेषत: कंटेनरमध्ये असलेल्या असह्य दिसते.
• हे द्रव लेआउटसह व्यवहार करीत नाही.
• हे फारसे पुन्हा वापरण्यायोग्य नाही.

आम्ही उदाहरणात हसर्‍या चेहर्‍यासारख्या इनलाइन असलेल्या प्रतिमांवर हे वर्तन लागू करू इच्छित नाही. इनलाइन प्रतिमा संरेखित केल्या आहेत त्यामुळे तळाशी किनार मजकूराच्या समान बेसलाइनवर बसला आहे (नाही बेसलाइन ग्रिड). म्हणजे प्रतिमा अनुलंबपणे ऑफसेट आहे. मजकूर घटकाची बेसलाईन कोठे आहे हे शोधण्याचा कोणताही मार्ग सीएसएस किंवा जेएस आम्हाला देत नाही, म्हणून आम्हाला ऑफसेट माहित नाही. आम्ही इनलाइन प्रतिमांकडे दुर्लक्ष केले पाहिजे आणि सेट केलेल्या प्रतिमांवर फक्त आमचे निराकरण लागू केले पाहिजे प्रदर्शन: ब्लॉक (सुदैवाने, कोणतीही फ्लोटेड प्रतिमा स्वयंचलितपणे ब्लॉक प्रदर्शित करण्यासाठी सेट केली जाते).

प्रतिमा एखाद्या कंटेनरमध्ये असल्यास कंटेनरवर ओव्हरफ्लो सेटिंग्जमुळे प्रतिमेवर लागू केलेला मार्जिन लपविला जाऊ शकतो. तसेच, आम्हाला प्रतिमेवर, परंतु त्याऐवजी कंटेनर घटकावर मार्जिन नको असेल. उदाहरणार्थ, आपल्याकडे बॉक्समधील प्रतिमेऐवजी पांढ box्या बॉक्सवर मार्जिन असत, जेणेकरून आम्ही बॉक्समध्ये दिसणारी विचित्र अंतर मिळविणे टाळू शकतो.

फंक्शन फक्त एकदाच चालते, परंतु ब्राउझरचे आकार बदलले जातात तेव्हा द्रव डिझाइनवर प्रतिमा उंची बदलतात (हे पहाण्यासाठी अगदी अरुंद असलेल्या गोष्टीचे उदाहरण बदलून पहा). आकार बदलल्याने पुन्हा लय फुटते. ब्राउझरचा आकार बदलल्यानंतर तसेच पृष्ठ लोड नंतर कार्य करण्यासाठी आम्हाला कार्याची आवश्यकता आहे. लिक्विड लेआउट्स इतर समस्या देखील ओळखतात; प्रतिमा अपूर्णांक पिक्सल उच्च असू शकतात, उदाहरणार्थ 132.34px. यामुळे आम्ही आंशिक मार्जिन लागू केले तरीदेखील अनपेक्षित परिणाम होऊ शकतात (आपल्याला स्वारस्य असल्यास, हे येथे का आहे: trac.webkit.org/wiki/LayoutUnit). तर, आंशिक पिक्सेलमुळे लेआउट बग टाळण्यासाठी आम्हाला संपूर्ण पिक्सेल उंचीवर प्रतिमांची मसाज करण्याची आवश्यकता आहे.

शेवटी, आपण हे पुन्हा वापरण्यायोग्य फंक्शन बनवावे. प्रत्यक्षात, सैद्धांतिक समाधानापेक्षा व्यावहारिक समाधानाची जटिलता आवश्यक असल्यास, आम्ही एक प्लग-इन बनविला पाहिजे जो इतर प्रकल्पांमध्ये पुन्हा वापरला जाऊ शकतो.

शेवटच्या उदाहरणात आपल्याला कोड सापडेल जो या सर्वांना प्राप्त करतो. प्लग-इन जावास्क्रिप्टवर जोरदार टिप्पणी दिली आहे जेणेकरून आपण त्यासह अनुसरण करू शकता. आपण खाली कॉल करून प्लग-इन वापरू शकता:

1. $ (विंडो) .बंद (’भार’, कार्य () {
2. $ ("img"). बेसलाइनअलइन ();
3. });

किंवा, आपण प्लग-इनला एखाद्या प्रतिमेचे पालक म्हणून अस्तित्वात असल्यास, नावाच्या कंटेनरवर मार्जिन लागू करण्यास सांगू शकता:

1. $ (विंडो) .बंद (’भार’, कार्य () {
2. "(" img "). बेसलाइनअलाइन ({कंटेनर:’. पॉपअप ’});
3. });

निष्कर्ष

एक चांगला अनुलंब लय ठेवणे ही एक सूक्ष्म परंतु प्रभावी डिझाइन सराव आहे जो नियमितपणे छापण्यात येतो. आपल्याला आता मूलभूत तत्त्वे माहित आहेत, बेसलाइन आणि बेसलाइन ग्रिडचे कार्यरत ज्ञान आहे आणि सीएसएस मजकूर लेआउट विरूद्ध प्रिंटच्या काही मर्यादा माहित आहेत. या मर्यादांभोवती कसे कार्य करावे हे देखील आपल्याला माहित आहे, आपल्या पसंतीच्या कोणत्याही अनुलंब लयमध्ये आपले दस्तऐवज तयार करा आणि आपल्याकडे व्यत्यय आणणार्‍या प्रतिमा सामग्रीस सामोरे जाण्यासाठी एक साधन आहे.

सीएसएस परिपक्व होत असताना आम्हाला आमच्या प्रिंट चुलतभावांसह अधिक वैशिष्ट्ये इन-लाइन मिळणे सुरू आहे, म्हणून दर्जेदार वेबसाइट तयार करण्यासाठी प्रकारच्या प्रकाराची चांगली समज घेणे अधिक महत्त्वपूर्ण होईल. जर आपण सामान्यत: प्रकाराबद्दल अधिक जाणून घेऊ इच्छित असाल तर मी www.thinkingwithtype.com (आणि त्यासह जाण्यासाठी पुस्तक विकत घेण्याची) शिफारस करतो. आपण टाइप ट्रीटमेंटबद्दल सीएसएस लेखानंतर असाल तर वेबवर येथे आणि इतरत्र असंख्य लेख आहेत. मी मार्क बाउल्टन आणि इलियट जे स्टॉक्सकडून नवीनतम माहिती घेण्याची देखील शिफारस करतो, दोघेही खास करून वेब डिझाइनच्या संदर्भात वारंवार बोलतात.

मजा करा!