ముద్రణ కోసం పత్రాలను ఫార్మాట్ చేయడానికి CSS ని ఉపయోగించడం

ముద్రణ కోసం పత్రాలను ఫార్మాట్ చేయడానికి CSS ని ఉపయోగించడం

మీరు ఎప్పుడైనా వెబ్ నుండి హోటల్‌కి టిక్కెట్ రిజర్వేషన్‌లు లేదా దిశలను ప్రింట్ చేసి ఉంటే, మీరు ఫలితాలతో ఆకట్టుకోలేకపోవచ్చు. కాస్కేడింగ్ స్టైల్ షీట్లను (CSS) ఉపయోగించి, ప్రింటెడ్ డాక్యుమెంట్‌లను స్క్రీన్‌పై ఉండే విధంగానే స్టైల్ చేయవచ్చని మీకు తెలియకపోవచ్చు.





ఆందోళనల విభజన

CSS యొక్క ముఖ్య ప్రయోజనం ఏమిటంటే ప్రెజెంటేషన్ నుండి కంటెంట్‌ను వేరు చేయడం. సరళమైన పరంగా, దీని అర్థం చాలా పాత ఫ్యాషన్ స్టైలిస్టిక్ మార్కప్ బదులుగా:





Heading

మేము సెమాంటిక్ మార్కప్‌ను ఉపయోగిస్తాము:






ఇది చాలా పరిశుభ్రంగా ఉండటమే కాకుండా, మా ప్రెజెంటేషన్ మా కంటెంట్ నుండి వేరు చేయబడిందని కూడా అర్థం. బ్రౌజర్లు రెండర్ చేస్తాయి h1 మూలకాలు డిఫాల్ట్‌గా పెద్ద, బోల్డ్ టెక్స్ట్, కానీ స్టైల్‌షీట్‌తో మనం ఎప్పుడైనా ఆ శైలిని మార్చవచ్చు:

h1 { font-weight: normal; }

ఆ స్టైల్ డిక్లరేషన్‌లను ప్రత్యేక ఫైల్‌లో సేకరించడం ద్వారా మరియు ఆ ఫైల్‌ను మా HTML డాక్యుమెంట్ నుండి రిఫరెన్స్ చేయడం ద్వారా, మేము విభజనను మరింత బాగా ఉపయోగించుకోవచ్చు. స్టైల్ షీట్ తిరిగి ఉపయోగించబడుతుంది మరియు దానిని ఉపయోగించే ప్రతి డాక్యుమెంట్‌లోని ఫార్మాటింగ్‌ను అప్‌డేట్ చేయడానికి మేము ఏ సమయంలోనైనా ఆ సింగిల్ ఫైల్‌ను మార్చవచ్చు.



ప్రింట్ స్టైల్ షీట్‌తో సహా

స్క్రీన్ స్టైల్ షీట్‌తో సహా, మేము స్టైల్ షీట్‌ను ప్రింట్ కోసం పేర్కొనవచ్చు. స్క్రీన్ స్టైల్ షీట్ సాధారణంగా ఇలా చేర్చబడుతుంది:


అయితే, అదనపు లక్షణం, సగం , డాక్యుమెంట్ రెండర్ చేయబడిన సందర్భం ఆధారంగా లక్ష్యాన్ని అనుమతిస్తుంది. డిఫాల్ట్‌గా, మునుపటి మూలకం దీనికి సమానం:






దీని అర్థం, స్టైల్‌షీట్ డాక్యుమెంట్ అందించబడిన ఏదైనా మాధ్యమానికి వర్తిస్తుంది. అయితే, మీడియా లక్షణం ప్రింట్ మరియు స్క్రీన్ విలువలను కూడా తీసుకోవచ్చు:


ఈ ఉదాహరణలో, ది print.css పత్రం ముద్రించినప్పుడు మాత్రమే స్టైల్‌షీట్ ఉపయోగించబడుతుంది. ఇది చాలా ఉపయోగకరమైన యంత్రాంగం. మేము అన్ని సాధారణ స్టైలింగ్‌ని (బహుశా ఫాంట్ ఫ్యామిలీ లేదా లైన్ స్పేసింగ్) స్టైల్‌షీట్‌లో సేకరించవచ్చు, ఇది అన్ని మీడియాకు వర్తిస్తుంది మరియు వ్యక్తిగత స్టైల్‌షీట్లలో మీడియా-నిర్దిష్ట ఫార్మాటింగ్. మళ్ళీ, ఇది ఆందోళనల విభజన యొక్క మరొక ఉపయోగం.





కొన్ని ఉదాహరణ శైలి ప్రకటనలు

పరిశుభ్రమైన నేపథ్యం

రంగురంగుల నేపథ్యం లేదా నేపథ్య చిత్రాన్ని ముద్రించే సిరాను మీరు దాదాపుగా వృధా చేయకూడదనుకుంటున్నారు. మీ డాక్యుమెంట్‌లో సెట్ చేసిన ఈ విలువల కోసం ఏదైనా డిఫాల్ట్‌లను రీసెట్ చేయడం ద్వారా ప్రారంభించండి:

body {
background: white;
color: black;
}

మీరు ఏదైనా నేపథ్య చిత్రాలను ముద్రించకుండా నిరోధించాలనుకోవచ్చు -ఇవి అలంకారంగా ఉండాలి మరియు అందువల్ల, మీ కంటెంట్‌లో అవసరమైన భాగం కాదు:

* {
background-image: none !important;
}

సంబంధిత: CSS లో నేపథ్య చిత్రాన్ని ఎలా సెట్ చేయాలి

ఆన్‌లైన్‌లో ఏదైనా వెబ్‌సైట్ నుండి వీడియోలను డౌన్‌లోడ్ చేయండి

నియంత్రణలను నియంత్రించడం

ముద్రణకు సంబంధించి పరిగణించవలసిన మరో స్పష్టమైన అంశం పేజీ మార్జిన్. మార్జిన్ పరిమాణాన్ని సెట్ చేయడానికి CSS ఒక మార్గాన్ని అందిస్తున్నప్పటికీ, మీ బ్రౌజర్ మరియు ప్రింటర్ కూడా మార్జిన్ సెట్టింగులను ప్రభావితం చేయగలవని మీరు గుర్తుంచుకోవాలి.

ఉదాహరణకు, Chrome యొక్క ప్రింట్ డైలాగ్‌లో, మార్జిన్ సెట్టింగ్‌తో సహా విలువలు ఉన్నాయి ఏదీ లేదు మరియు ఆచారం ఇది CSS ద్వారా పేర్కొన్న దేనినైనా భర్తీ చేస్తుంది:

ఈ కారణంగా, పబ్లిక్ వెబ్‌పేజీలలో మార్జిన్ నిర్ణయాలను రీడర్‌కు వదిలివేయమని సిఫార్సు చేయబడింది. అయితే, వ్యక్తిగత ఉపయోగం కోసం లేదా డిఫాల్ట్ లేఅవుట్‌ను సృష్టించడం కోసం, CSS ద్వారా ప్రింట్ మార్జిన్‌లను సెట్ చేయడం సముచితం. ది @పేజీ నియమం మార్జిన్‌లను సెట్ చేయడానికి అనుమతిస్తుంది, మరియు ఈ క్రింది విధంగా ఉపయోగించాలి:

@page {
margin: 2cm;
}

CSS మరింత అధునాతన ముద్రణ లేఅవుట్‌లకు సామర్ధ్యాన్ని కలిగి ఉంది, అంటే పేజీ బేసి-సంఖ్య కలిగినది (కుడి), సరి-సంఖ్య (ఎడమ) లేదా కవర్ పేజీ అనే దాని ప్రకారం మార్జిన్‌ను మార్చడం వంటివి.

విండోస్ ఈ నెట్‌వర్క్ ప్రాక్సీ సెట్టింగ్‌లు విండోస్ 7 ను స్వయంచాలకంగా గుర్తించలేకపోయాయి

దురదృష్టవశాత్తూ, దీనికి పేలవమైన మద్దతు ఉంది -ముఖ్యంగా కవర్ పేజీ ఎంపిక -కానీ దీనిని కొద్దిపాటి వరకు ఉపయోగించవచ్చు. కింది శైలులు వెన్నెముక కంటే బయటి పేజీ అంచున పైభాగం కంటే కొంచెం పెద్ద దిగువ అంచులతో మరియు కొంచెం పెద్ద అంచులతో పేజీలను ఉత్పత్తి చేస్తాయి:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

అసంబద్ధమైన కంటెంట్‌ను దాచడం

మీ డాక్యుమెంట్ యొక్క ప్రింట్ వెర్షన్‌కు అన్ని కంటెంట్‌లు సరిపోవు. మీ పేజీలో బ్యానర్ నావిగేషన్, ప్రకటనలు లేదా సైడ్‌బార్ ఉంటే, మీరు ప్రింట్ వెర్షన్‌లో ఆ వివరాలు కనిపించకుండా నిరోధించవచ్చు, ఉదాహరణకు:

#contents, div.ad { display: none; }

ప్రింటెడ్ మెటీరియల్‌లో హైపర్‌లింక్‌లు స్పష్టంగా సంబంధితంగా ఉండవు, కాబట్టి మీరు వాటిని చుట్టుపక్కల టెక్స్ట్ నుండి వేరు చేసే స్టైల్స్‌ని తీసివేయవచ్చు:

a { text-decoration: none; color: inherit; }

ఏదేమైనా, రీడర్‌లు అసలు URL లకు యాక్సెస్‌ని కలిగి ఉండాలని మీరు ఇంకా కోరుకోవచ్చు, మరియు లింక్డ్ టెక్స్ట్ తర్వాత వాటిని ఆటోమేటిక్‌గా ఇన్సర్ట్ చేయడమే సూటిగా పరిష్కారం:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

ఈ CSS కింది ఫలితాలను అందిస్తుంది:

a [href]: తర్వాత తర్వాత ప్రత్యేకంగా స్థానాన్ని లక్ష్యంగా చేసుకుంటుంది ( : తర్వాత ) ప్రతి లింక్ ఎలిమెంట్ ( కు ) వాస్తవానికి ఒక URL ఉంది ( [href] ). ది విషయము డిక్లరేషన్ ఇక్కడ విలువను చొప్పించింది href బ్రాకెట్ల మధ్య లక్షణం. ఉత్పత్తి చేయబడిన కంటెంట్ యొక్క ప్రదర్శనను నియంత్రించడానికి ఇతర శైలి నియమాలు వర్తించవచ్చని గమనించండి.

పేజీ విరామాలను నిర్వహించడం

ఏకాంత కంటెంట్‌ని వదిలివేయడం లేదా మధ్యలో వికారంగా విచ్ఛిన్నం చేయడం ద్వారా పేజీ విరామాలను నివారించడానికి, పేజీ బ్రేక్ లక్షణాలను ఉపయోగించుకోండి: పేజీ బ్రేక్-ముందు , పేజీ బ్రేక్ తర్వాత మరియు పేజీ బ్రేక్-లోపల . ఉదాహరణకి:

table { page-break-inside: avoid; }

పట్టికలు బహుళ పేజీలను విస్తరించకుండా ఉండటానికి ఇది సహాయపడుతుంది, ఒకే పేజీ కంటే ఏదీ పొడవుగా ఉండదు. అదేవిధంగా:

h1, h2 { page-break-before: always; }

అంటే అలాంటి శీర్షికలు ఎల్లప్పుడూ కొత్త పేజీని ప్రారంభిస్తాయి. మీరు మీ పేజీ యొక్క h1 ని h2 తో వెంటనే అనుసరిస్తే అది సమస్యలకు కారణం కావచ్చు, అయినప్పటికీ, h1 దాని స్వంత పేజీలో ముగుస్తుంది. దీనిని నివారించడానికి, నిర్దిష్ట ఉదాహరణను లక్ష్యంగా చేసుకున్న సెలెక్టర్‌ని ఉపయోగించి పేజీ విరామాన్ని రద్దు చేయండి, ఉదాహరణకు:

ఫైర్వాల్ విండోస్ 10 ద్వారా ప్రోగ్రామ్‌ని ఎలా అనుమతించాలి
h1 + h2 { page-break-before: avoid; }

ప్రింట్ స్టైల్స్ చూస్తున్నారు

అన్ని సందర్భాల్లో, మీ బ్రౌజర్ మరియు ఆపరేటింగ్ సిస్టమ్ ప్రింట్ ప్రివ్యూ ఫీచర్‌ని అందించాలి, తరచుగా స్టాండర్డ్ ప్రింట్ డైలాగ్‌లో భాగంగా.

Chrome బ్రౌజర్ డెవలపర్ టూల్స్ ద్వారా మీ ప్రింట్ స్టైల్‌లను చెక్ చేయడం మరియు డీబగ్ చేయడం మరింత సౌకర్యవంతంగా చేస్తుంది, ఈ ఉదాహరణ ద్వారా CV ని ప్రింట్ స్టైల్ షీట్‌తో చూపిస్తుంది. ముందుగా, ప్రధాన మెనూని తెరిచి, ఎంచుకోండి మరిన్ని సాధనాలు తరువాత డెవలపర్ ఉపకరణాలు ఎంపిక:

కనిపించే కొత్త ప్యానెల్ నుండి, ఎంచుకోండి మెను , అప్పుడు మరిన్ని సాధనాలు , తరువాత రెండరింగ్ :

అప్పుడు క్రిందికి స్క్రోల్ చేయండి CSS మీడియా రకాన్ని అనుకరించండి అమరిక. మీ డాక్యుమెంట్ యొక్క ప్రింట్ మరియు స్క్రీన్ వీక్షణల మధ్య టోగుల్ చేయడానికి డ్రాప్‌డౌన్ మిమ్మల్ని అనుమతిస్తుంది:

ప్రింట్ స్టైల్‌షీట్‌ను అనుకరించేటప్పుడు, ప్రమాణం స్టైల్స్ బ్రౌజర్ ప్రత్యక్ష శైలి నియమాలను తనిఖీ చేయడానికి మరియు సవరించడానికి అందుబాటులో ఉంది. స్క్రీన్‌పై ప్రింట్ అవుట్‌పుట్‌ను అనుకరించడం ఇప్పటికీ 100% ఖచ్చితమైనది కాదని గుర్తుంచుకోండి. కాగితం పరిమాణం గురించి బ్రౌజర్‌కు ఏమీ తెలియదు, మరియు @పేజీ నియమాన్ని అనుకరించలేము.

ఒక PDF కి ముద్రించడం

ఆధునిక ఆపరేటింగ్ సిస్టమ్స్ యొక్క సులభ లక్షణం PDF ఫైల్‌కు ప్రింట్ చేయగల సామర్థ్యం. వాస్తవానికి, మీరు ముద్రించగలిగేది ఏదైనా ఒక PDF ఫైల్‌కి పంపబడుతుంది -ఎందుకంటే PDF ఫైల్ ప్రింటెడ్ డాక్యుమెంట్‌ని సూచిస్తుంది కాబట్టి, ఆశ్చర్యం లేదు.

ఇది HTML, ప్రింట్ స్టైల్‌షీట్‌తో కలిపి, అటాచ్‌మెంట్‌గా మరియు ప్రింట్‌గా పంపగల అధిక-నాణ్యత పత్రాన్ని రూపొందించడానికి ఒక అద్భుతమైన సాధనం.

మీ CV నుండి వంటకాలు లేదా ఈవెంట్ ప్రకటనల వరకు ఏదైనా సహా నాణ్యమైన డాక్యుమెంట్‌లను సృష్టించడానికి మీరు ప్రింట్ స్టైల్‌షీట్‌ను ఉపయోగించవచ్చు. వెబ్ పేజీలు సాధారణంగా అగ్లీగా కనిపిస్తాయి మరియు ముద్రించినప్పుడు అవాంఛిత వివరాలను కలిగి ఉంటాయి, కానీ తక్కువ సంఖ్యలో స్టైల్ సర్దుబాటు ముద్రణ ఫలితాలను నాటకీయంగా మెరుగుపరుస్తుంది. తుది ఫలితాలను PDF గా సేవ్ చేయడం అనేది ఆకర్షణీయమైన, ప్రొఫెషనల్ డాక్యుమెంట్‌లను సృష్టించడానికి త్వరిత మార్గం.

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ మైక్రోసాఫ్ట్ ఎడ్జ్‌తో వెబ్ పేజీలను PDF కి ప్రింట్ చేయడం ఎలా

మీరు తర్వాత సేవ్ చేయాలనుకుంటున్న ఆసక్తికరమైన కథనాన్ని మీరు ఎప్పుడైనా చూశారా? సరే, మీరు మూడు సులభ దశల్లో ఎడ్జ్‌తో PDF గా సేవ్ చేయవచ్చు.

తదుపరి చదవండి
సంబంధిత అంశాలు
  • ప్రోగ్రామింగ్
  • ప్రింటింగ్
  • CSS
రచయిత గురుంచి బాబీ జాక్(58 కథనాలు ప్రచురించబడ్డాయి)

రెండు దశాబ్దాల పాటు సాఫ్ట్‌వేర్ డెవలపర్‌గా పనిచేసిన బాబీ ఒక టెక్నాలజీ astత్సాహికుడు. అతను గేమింగ్‌పై మక్కువ కలిగి, స్విచ్ ప్లేయర్ మ్యాగజైన్‌లో రివ్యూస్ ఎడిటర్‌గా పని చేస్తున్నాడు మరియు ఆన్‌లైన్ పబ్లిషింగ్ & వెబ్ డెవలప్‌మెంట్ యొక్క అన్ని అంశాలలో మునిగిపోయాడు.

బాబీ జాక్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి