విషయము
- జ్ఞానం అవసరం: CSS, ప్రాథమిక j క్వెరీ
- అవసరం: j క్వెరీ, CSS, HTML
- ప్రాజెక్ట్ సమయం: 30 నిముషాలు
- మూల ఫైళ్ళను డౌన్‌లోడ్ చేయండి
మీరు కంటెంట్ నుండి రూపకల్పన చేశారని uming హిస్తే, మీ డిజైన్‌ను ప్రభావితం చేసే మొదటి నిర్ణయం ఉంది రకం సంబంధిత ఉండాలి. ద్వారా కూడా కాదు టైప్‌ఫేస్‌ను ఎంచుకోవడం ద్వారా మీరు మీ సైట్‌ను ప్రభావితం చేసే పని చేసారు. రకం ముద్రణ మరియు వెబ్ రూపకల్పనకు ప్రధానమైనది మరియు ఇది సంక్లిష్టమైనది; పేరుకుపోయిన నిబంధనలు, అభ్యాసాలు, నియమాలు మరియు పద్ధతులు చాలా ఉన్నాయి. ఈ వ్యాసం రకం యొక్క ఒక అంశాన్ని నిర్వహించడానికి ఒక సాంకేతికతతో సంబంధం కలిగి ఉంది, ఇది ఆన్‌లైన్‌లో చేయడం చాలా కష్టం కాని ముద్రణలో నిత్యకృత్యంగా ఉంది: స్థిరమైన నిలువు లయను నిర్వహించడం, ఇది వృత్తిపరమైన లేఅవుట్‌ను సాధించడానికి మాకు అనుమతిస్తుంది.
రకాన్ని వేయడం
ముద్రణలో, గణనీయమైన టెక్స్ట్ ఉన్న ఏదైనా వస్తువు కోసం, డిజైన్ యొక్క పునాది బేస్లైన్-గ్రిడ్ కావచ్చు. ఇది పేజీకి నిర్మాణాన్ని తీసుకురావడానికి ఉపయోగించబడుతుంది మరియు కంటెంట్ యొక్క నిలువు ప్రవాహానికి మార్గనిర్దేశం చేస్తుంది. దాదాపు ప్రతిదీ ఆ బేస్లైన్ గ్రిడ్కు సంబంధించి ఉంచబడుతుంది. మీరు నిబంధనలను గుర్తించకపోతే చింతించకండి, బేస్‌లైన్‌లు లేదా బేస్లైన్ గ్రిడ్‌లతో ఎవరికీ తెలియదు; మీరు ఇప్పటికే వాటి గురించి తెలుసు. మీరు నిస్సందేహంగా చెట్లతో కూడిన కాగితంపై వ్రాసినప్పుడు పాఠశాలకు తిరిగి ఆలోచించండి - మీరు వ్రాసినట్లుగా మీరు మీ అక్షరాల అడుగు భాగాన్ని కాగితంపై ఉన్న ప్రతి పంక్తులపై చక్కగా ఉంచారు. బేస్లైన్ మరియు బేస్లైన్ గ్రిడ్ చర్యలో ఉంది. బేస్లైన్ అనేది inary హాత్మక రేఖ, దీనిపై అక్షరాల దిగువ భాగం ఉంటుంది.మీరు ఇప్పుడు ఈ కథనాన్ని చూస్తే, నిజంగా ఒక లైన్ లేనప్పటికీ, మీరు బేస్‌లైన్‌ను “చూస్తారు”. మీ మెదడు మీ కోసం ఒకదాన్ని ఉంచుతుంది, అందుకే మీరు వాక్యాలను చదవగలరు. చెట్లతో కూడిన కాగితంపై పంక్తులు? అవి బేస్లైన్ గ్రిడ్. సూటిగా మీ వాక్యాలు సూటిగా ఉంటాయి మరియు క్రమమైన వ్యవధిలో సెట్ చేయండి కాబట్టి మీ వచనానికి నిలువు లయ ఉంటుంది.
లంబ లయ
పేజీ వచనం ఎక్కడ ఉందో లంబ లయ నిర్దేశిస్తుంది. ఇది టెక్స్ట్ బ్లాక్‌లను స్కాన్ చేయడానికి మరియు చదవడానికి మన సామర్థ్యాన్ని ప్రభావితం చేసే ఒక భాగం మరియు ఇది మా భావోద్వేగ ప్రతిస్పందనలను తెలియజేయడానికి సహాయపడుతుంది. వచనానికి బలమైన నిలువు లయ మరియు మంచి అంతరం ఉన్నప్పుడు అది ప్రొఫెషనల్, పరిగణించబడినది, అధికారికమైనది మరియు చదవడానికి సౌకర్యంగా ఉంటుంది. వచనంలో పేలవమైన లయ మరియు అంతరం ఉన్నప్పుడు అది తక్కువ పరిగణించబడుతుందని, తక్కువ ప్రొఫెషనల్‌గా మరియు తరచుగా చదవడం కష్టమని మేము భావిస్తున్నాము. లంబ లయ ఒక భాగం వినియోగం మరియు ఒక భాగం సౌందర్యం.
లయను నిర్వహిస్తోంది
దురదృష్టవశాత్తు వెబ్ రకానికి సంబంధించి కొన్ని ప్రాథమిక పద్ధతులను అమలు చేయగల సామర్థ్యం పరంగా ముద్రణ యొక్క పేలవమైన బంధువు. వెబ్‌లో మేము ప్రింట్ డిజైనర్ (లేదా పాఠశాలలో పిల్లవాడు) చేసే విధంగా బేస్లైన్ గ్రిడ్‌ను ఉపయోగించలేము - మేము టెక్స్ట్ యొక్క బేస్‌లైన్‌ను పత్రం యొక్క బేస్లైన్ గ్రిడ్కు సమలేఖనం చేయలేము. CSS కి బేస్లైన్ గ్రిడ్ యొక్క భావన లేదు. కాబట్టి, మా వచనం బేస్లైన్ గ్రిడ్ యొక్క పంక్తులపై సరిగ్గా కూర్చుని ఉండదు. బదులుగా, ఇది పంక్తుల మధ్య అంతరంలో నిలువుగా కేంద్రీకృతమై ఉంటుంది. ఇది వెబ్ చేయగలిగిన ఉత్తమమైనది.
ఉదాహరణ పత్రంతో ప్రాక్టికల్ చేద్దాం. మొదట, కనిపించే బేస్లైన్ గ్రిడ్‌ను తయారు చేయడం ద్వారా మేము బీట్‌ను సెట్ చేస్తాము. దీన్ని చేయడానికి మేము 22px వేరుగా సాధారణ క్షితిజ సమాంతర రేఖలను గీయడానికి పునరావృత నేపథ్య చిత్రాన్ని ఉపయోగిస్తాము:
- html {background: #fff url (baseline_22.png); }
హుర్రే, మా చెట్లతో కూడిన కాగితం ఉంది!
ఏమీ లేదు అని మీరు గమనించవచ్చు. ప్రతిదీ వరుసలో ఉండటానికి, అన్ని మూలకాల దిగువ అంచు ఆ పంక్తులలో ఒకదాన్ని కొట్టాలని మేము కోరుకుంటున్నాము. దీన్ని చేయటానికి సులభమైన మార్గం ఏమిటంటే, అన్ని అంశాలు 22 యొక్క గుణకం అయిన నిలువు ఎత్తును (మార్జిన్‌లతో సహా) తీసుకుంటాయని నిర్ధారించుకోండి. ఇక్కడ కొన్ని CSS ఉంది. నేను REM యూనిట్‌ను ఉపయోగిస్తున్నాను, కానీ REM ను అర్థం చేసుకోని బ్రౌజర్‌లకు EM ఫాల్‌బ్యాక్ ఇస్తున్నాను. నేను వ్యాఖ్యలలో సమానమైన PX యూనిట్‌ను కూడా చేర్చుతున్నాను. మీకు ఇంకా REM / EM అర్థం కాకపోతే, మీరు బదులుగా px విలువలను ఉపయోగించవచ్చు - అవన్నీ సమానం:
- html {/ * font-size: 16px, line-height: 22px * /
- ఫాంట్: 100% / 1.375 "హెల్వెటికా న్యూ", హెల్వెటికా, ఏరియల్, సాన్స్-సెరిఫ్;
- నేపథ్యం: #fff url (baseline_22.png); }
- h1, h2, h3, h4, h5, h6 {/ * మార్జిన్-టాప్ మరియు దిగువ రెండూ 22px * /
- / * em ఫాల్‌బ్యాక్ * / మార్జిన్: 1.375em 0;
- మార్జిన్: 1.375rem 0; }
- h1 {/ * ఫాంట్-సైజు 32px, లైన్-ఎత్తు 44px * /
- / * em ఫాల్‌బ్యాక్ * / font-size: 2em;
- font-size: 2rem; లైన్-ఎత్తు: 1.375; }
- h2 {/ * ఫాంట్-సైజు 26px, లైన్-ఎత్తు 44px * /
- / * em ఫాల్‌బ్యాక్ * / font-size: 1.75em;
- font-size: 1.75rem; లైన్-ఎత్తు: 1.5714285714; }
- h3, h4, h5, h6 {/ * ఫాంట్-పరిమాణం 22px, లైన్-ఎత్తు 22px * /
- / * em ఫాల్‌బ్యాక్ * / font-size: 1.375em;
- font-size: 1.375rem; పంక్తి-ఎత్తు: 1; }
- p, ul, blockquote {/ * దిగువ మార్జిన్ 22px, లైన్-ఎత్తు html (22px) నుండి వారసత్వంగా వస్తుంది * /
- / * em ఫాల్‌బ్యాక్ * / మార్జిన్-టాప్: 0; మార్జిన్-బాటమ్: 1.375em;
- మార్జిన్-టాప్: 0; మార్జిన్-బాటమ్: 1.375rem; }
అది మనకు ఏమి ఇస్తుందో చూద్దాం. అన్ని వచనం ఎలా చక్కగా సమలేఖనం అవుతుందో గమనించండి? ఇది బేస్లైన్లో కూర్చోదు, కానీ దీనికి vert హించదగిన నిలువు లయ ఉంటుంది. ఇది బాగుంది మరియు చక్కనైనది.
చిత్రాలతో వ్యవహరించడం
చిత్రాలు విషయాలు మరింత క్లిష్టంగా మారుస్తాయి. మేము కొన్నింటిని చేర్చినప్పుడు మా లయకు ఏమి జరుగుతుందో చూడండి. వారు రికార్డులో దాటవేయడం వంటి వాటికి అంతరాయం కలిగిస్తారు - టెంపో సరైనది కాని సమయం ఆపివేయబడింది. అమరిక మార్చబడుతుంది. చిత్రాలకు బేస్లైన్ యొక్క బహుళ ఎత్తు ఉండే అవకాశం లేదు కాబట్టి, దిగువ అంచు మా బేస్లైన్ గ్రిడ్తో సరిపడదు.
దాన్ని పరిష్కరించడానికి మనం నిజంగా చేయవలసిందల్లా ప్రతి చిత్రానికి ఒక మార్జిన్‌ను జోడించి, మార్జిన్ లైన్ దిగువన మా గ్రిడ్తో తయారుచేయడం. కొద్దిగా జావాస్క్రిప్ట్‌తో ఆటోమేట్ చేయడానికి ఇది చాలా సులభం. ఇక్కడ మా ప్రాథమిక ప్రణాళిక:
- ప్రతి చిత్రం యొక్క ఎత్తును గుర్తించండి.
- చిత్రం ప్రస్తుతం తీసుకునే నిలువు ప్రదేశానికి బేస్లైన్ విలువ ఎన్నిసార్లు విభజిస్తుందో చూడండి మరియు మిగిలినదాన్ని పొందండి.
- ఇమేజ్‌పై మనం దరఖాస్తు చేసుకోవాల్సిన ఆఫ్‌సెట్ ఇవ్వడానికి మిగిలిన వాటిని బేస్లైన్ నుండి తీసివేయండి.
- చిత్రం దిగువకు మార్జిన్‌గా ఆఫ్‌సెట్‌ను వర్తించండి.
చిత్రం యొక్క నిలువు స్థలం దిగువ ఇప్పుడు బేస్లైన్ గ్రిడ్తో సరిగ్గా సమలేఖనం అవుతుంది. J క్వెరీలో ఇది చేసే ప్రాథమిక ఫంక్షన్ ఇక్కడ ఉంది:
- window (విండో) .బైండ్ (’లోడ్’, ఫంక్షన్ () {
- $ ("img"). ప్రతి (ఫంక్షన్ () {
- / * వేరియబుల్స్ * /
- var this_img = $ (ఇది);
- var బేస్లైన్ = 22;
- var img_height = this_img.height ();
- / * గణితాలు చేయండి * /
- var మిగిలిన = పార్స్ఫ్లోట్ (img_height% బేస్లైన్);
- / * మనం ఎంత జోడించాలి? * /
- var ఆఫ్‌సెట్ = పార్స్ఫ్లోట్ (బేస్లైన్-మిగిలిన);
- / * చిత్రానికి మార్జిన్ వర్తించండి * /
- this_img.css ("మార్జిన్-బాటమ్", ఆఫ్‌సెట్ + "px");
- });
- });
ఎందుకు window.bind లైన్? ఎందుకంటే మేము వాటి పరిమాణాలను విశ్వసనీయంగా పొందే ముందు చిత్రాలు లోడ్ అయ్యే వరకు వేచి ఉండాలి. ఈ ప్రాథమిక కోడ్ నడుస్తున్న ఉదాహరణ ఇక్కడ ఉంది.
J క్వెరీని మెరుగుపరుస్తుంది
ప్రపంచం చాలా అరుదుగా సూటిగా ఉంటుంది, కాబట్టి ఇది ఇక్కడ తేలుతుంది - మేము చాలా తక్కువ అమలు వివరాలతో వ్యవహరించాలి. మన పనితీరులో తప్పేంటి? పుష్కలంగా:
- ఇది ఫ్లోటెడ్ లేదా బ్లాక్ కాకుండా ఇన్లైన్ చిత్రాలతో దుష్ట ఫలితాలను ఇస్తుంది.
- ఇది కొన్ని చిత్రాలపై బగ్గీగా ఉంది, ప్రత్యేకంగా కంటైనర్లలో ఉన్నవి.
- ఇది ద్రవ లేఅవుట్‌లతో వ్యవహరించదు.
- ఇది తిరిగి ఉపయోగించదగినది కాదు.
ఉదాహరణలోని స్మైలీ ముఖం వంటి ఇన్లైన్ చిత్రాలకు ఈ ప్రవర్తనను వర్తింపచేయడానికి మేము ఇష్టపడము. ఇన్లైన్ చిత్రాలు సమలేఖనం చేయబడ్డాయి, కాబట్టి దిగువ అంచు టెక్స్ట్ మాదిరిగానే ఉంటుంది (కాదు బేస్లైన్ గ్రిడ్). అంటే చిత్రం నిలువుగా ఆఫ్‌సెట్ చేయబడింది. టెక్స్ట్ ఎలిమెంట్ కోసం బేస్లైన్ ఎక్కడ ఉందో తెలుసుకోవడానికి CSS లేదా JS మాకు మార్గం ఇవ్వవు, కాబట్టి ఆఫ్‌సెట్ మాకు తెలియదు. మేము ఇన్లైన్ చిత్రాలను విస్మరించాలి మరియు సెట్ చేయబడిన చిత్రాలకు మాత్రమే మా పరిష్కారాన్ని వర్తింపజేయాలి ప్రదర్శన: బ్లాక్ (అదృష్టవశాత్తూ, ఏదైనా తేలియాడే చిత్రం స్వయంచాలకంగా బ్లాక్‌ను ప్రదర్శించడానికి సెట్ చేయబడుతుంది).
చిత్రం కంటైనర్‌లో ఉంటే కంటైనర్‌పై ఓవర్‌ఫ్లో సెట్టింగులు ఉన్నందున చిత్రానికి వర్తించే మార్జిన్ దాచబడవచ్చు. అలాగే, మేము చిత్రంపై మార్జిన్‌ను కోరుకోకపోవచ్చు, కానీ బదులుగా కంటైనర్ ఎలిమెంట్‌పై. ఉదాహరణలో, పెట్టె లోపల ఉన్న చిత్రం కంటే తెలుపు పెట్టెపై మనకు మార్జిన్లు ఉంటాయి, కాబట్టి పెట్టెలో కనిపించే విచిత్రమైన అంతరాలను పొందకుండా ఉండగలము.
ఫంక్షన్ ఒక్కసారి మాత్రమే నడుస్తుంది, కానీ ద్రవ రూపకల్పనలో బ్రౌజర్ తిరిగి పరిమాణంలో ఉన్నప్పుడు చిత్రాలు ఎత్తును మారుస్తాయి (దీన్ని చూడటానికి ఉదాహరణను చాలా ఇరుకైనదిగా మార్చడానికి ప్రయత్నించండి). పున izing పరిమాణం మళ్లీ లయను విచ్ఛిన్నం చేస్తుంది. బ్రౌజర్ పరిమాణం మార్చబడిన తర్వాత అలాగే పేజీ లోడ్ అయిన తర్వాత అమలు చేయడానికి మాకు ఫంక్షన్ అవసరం. ద్రవ లేఅవుట్లు ఇతర సమస్యలను కూడా పరిచయం చేస్తాయి; చిత్రాలు పాక్షిక పిక్సెల్స్ అధికంగా ఉంటాయి, ఉదాహరణకు 132.34px. ఇది పాక్షిక మార్జిన్‌ను వర్తింపజేసినప్పటికీ (మీకు ఆసక్తి ఉంటే, ఇక్కడ ఎందుకు: trac.webkit.org/wiki/LayoutUnit) unexpected హించని ఫలితాలను కలిగిస్తుంది. కాబట్టి, పాక్షిక పిక్సెల్‌ల వల్ల కలిగే లేఅవుట్ బగ్‌లను నివారించడానికి చిత్రాన్ని మొత్తం పిక్సెల్ ఎత్తుకు మసాజ్ చేయాల్సి ఉంటుంది.
చివరగా, మేము దీనిని మరింత తిరిగి ఉపయోగించగల ఫంక్షన్గా మార్చాలి. వాస్తవానికి, సైద్ధాంతిక పరిష్కారం కంటే ఆచరణాత్మక పరిష్కారం అవసరమయ్యే సంక్లిష్టతతో, ఇతర ప్రాజెక్టులలో తిరిగి ఉపయోగించగల ప్లగ్-ఇన్‌ను మనం తయారు చేయాలి.
చివరి ఉదాహరణలో మీరు ఇవన్నీ సాధించే కోడ్‌ను కనుగొంటారు. ప్లగ్-ఇన్ జావాస్క్రిప్ట్ భారీగా వ్యాఖ్యానించబడింది కాబట్టి మీరు అనుసరించవచ్చు. మీరు ఈ క్రింది విధంగా కాల్ చేయడం ద్వారా ప్లగ్-ఇన్ ను ఉపయోగించవచ్చు:
- window (విండో) .బైండ్ (’లోడ్’, ఫంక్షన్ () {
- $ ("img"). బేస్‌లైన్అలైన్ ();
- });
లేదా, చిత్రం యొక్క పేరెంట్‌గా ఉన్నట్లయితే, పేరున్న కంటైనర్‌కు మార్జిన్‌ను వర్తింపజేయమని మీరు ప్లగ్-ఇన్‌కు చెప్పవచ్చు:
- window (విండో) .బైండ్ (’లోడ్’, ఫంక్షన్ () {
- $ ("img"). బేస్‌లైన్అలైన్ ({కంటైనర్: ’. పాపప్’});
- });
ముగింపు
మంచి నిలువు లయను ఉంచడం అనేది సూక్ష్మమైన కానీ ప్రభావవంతమైన డిజైన్ సాధన. మీకు ఇప్పుడు ప్రాథమిక సూత్రాలు తెలుసు, బేస్‌లైన్‌లు మరియు బేస్లైన్ గ్రిడ్ గురించి పని పరిజ్ఞానం ఉంది మరియు CSS టెక్స్ట్ లేఅవుట్ వర్సెస్ ప్రింట్ యొక్క కొన్ని పరిమితులను తెలుసుకోండి. ఆ పరిమితుల చుట్టూ ఎలా పని చేయాలో కూడా మీకు తెలుసు, మీకు నచ్చిన ఏదైనా నిలువు లయకు మీ పత్రాలను కంపోజ్ చేయండి మరియు అంతరాయం కలిగించే చిత్ర కంటెంట్‌తో వ్యవహరించడంలో మీకు సహాయపడే సాధనం మీకు ఉంది.
CSS పరిపక్వం చెందుతున్నప్పుడు, మా ప్రింట్ దాయాదులతో అనుగుణంగా మరిన్ని ఫీచర్లను పొందడం కొనసాగిస్తాము, కాబట్టి నాణ్యమైన వెబ్‌సైట్‌లను రూపొందించడానికి రకాన్ని బాగా అర్థం చేసుకోవడం చాలా ముఖ్యమైనది. మీరు సాధారణంగా రకం గురించి మరింత తెలుసుకోవాలనుకుంటే నేను www.thinkingwithtype.com ను సిఫార్సు చేస్తున్నాను (మరియు దానితో వెళ్ళడానికి పుస్తకాన్ని కొనడం). మీరు రకం చికిత్స గురించి CSS కథనాల తర్వాత ఉంటే, వెబ్‌లో ఇక్కడ మరియు మరెక్కడా అనేక కథనాలు ఉన్నాయి. మార్క్ బౌల్టన్ మరియు ఇలియట్ జే స్టాక్స్ నుండి తాజా విషయాలను తెలుసుకోవాలని నేను సిఫార్సు చేస్తున్నాను, వీరిద్దరూ వెబ్ డిజైన్‌కు సంబంధించి రకం గురించి తరచుగా మాట్లాడుతారు.
ఆనందించండి!
