वेब डिजाइनले सधै ग्राफिक र मुद्रण डिजाइनको संसारबाट प्रिन्सिपल र परिभाषा उधारेको छ। यो विशेष गरी सत्य हो जब वेब टाइपोग्रागमा आउछ र जसमा हामीले हाम्रो वेब पृष्ठमा अक्षरफर्म पाउनेछौं। यी समानांतरहरू सधैं 1 देखि 1 अनुवादहरू छैनन्, तर तपाईले निश्चित रूपमा देख्न सक्नुहुन्छ कि कुनै अनुशासनले अन्य प्रभाव पारेको छ। जब तपाईं पारंपरिक टाइपोग्राफी शब्द "अग्रणी" र सीएसएस सम्पत्ति "लाइन-उचाइ" को रूपमा चिनिन्छ भन्ने सम्बन्धमा यो सम्बन्धमा विशेष रूपमा स्पष्ट हुन्छ।
नेतृत्वको उद्देश्य
जब मुद्रित पृष्ठका लागि टाइपोग्राफी सिर्जना गर्न मानिसहरूले मैन्युअल रूपमा हैंडसेट मेटल वा काठका अक्षरहरू प्रयोग गरे, ती रेखाहरू बीच स्पेसिङ सिर्जना गर्न पाठको क्षैतिज रेखाहरू बीचको पतले टुक्राहरू राखिएको थियो। यदि तपाईं ठूलो ठाउँ चाहानुहुन्छ भने, तपाईं नेतृत्वको ठूलो टुक्राहरू घुसाउनुहुन्छ। यो कसरी "अग्रणी" शब्द संकलित थियो। यदि तपाईंले टाइपोग्राफिक डिजाइन र प्रिन्सेल्स को बारे मा एक पुस्तक मा "अग्रणी" शब्द देख्यो भने, यो प्रभाव को केहि केहि पढ्न हुनेछ - "प्रकार को लगातार लाइनहरु को आधारभूत दूरी को बीच दूरी।"
वेब डिजाइनमा अग्रणी
डिजिटल डिजाईनमा, शब्दको नेतृत्व अझै पनि पाठको लाइनहरू बीच स्पेसिङ सन्दर्भ गर्न प्रयोग गरिन्छ। धेरै प्रोग्रामहरू यो सटीक शब्दको प्रयोग गर्छन्, यद्यपि वास्तविक नेतृत्व स्पष्ट रूपमा यी कार्यक्रमहरूमा प्रयोग भइरहेको छैन। यो पारंपरिक व्यक्तिहरूबाट डिजाइन विचार उधार विचारहरु को नयाँ रूपहरु को एक महान उदाहरण हो, भले ही यो सिद्धान्त को सटीक कार्यान्वयन भएको छ।
जब यो वेब डिजाइनमा आउँछ, त्यहाँ "अग्रणी" को लागि कुनै CSS सम्पत्ति छैन। यसको सट्टा, पाठको यो दृश्य प्रदर्शन संकलन गर्ने सीएसएस गुण लाइन-उचाइ भनिन्छ। यदि तपाइँ पाठलाई पाठको तेर्सो रेखाहरू बीचको बीचको ठाउँ चाहानुहुन्छ भने, तपाइँ यो गुण प्रयोग गर्नुहुनेछ। उदाहरणका लागि, तपाइँ आफ्नो साइटको
यो पृष्ठको पूर्वनिर्धारित फन्ट साइजमा आधारित (सामान्यतया 16px हो) को आधारमा सामान्य रेखा उचाई 1.5 पटक हुनेछ।
रेखा-ऊँचाई प्रयोग गर्दा
माथिको विस्तृत रूपमा, रेखा-उचाइ अनुच्छेद वा पाठका अन्य ब्लकहरूमा पाठ लाइनहरू स्पेस गर्न प्रयोग गर्न उपयुक्त छ। यदि रेखाहरू बीचको एकदम सानो ठाउँ छ भने पाठ गाँस्न सक्छ र दर्शकहरूलाई तपाइँको साइटमा पढ्न गाह्रो हुन सक्छ। त्यसोभए, यदि रेखामा रेखाहरू धेरै टाढाको अलग छन्, पढ्ने सामान्य प्रवाह बाधा हुनेछ र पाठकहरू कारणका लागि तपाईँको पाठसँग समस्या हुनेछ। यसैले तपाईं प्रयोग गर्न को लागी उपयुक्त मात्राको लम्बाई स्पेसिङ खोज्न चाहानुहुन्छ। तपाईं आफ्नो डिजाइन वास्तविक प्रयोगकर्ताहरु को साथ पृष्ठ को पढाने मा उनको प्रतिक्रिया प्राप्त गर्न को लागि परीक्षण पनि गर्न सक्छन्।
रेखा-उचाइ प्रयोग नगर्नुहोस्
प्याडिंग वा मार्जिनसँग रेखा-उचाइ भ्रमित नगर्नुहोस् जुन हेइन्टस्पेस तपाइँको पेजको डिजाइनमा समावेश गर्न प्रयोग गर्नेछ, शीर्षक सहित वा अनुच्छेद तल। त्यो स्पेसिंग अग्रणी छैन, र त्यसैले यो लाइन-ऊँचाई द्वारा संभाला छैन।
यदि तपाइँ निश्चित पाठ तत्वहरूमा स्पेस थप्न चाहनुहुन्छ भने, तपाईं मार्जिन वा प्याडिङ प्रयोग गर्नुहुनेछ। हामीले अघिल्लो अघिल्लो CSS उदाहरणमा फर्केर जाँदैछौं, हामी यो थप्न सक्थ्यौं:
मुख्य p {line-height: 1.5; margin-bottom: 24px; }यसले हाम्रो पृष्ठको अनुच्छेदको (पाठ <मुख्य> तत्व भित्र भित्र) को रेखाहरूको बीचमा 1.5 रेखाको उचाइसम्म रहेको छ। ती पैराग्राफहरू पनि प्रत्येकमा तलको 24 पिक्सल व्हाइटस्पेस हुनेछ, जसले दृश्य ब्रेकहरूलाई अनुमति दिन्छ जसले पाठकहरू लाई सजिलैसँग एउटा अनुच्छेद पहिचान गर्न अनुमति दिन्छ र वेबसाइट पढ्न सजिलो बनाउँदछ। तपाईं प्याडिंग सम्पत्ति पनि मार्जिनको स्थानमा पनि प्रयोग गर्न सक्नुहुन्छ:
मुख्य p {line-height: 1.5; padding-bottom: 24px; }लगभग सबै अवस्थामा, यो अघिल्लो CSS को रूपमा प्रदर्शित हुनेछ।
भन्नुहोस् कि तपाइँ "सेवा-मेनु" को कक्षाको सूचीमा सूची सूची वस्तुहरू अन्तर्गत स्पेसिंग थप्न चाहानुहुन्छ, तपाईले त्यसो गर्नका लागि मार्जिन वा प्याडिङ प्रयोग गर्नुहुने छैन, रेखाको उचाई। त्यसैले यो उपयुक्त हुनेछ।
.सेवास्ताहरू मेनु {{padding-bottom: 30px; }तपाईले केवल लाइन-उचाइ यहाँ प्रयोग गर्नुहुने छ भने तपाईले सूची-वस्तुहरू भित्र पाठको स्पेसिङ सेट गर्न चाहानुहुन्छ, मान्नु भनेको पाठको लामो रनहरू जुन प्रत्येक बुलेट बिन्दुको लागि धेरै रेखाहरू चल्न सक्दछ।