इंटर कॅरेक्टर, लाइन स्पेसिंग CSS. शब्द अंतर

मजकूर शैलीसह कार्य करताना, आपण वर्ण, शब्द आणि ओळींमध्ये आवश्यक अंतर सेट करू शकता. असे अंतर कोणत्याही CSS युनिट्समध्ये सेट केले जातात, मग ते px, pt, em किंवा इतर असो. अपवाद म्हणजे टक्केवारी - त्यांचा वापर ओळींमधील अंतर (अग्रणी) सेट करण्यासाठी केला जाऊ शकतो, परंतु वर्ण किंवा शब्दांमधील अंतर सेट करताना ते कार्य करत नाहीत.

CSS वर्ण अंतर: अक्षर-अंतर

तुम्ही CSS अक्षर-स्पेसिंग गुणधर्म वापरून वर्ण अंतर सेट करू शकता. नेहमीच्या मूल्यांव्यतिरिक्त (सकारात्मक आणि ऋण), तुम्ही इनहेरिट (पालकांकडून व्हॅल्यू इनहेरिट करण्यासाठी) आणि नॉर्मल (जर तुम्हाला अक्षरांमधील सामान्य अंतर परत करायचे असल्यास) व्हॅल्यू देखील वापरू शकता.

इंटर कॅरेक्टर इंटरव्हल लिहिण्याचे उदाहरण:

P ( अक्षर-अंतर: 2em; )

शब्दांमधील अंतर: शब्द-अंतर

CSS शब्द-अंतर गुणधर्म मागील एकापेक्षा भिन्न आहे कारण ते शब्दांमधील अंतर सेट करते, अक्षरांमधील नाही. या मालमत्तेमध्ये सामान्य आणि वारसा मूल्ये देखील आहेत. आपण नकारात्मक मूल्ये निर्दिष्ट करू शकता. खाली शैली एंट्रीचे उदाहरण आहे:

P (शब्द-अंतर: 6px; )

रेषेतील अंतर: रेषा-उंची

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

खाली CSS लाइन स्पेसिंग कसे करायचे याचे उदाहरण आहे:

P (रेषा-उंची: 180%; )

तीनही गुणधर्मांसह मजकूर कसा दिसतो ते स्क्रीनशॉटमध्ये तुम्ही पाहू शकता:

स्क्रीनशॉट: CSS मध्ये अंतर

परिणाम

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

नियमानुसार, विशिष्ट आकाराच्या प्रत्येक फॉन्टसाठी, मूल्ये प्रीसेट आहेत शब्दांमधील मोकळी जागा, एका शब्दातील अक्षरांमधील अंतरआणि व्हिज्युअल ओळ उंची. हे लक्षात घेतले पाहिजे की कुरियर न्यू सारख्या मोनोस्पेस केलेल्या फॉन्टमधील भिन्न अक्षरांमधील अंतर नेहमीच सारखे असते. इतर प्रकारच्या फॉन्टमध्ये, अक्षरांमधील अंतर अक्षरांच्या संयोगांवर अवलंबून असते - बहुतेक प्रकरणांमध्ये ते निश्चित केले जाते, परंतु मजकूर अधिक "समान" आणि समान रीतीने वितरीत करण्यासाठी अक्षरांच्या काही जोड्यांमध्ये ते मुद्दाम कमी केले जाते. उदाहरणार्थ, AU अक्षरांमधील अंतर NP अक्षरांमधील अंतरापेक्षा कमी आहे, कारण N आणि P अक्षरे सरळ आकारात आहेत आणि A आणि U अक्षरांमध्ये बेव्हल्स आहेत, शिवाय, एका दिशेने निर्देशित केले आहेत. अक्षरांमधील अंतर समान असल्यास, A आणि U हे H आणि P पेक्षा आणखी वेगळे दिसतील. हा प्रभाव हलका करण्यासाठी, त्यांच्यामधील अंतर किंचित कमी केले जाते, परिणामी मजकूराची दृश्यमानपणे संरेखित रेषा होते. ही घटना ऑप्टिकल भ्रमाच्या सर्वात उल्लेखनीय अभिव्यक्तींपैकी एक आहे.

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

HTML मध्ये अशा गुणधर्मांचे कोणतेही analogues नाहीत. मध्यांतर फक्त वापरून सेट केले जाऊ शकते CSS.

शब्द-अंतर गुणधर्म

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

चला एक उदाहरण पाहू:

अक्षर-अंतर गुणधर्म

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

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

दोन्ही गुणधर्म शब्द अंतरआणि अक्षरांमधील अंतरएकत्र वापरले जाऊ शकते कारण तुम्ही अक्षरांमधील अंतर वाढवत असताना, वाचनीयता आणि वेगळे शब्द राखण्यासाठी, तुम्हाला शब्दांमधील अंतर एकाच वेळी वाढवावे लागेल. हेडर डिझाइनचे एक सामान्य उदाहरण येथे आहे:

H1 (शब्द-अंतर: 2 माजी; अक्षर-अंतर: 0.3 माजी)

घटकातील वर्णांमधील अंतर परिभाषित करते. ब्राउझर सहसा फॉन्ट प्रकार, फॉन्ट आकार आणि ऑपरेटिंग सिस्टम सेटिंग्जवर आधारित वर्णांमधील अंतर सेट करतात. हे मूल्य बदलण्यासाठी या गुणधर्माचा वापर केला जातो. नकारात्मक मूल्य वापरणे स्वीकार्य आहे, परंतु या प्रकरणात आपण मजकूराची वाचनीयता राखली आहे याची खात्री करणे आवश्यक आहे.

थोडक्यात माहिती

पदनाम

	वर्णन	उदाहरण
<тип>	मूल्याचा प्रकार दर्शवितो.	<размер>
A && B	मूल्ये निर्दिष्ट क्रमाने आउटपुट करणे आवश्यक आहे.	<размер> && <цвет>
अ | बी	सूचित करते की तुम्हाला प्रस्तावित (A किंवा B) मधून फक्त एक मूल्य निवडण्याची आवश्यकता आहे.	सामान्य | लहान टोपी
अ || बी	प्रत्येक मूल्य स्वतंत्रपणे किंवा इतरांसह कोणत्याही क्रमाने वापरले जाऊ शकते.	रुंदी || मोजणे
	गट मूल्ये.	[ पीक || क्रॉस]
*	शून्य किंवा अधिक वेळा पुनरावृत्ती करा.	[,<время>]*
+	एक किंवा अधिक वेळा पुनरावृत्ती करा.	<число>+
?	निर्दिष्ट प्रकार, शब्द किंवा गट पर्यायी आहे.	इनसेट?
(A, B)	किमान A पुनरावृत्ती करा, परंतु B पेक्षा जास्त वेळा नाही.	<радиус>{1,4}
#	स्वल्पविरामाने विभक्त केलेल्या एक किंवा अधिक वेळा पुनरावृत्ती करा.	<время>#

×

मूल्ये

CSS मध्ये स्वीकारलेली कोणतीही लांबीची एकके मूल्ये म्हणून स्वीकारली जातात - उदाहरणार्थ, pixels (px), inches (in), points (pt), इ. फॉन्ट आकारावर आधारित सापेक्ष युनिट्स वापरून सर्वोत्तम परिणाम प्राप्त केले जातात (em आणि ex). ).

सामान्य वर्णांमधील अंतर सामान्य म्हणून सेट करते.

सँडबॉक्स

विनी द पूह नेहमी थोडासा ताजेतवाने करण्यास प्रतिकूल नसायचा, विशेषत: सकाळी अकरा वाजता, कारण त्या वेळी नाश्ता बराच काळ संपला होता आणि दुपारचे जेवण अजून सुरू झाले नव्हते. आणि अर्थातच, ससा कप आणि प्लेट्स बाहेर काढत आहे हे पाहून त्याला खूप आनंद झाला.

div (अक्षर-अंतर: 0 ;)

उदाहरण

कळस, काळजीपूर्वक विश्लेषण केल्यानंतर, खगोलीय गोलाचे विषुववृत्तीय मोठे वर्तुळ लक्षणीयरीत्या पार करते, जसे की 1994 मध्ये धूमकेतूसह घडले होते. शूमेकर-लेव्ही 9.

या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. १.

तांदूळ. 1. अक्षर-अंतर गुणधर्म लागू करणे

ऑब्जेक्ट मॉडेल

ऑब्जेक्ट.style.letterSpacing

तपशील

प्रत्येक तपशील मंजुरीच्या अनेक टप्प्यांतून जातो.

• शिफारस - विनिर्देश W3C द्वारे मंजूर केले गेले आहे आणि मानक म्हणून शिफारस केली आहे.
• उमेदवाराची शिफारस ( संभाव्य शिफारस) - मानकांसाठी जबाबदार गट समाधानी आहे की ते त्याचे लक्ष्य पूर्ण करतात, परंतु मानक लागू करण्यासाठी विकास समुदायाकडून मदत आवश्यक आहे.
• प्रस्तावित शिफारस सुचवलेली शिफारस) - या टप्प्यावर दस्तऐवज अंतिम मंजुरीसाठी W3C सल्लागार समितीकडे सादर केला जातो.
• कार्यरत मसुदा - मसुद्याची अधिक परिपक्व आवृत्ती ज्यावर समुदाय पुनरावलोकनासाठी चर्चा केली गेली आहे आणि त्यात सुधारणा केली गेली आहे.
• संपादकाचा मसुदा ( संपादकीय मसुदा) - प्रकल्प संपादकांद्वारे बदल केल्यानंतर मानकांची मसुदा आवृत्ती.
• मसुदा ( मसुदा तपशील) - मानकाची पहिली मसुदा आवृत्ती.

×

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

आम्हाला अक्षर-अंतर गुणधर्माची आवश्यकता का आहे?

तुम्ही CSS मधील अक्षरांमधील अंतर वाढवल्यास, तुम्हाला एक अद्वितीय मजकूर शैली मिळू शकते.

एक अद्वितीय फॉन्ट तयार करण्यासाठी, काहीवेळा आपल्याला अक्षरांमध्ये मोकळी जागा तयार करावी लागेल. अक्षरांमधील जागा वाढवण्याचा एकमेव मार्ग म्हणजे CSS. त्यामध्ये, हे कार्य अक्षर-अंतर गुणधर्माद्वारे केले जाते.

हे CSS मधील अतिरिक्त साधन आहे जे तुम्हाला अक्षरांमधील अंतर बदलण्याची परवानगी देते. परंतु काहीवेळा मजकूर सामग्रीच्या चांगल्या शैलीकरणासाठी हे तंतोतंत गहाळ आहे.

अक्षरांमधील जागा कशी बदलावी? CSS: अक्षर-अंतर

ही मालमत्ता सर्व ब्राउझरमध्ये डीफॉल्टनुसार सेट केली जाते. हे सर्व आधुनिक ब्राउझरवर लागू होते, आणि केवळ नाही (उदाहरणार्थ, इंटरनेट एक्सप्लोरर).

या मालमत्तेचे मूल्य निवडकर्त्याच्या सर्व वंशजांना वारशाने मिळाले आहे. याचा अर्थ असा की बॉडी टॅगसाठी अक्षर अंतर सेट करून, तुम्ही संपूर्ण पृष्ठासाठी अक्षर-अंतर मूल्य बदलाल.

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

या गुणधर्माचे कार्य करण्याची पद्धत अशी आहे की ती प्रत्येक अक्षराच्या उजव्या बाजूला पॅडिंग जोडते. हे अधिक तपशीलवार स्तरावर अक्षरांमधील अंतर बदलते. हे समास-डाव्या तत्त्वावर कार्य करते. अक्षर-अंतर वेगवेगळ्या प्रमाणात निर्दिष्ट केले जाऊ शकते: सापेक्ष (em, rem, माजी आणि इतर) आणि परिपूर्ण (px, mm, cm). वापरण्यासाठी सर्वात योग्य मूल्ये म्हणजे px, rem आणि em. अर्थात, पिक्सेलमध्ये मूल्य निर्दिष्ट करणे सर्वोत्तम आहे, कारण लहान अंतर बदलण्यासाठी हे सर्वात सोयीस्कर आणि सर्वात योग्य आहे.

प्रथम, आम्ही या मालमत्तेची चाचणी करणार असलेल्या सामग्रीसह पृष्ठ भरा.

ते सेट करण्यासाठी, तुमचा CSS दस्तऐवज उघडा आणि नंतर बॉडी टॅगसाठी अक्षर-स्पेसिंग: 5px ओळ लिहा. अशा नोंदीचा अर्थ असा होईल की संपूर्ण पृष्ठावर अक्षरांमधील अंतर 5 पिक्सेलने वाढेल (ते फॉन्टवर अवलंबून 6 किंवा 5.5 च्या समान असेल).

तुम्ही वरील कोड लिहिल्यानंतर, तुम्हाला यासारखे वेब पेज मिळेल:

सकारात्मक मूल्ये सहसा 3-5 पिक्सेलपेक्षा जास्त नसतात, परंतु नेहमीच नाही. कधीकधी जास्त अंतर वापरले जाते, उदाहरणार्थ, मुख्य शीर्षक तयार करताना. 10px पेक्षा जास्त अंतर ठेवण्याची शिफारस केलेली नाही, कारण मजकूर वाचता येणार नाही.

CSS मधील अक्षरांमधील अंतर कमी करणे देखील शक्य आहे. हे त्याच प्रकारे निर्दिष्ट केले आहे, परंतु "-" चिन्हासह. सामान्यतः किमान मूल्य -1 px असते. आपण -10, अगदी -20 सेट करू शकता, परंतु मजकूर वाचणे अशक्य होईल. तुम्हाला लहान इंडेंटसह मजकूर बनवायचा असल्यास, 200px पेक्षा कमी मूल्य वापरू नका.

व्यावहारिक अनुप्रयोग

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

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

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

शेवटी, मी ते शोधून काढले आणि फोटोशॉपमधील "प्रतीक" पॅलेट शोधण्याची वेळ आली आहे.

आजपर्यंत मला त्याबद्दल पूर्ण माहिती नव्हती. अर्थात, मला “फॉन्ट”, “फॉन्ट साइज”, “फॉन्ट कलर”, “लाइन स्पेसिंग” सारख्या फील्डशी परिचित होते. पण नंतर मला PSD लेआउटपैकी एकामध्ये अज्ञात फील्डचा सामना करावा लागला.

बहुधा, याचा अर्थ रेषेच्या अक्षरांमधील अंतर असा असावा. तीच गोष्ट ज्यासाठी नियम CSS मध्ये जबाबदार आहे

. कोणीही असा अंदाज लावू शकतो की वजा चिन्हाचा अर्थ ओळीतील शब्द "संकुचित करणे" आहे. परंतु या प्रकरणात फोटोशॉप कोणत्या प्रकारचे मापन युनिट वापरते? मी हे मूल्य CSS मध्ये कसे भाषांतरित करू? कोणत्या युनिट्समध्ये - पिक्सेल किंवा एम?

मला या प्रश्नांची उत्तरे इंटरनेटच्या रशियन भाषेतील भागावर सापडली नाहीत. मी वाद घालत नाही, कदाचित मी चांगले दिसत नाही. पण मला ते इंग्रजी भाषिक भागात सापडले. मी या छोट्या पुनरावलोकनात या समस्येला वाहिलेल्या एका उल्लेखनीय लेखाचे विनामूल्य रीटेलिंग सादर करतो.

म्हणून येथे फॉन्टवर लागू केलेल्या रहस्य मूल्यासह एक psd मॉकअप आहे

आणि आणि - फॉन्ट आकार, , दुसऱ्यासाठी - . हे अगदी समान नियमासह गोंधळले जाऊ नये - अक्षरांमधील अंतर.

चला आपल्या मेंढ्यांकडे परत जाऊया. हे पाहिले जाऊ शकते की फील्डमध्ये मूल्य आहे

1

-25

. CSS मध्ये त्याचे भाषांतर कसे करायचे ते मी तुम्हाला थोड्या वेळाने सांगेन. आत्तासाठी, "सिम्बॉल" पॅलेटच्या उर्वरित पंक्ती थोडक्यात पाहू.

चौथ्या रांगेत दोन फील्ड आहेत, ज्याचा उद्देश मूळमध्ये खालीलप्रमाणे लिहिलेला आहे: “व्हर्टिकल स्केलर टूल” आणि “होरिझॉन्टल स्केलर टूल”. तुम्ही अंदाज लावू शकता की या सेटिंग्जचा वापर करून तुम्ही अक्षरे अनुलंब आणि क्षैतिजरित्या स्केल (ताणणे किंवा संकुचित) करू शकता.

शेवटच्या (पाचव्या) पंक्तीमध्ये निर्देशांकांसाठी अंतर बदलण्यासाठी फील्ड आणि फॉन्ट रंग (अक्षरे) साठी फील्ड आहे.

हेच मुळात संपूर्ण वर्णन आहे. संक्षिप्त - पण बाहेर का ओढायचे? मला या लेखात माझ्यासाठी उपयुक्त असलेल्या चित्रांसह संपूर्ण वर्णन सापडले.

मला उघडलेल्या प्रश्नाकडे वळू द्या - मूल्य कसे रूपांतरित करावे

किंवा फोटोशॉप मधील फोटोशॉप ते पिक्सेल

1

px

: X * Y / 1000

1

एक्स

- हा अर्थ आहे

1	अक्षरांमधील अंतर

फोटोशॉप मध्ये,

1

वाय

- फॉन्ट आकार आहे. म्हणजेच, प्रथम अक्षरातील अंतराचे मूल्य फॉन्ट आकाराने गुणाकार केले जाते आणि नंतर परिणामी मूल्य 1000 ने विभाजित केले जाते.

या विशिष्ट प्रकरणात, सूत्र आणि परिणाम खालीलप्रमाणे असेल:

25 * 22 / 1000 = -0.55px

यावर, मला वाटते की सर्वकाही सांगितले आहे.