CSS લાઇન-અંતર મેળવવા માટે CSS લાઇન-ઊંચાઈની સંપત્તિનો ઉપયોગ કરવો
તમારા વેબ પૃષ્ઠો પર તમારી લાઇન અંતરને અસર કરવા માટે CSS શૈલીની મિલકતની લાઇન-ઊંચાઈનો ઉપયોગ કેવી રીતે કરવો તે જાણો.
CSS રેખા અંતરનાં મૂલ્યો
સીએસએસ રેખા અંતર CSS સ્ટાઇલ પ્રોપર્ટીની લાઇન-ઊંચાઈથી પ્રભાવિત છે આ ગુણધર્મ 5 અલગ અલગ મૂલ્યો સુધી લે છે:
- સામાન્ય: બ્રાઉઝર ફોન્ટ માપ સાથે સંબંધિત રેખા અંતર માટે મૂલ્ય નક્કી કરે છે. આ સામાન્ય રીતે ફોન્ટ કદ અથવા થોડી મોટી (20% જેટલું) જેવું જ છે.
- બોલાવે છે: પેરેન્ટ તત્વની રેખા અંતરથી રેખા અંતર લેવામાં આવવું જોઈએ. તેથી જો તમે તમારા શરીરના ટૅગની લંબાઈ-ઊંચાઈને ફૉન્ટ કદ કરતાં 30% જેટલી વધુ સેટ કરો છો અને તેના અંતર્ગત ફકરો ટેગ કરેલા હોય છે, તો તે ફોન્ટ-કદ કરતાં 30% વધુ ઊંચાઈની રેખા-ઊંચાઈ પણ હશે.
- એક નંબર: જો રેખા-ઊંચાઇના મૂલ્યનો કોઈ એકમ માપનો નથી, તો તેને લીટીની ઊંચાઈ માટે ફૉન્ટના કદ પર ગુણક માનવામાં આવે છે. તેથી 1.25 ની રેખાની ઊંચાઇ ફોન્ટ કદ કરતાં 25% મોટી હશે.
- લંબાઈ: જો રેખા-ઊંચાઈના મૂલ્યમાં માપનું એકમ હોય છે, તો તે જગ્યાની ચોક્કસ રકમ છે જે રેખાઓ વચ્ચે હોવી જોઈએ. તેથી, 1.25 મીમી રેખાઓ 1.25 મિલિમીટર્સ સિવાયના ભાગમાં પરિણમશે.
- ટકાવારી: જો વાક્ય-ઊંચાઈ ટકાવારી હોય, તો તે ફોન્ટ માપની ટકાવારી હશે. તેથી 125% ની લાઇન-ઊંચાઇ ફોન્ટ માપ કરતાં 25% મોટી હશે.
તમારે કયા પ્રકારનું સીએસએસ લાઈન અંતર માટે ઉપયોગ કરવો જોઈએ
મોટા ભાગના કિસ્સાઓમાં, લીટી અંતરની શ્રેષ્ઠ પસંદગી તેને ડિફોલ્ટમાં છોડી દેવાનું છે - અથવા "સામાન્ય". આ સામાન્ય રીતે સૌથી વધુ વાંચનીય છે અને તે જરૂરી નથી કે તમે કોઈ ખાસ કંઇક કરો. પરંતુ લીટી અંતરને બદલવું તે તમારા ટેક્સ્ટને એક અલગ લાગણી આપી શકે છે.
જો તમારા ફોન્ટ માપને ems અથવા ટકાવારી તરીકે વ્યાખ્યાયિત કરવામાં આવે તો , તમારી લાઇન-ઊંચાઈ એ પણ તે રીતે વ્યાખ્યાયિત થવી જોઈએ. આ રેખા અંતરનું સૌથી સાનુકૂળ સ્વરૂપ છે કારણ કે તે રીડરને તેમના ફોન્ટ્સનું કદ બદલી શકે છે અને તમારી રેખા અંતર પર સમાન ગુણોત્તર રાખે છે.
બિંદુ (પીટી) મૂલ્ય સાથે પ્રિન્ટ સ્ટાઇલ શીટ્સ માટે લાઇન ઊંચાઈ સેટ કરો બિંદુ એક છાપવાનો માપ છે, અને તેથી તમારા ફોન્ટના કદ પણ બિંદુઓમાં હોવા જોઈએ.
હું નંબર પસંદગીનો ઉપયોગ કરવાનું પસંદ કરતો નથી કારણ કે મને જાણવા મળ્યું છે કે તે લોકો માટે સૌથી ગૂંચવણભર્યો છે ઘણાં લોકો એવું માને છે કે આ સંખ્યા ચોક્કસ કદ છે, અને તેથી તે વિશાળ બનાવે છે. ઉદાહરણ તરીકે, તમારી પાસે 14px પર ફૉન્ટ સેટ હોઈ શકે છે અને પછી તમે તમારી લાઇન-ઊંચાઈ 14 થી સેટ કરી શકો છો - જે લીટીઓ વચ્ચે વિશાળ અવકાશ પરિણમે છે - કારણ કે લીટી અંતર ફૉન્ટનું કદ 14 ગણો સેટ કરેલું છે.
તમારી લાઇન અંતર માટે તમારે કેટલી જગ્યા વાપરવી જોઈએ
જેમ મેં ઉપર ઉલ્લેખ કર્યો છે, હું ડિફૉલ્ટ લાઇન અંતરનો ઉપયોગ કરવાની ભલામણ કરું છું જ્યાં સુધી તમારી પાસે તેને બદલવા માટે ચોક્કસ કારણ નથી. લીટી અંતર બદલવાનું વિવિધ અસરો કરી શકે છે:
- એકસાથે ખૂબ જ ચુસ્ત ટેક્સ્ટ વાંચવું મુશ્કેલ હોઈ શકે છે. પરંતુ નાની રેખા જગ્યાઓ ટેક્સ્ટના મૂડને અસર કરી શકે છે. જો ટેક્સ્ટને એકસાથે સ્ક્રેન કરવામાં આવે તો ટેક્સ્ટનો અર્થ ઘાટો અથવા વધુ તંગ લાગે છે.
- દૂર સિવાયના ટેક્સ્ટને વાંચવામાં પણ મુશ્કેલ હોઈ શકે છે પરંતુ વાઈડ લાઇન જગ્યાઓ ટેક્સ્ટને વધુ વહેતી અને પ્રવાહી લાગે છે.
- લીટી અંતર બદલવું તે ટેક્સ્ટ બનાવી શકે છે જે અન્યથા જગ્યામાં ફિટ થતી નથી અથવા વધુ કોમ્પેક્ટ હોત અથવા તમારી ડિઝાઇનમાં વધુ જગ્યા લેશે.