વેબ ડીઝાઇને હંમેશા ગ્રાફિક અને પ્રિન્ટ ડિઝાઇનના વિશ્વમાંથી આચાર્યો અને વ્યાખ્યાઓ ઉધાર લીધી છે. આ ખાસ કરીને સાચું છે જ્યારે તે વેબ ટાઇપોગ્રાફી અને જે રીતે અમે અમારા વેબ પાનાંઓ પર પત્રથી પત્રક મેળવે છે. આ સમાનતા હંમેશા 1 થી 1 અનુવાદો નથી, પરંતુ તમે ચોક્કસપણે જોઈ શકો છો કે જ્યાં એક શિસ્તે અન્યને પ્રભાવિત કર્યા છે. જ્યારે તમે પરંપરાગત ટાઇપોગ્રાફી શબ્દ "અગ્રણી" અને CSS ગુણધર્મ, જે "લાઇન-ઊંચાઈ" તરીકે ઓળખાય છે, વચ્ચેના સંબંધને ધ્યાનમાં લઈને આ ખાસ કરીને સ્પષ્ટ છે.
અગ્રણી હેતુ
જ્યારે લોકો છાપેલા પૃષ્ઠ માટે ટાઇપોગ્રાફી બનાવવા માટે મેન્યલ અથવા લાકડાના અક્ષરોને જાતે હેન્ડસેટ કરવા માટે ઉપયોગ કરતા હતા, ત્યારે તે રેખાઓ વચ્ચે અંતર નિર્માણ કરવા માટે લીડની પાતળા ટુકડાઓ ટેક્સ્ટની આડી રેખાઓ વચ્ચે રાખવામાં આવતી હતી. જો તમે મોટી જગ્યા ઇચ્છતા હોવ, તો તમે મોટા ભાગની લીડ દાખલ કરી શકો છો. આ રીતે "અગ્રણી" શબ્દનો ઉપયોગ કરવામાં આવ્યો હતો જો તમે ટાઈપોગ્રાફિક ડિઝાઇન અને આચાર્યો અંગેની એક પુસ્તકમાં "અગ્રણી" શબ્દ જોયો છે, તો તે કંઈક અસર કરશે - "શ્રેણીની સતત લીટીઓના બેઝલાઇન્સ વચ્ચેની અંતર."
વેબ ડિઝાઇનમાં અગ્રણી
ડિજિટલ ડિઝાઇનમાં અગ્રણી શબ્દનો ઉપયોગ લખાણની રેખાઓ વચ્ચે અંતરનો સંદર્ભ આપવા માટે થાય છે. ઘણાં પ્રોગ્રામ્સ આ ચોક્કસ શબ્દનો ઉપયોગ કરે છે, ભલે તે પ્રોગ્રામ્સમાં વાસ્તવિક લીડનો ઉપયોગ થતો નથી. પરંપરાગત લોકો પાસેથી ઉધાર વિચારોના નવા સ્વરૂપોનું આ એક ઉત્તમ ઉદાહરણ છે, તેમ છતાં તે સિદ્ધાંતના અમલીકરણમાં ફેરફાર થયો છે.
જ્યારે તે વેબ ડીઝાઇનની વાત કરે છે, ત્યાં "અગ્રણી" માટે કોઈ CSS ગુણધર્મ નથી. તેના બદલે, CSS ગુણધર્મ કે જે ટેક્સ્ટના આ દ્રશ્ય પ્રદર્શનને નિયંત્રિત કરશે તે લાઇન-ઊંચાઈ કહેવાશે જો તમે ટેક્સ્ટની આડી રેખાઓ વચ્ચે તમારા ટેક્સ્ટની વધારાની જગ્યા લેવા માંગો છો, તો તમે આ પ્રોપર્ટીનો ઉપયોગ કરશો. ઉદાહરણ તરીકે, કહો કે તમે તમારી સાઇટના
આ હવે સામાન્ય લીટી ઊંચાઇના 1.5 ગણો હશે, જે પૃષ્ઠના ડિફૉલ્ટ ફોન્ટ માપ પર આધારિત છે (જે સામાન્ય રીતે 16px છે).
લાઇન-ઊંચાઈનો ઉપયોગ ક્યારે કરવો
ઉપર વર્ણવ્યા મુજબ, ફકરા અથવા ટેક્સ્ટના અન્ય બ્લોકમાં ટેક્સ્ટની રેખાઓના સ્થાન માટે લાઇન-ઉંચાઈ વાપરવા માટે યોગ્ય છે. જો રેખાઓ વચ્ચે બહુ ઓછી જગ્યા હોય, તો ટેક્સ્ટ તમારી સાઇટ પર દર્શકો માટે વાંચવા માટે કંટાળાજનક અને મુશ્કેલ બની શકે છે. તેવી જ રીતે, જો રેખાઓ પૃષ્ઠ પર ખૂબ દૂર હોવા છતાં, વાંચનનો સામાન્ય પ્રવાહ વિક્ષેપિત થશે અને તે કારણસર વાચકોને તમારા ટેક્સ્ટમાં મુશ્કેલી પડશે. આ માટે તમે વાક્ય-ઊંચાઈના અંતરનો યોગ્ય ઉપયોગ કરવા માંગો છો. તમે વાસ્તવિક વપરાશકર્તાઓ સાથે તમારી ડિઝાઇનને પૃષ્ઠની વાંચવાની ક્ષમતા પર પ્રતિક્રિયા મેળવવા માટે ચકાસી શકો છો.
જ્યારે લાઇન-ઊંચાઈનો ઉપયોગ ન કરવો
પેડિંગ અથવા માર્જિન સાથે રેખા-ઊંચાઇને મૂંઝવતા નથી કે જે તમે તમારા પૃષ્ઠની ડિઝાઇનમાં સફેદજગ્યાને ઉમેરવા માટે ઉપયોગમાં લેશો, જેમાં મથાળું અથવા ફકરા નીચે જણાવેલ છે. તે અંતર અગ્રણી નથી, અને તેથી તે લાઇન-ઊંચાઈ દ્વારા નિયંત્રિત નથી
જો તમે ચોક્કસ ટેક્સ્ટ તત્વો હેઠળ જગ્યા ઉમેરવા માંગો છો, તો તમે માર્જિન અથવા પેડિંગનો ઉપયોગ કરશો. પાછલા સીએસએસ ઉદાહરણ પર પાછા જવું જે આપણે ઉપયોગમાં લીધું, અમે આ ઉમેરી શકીએ છીએ:
મુખ્ય પૃષ્ઠ {લાઇન-ઊંચાઈ: 1.5; ગાળો નીચે: 24px; }આ અમારા પૃષ્ઠના ફકરાના (જે <મુખ્ય> ઘટકની અંદરની છે) ટેક્સ્ટની રેખાઓ વચ્ચે 1.5 પંક્તિની ઊંચાઈ હશે. તે જ ફકરાઓમાં વિડીયો બ્રેક માટેના 24 પિક્સેલ્સનો વ્હાઈટસ્પેસ હશે, જેનાથી વાચકો સરળતાથી બીજા ફકરાને ઓળખી શકે છે અને વેબસાઈટને સરળ બનાવવાનું કાર્ય કરી શકે છે. તમે અહીં માર્જિનની જગ્યાએ પેડિંગ પ્રોપર્ટીનો ઉપયોગ પણ કરી શકો છો:
મુખ્ય પૃષ્ઠ {લાઇન-ઊંચાઈ: 1.5; પેડિંગ-તળિયું: 24 પીએક્સ; }લગભગ તમામ કેસોમાં, આ અગાઉના સીએસએસ જેવું જ પ્રદર્શિત કરશે.
કહો કે તમે "સેવાઓ-મેનૂ" ના વર્ગની સૂચિમાંની સૂચિ આઇટમ્સની નીચે અંતર ઉમેરવા માગતા હો, તો તમે માર્જિન અથવા પેડિંગનો ઉપયોગ કરવા માટે કરશો, લીટીની ઊંચાઈ નહીં. તેથી આ યોગ્ય રહેશે.
. સર્વિસિસ મેનૂ લી {<પૅડિંગ-તળિયું: 30px; }જો તમે સૂચિ વસ્તુઓની અંદરના લખાણના અંતરને સેટ કરવા માંગતા હો તો તમે માત્ર લાઇન ઊંચાઇનો ઉપયોગ કરશો, ધારી રહ્યા છીએ કે તેઓ ટેક્સ્ટની લાંબી રન ધરાવતા હતા જે દરેક બુલેટ પોઈન્ટ માટે બહુવિધ રેખાઓ સુધી ચાલે છે.