பெரிய HTML அட்டவணையை அச்சிடும்போது பக்க முறிவுகளை எவ்வாறு கையாள்வது (8)

பல வரிசைகள் கொண்ட HTML அட்டவணையை அச்சிட வேண்டிய திட்டம் என்னிடம் உள்ளது.

பல பக்கங்களில் அட்டவணை எவ்வாறு அச்சிடப்படுகிறது என்பதுதான் எனது பிரச்சனை. இது சில சமயங்களில் ஒரு வரியை பாதியாக வெட்டி, ஒரு பாதி பக்கத்தின் விளிம்பில் இருப்பதால், அடுத்த பக்கத்தின் மேல் பகுதியில் அச்சிடப்பட்டிருப்பதால், அதை படிக்க முடியாதபடி செய்கிறது.

நான் நினைக்கும் ஒரே நம்பத்தகுந்த தீர்வு, அட்டவணைக்கு பதிலாக சிக்கலான DIVகளைப் பயன்படுத்துவதும், தேவைப்பட்டால் பக்க உடைப்புகளை கட்டாயப்படுத்துவதும் ஆகும்... ஆனால் எல்லா மாற்றங்களையும் பார்க்கும் முன் நான் இங்கு முன்பே கேட்கலாம் என்று நினைத்தேன்.

இந்த CSS பண்புகளைப் பயன்படுத்தவும்:

பக்கம்-பிரேக்-பின்-பேஜ்-பிரேக்-முன்

உதாரணத்திற்கு:

@மீடியா அச்சு (அட்டவணை (பக்கம்-பிரேக்-பிறகு:எப்போதும்) ) ....

இங்குள்ள பதில்கள் எதுவும் Chrome இல் எனக்கு வேலை செய்யவில்லை. GitHub இல் உள்ள AAverin இதற்கான பயனுள்ள ஜாவாஸ்கிரிப்டை உருவாக்கியது, அது எனக்கு வேலை செய்தது:

உங்கள் குறியீட்டில் js ஐச் சேர்த்து, டேபிளில் ஒரு splitForPrint வகுப்பைச் சேர்க்கவும், அது அட்டவணையை பல பக்கங்களாக நேர்த்தியாகப் பிரித்து, ஒவ்வொரு பக்கத்திற்கும் ஒரு அட்டவணைத் தலைப்பைச் சேர்க்கும்.

குறிப்பு: பக்க இடைவெளியைப் பயன்படுத்தும் போது: எப்போதும் ஒரு குறிச்சொல்லுக்காக, அது அட்டவணையின் கடைசி பிட்டுக்குப் பிறகு ஒரு பக்க இடைவெளியை உருவாக்குகிறது, ஒவ்வொரு முறையும் முற்றிலும் வெற்றுப் பக்கத்தை உருவாக்குகிறது! இதை சரிசெய்ய, அதை பேஜ்-பிரேக்-ஆஃப்டர்: ஆட்டோ என மாற்றவும். இது சரியாக உடைந்து கூடுதல் வெற்றுப் பக்கத்தை உருவாக்காது.

@மீடியா அச்சு (அட்டவணை (பக்கம்-பிரேக்-ஆப்டர்:ஆட்டோ) டிஆர் (பக்கம்-பிரேக்-உள்ளே:தவிர்க்கவும்; பக்கம்-பிரேக்-பின்: ஆட்டோ) td (பக்கம்-பிரேக்-உள்ளே:தவிர்க்கவும்; பக்கம்-பிரேக்-பிறகு: ஆட்டோ ) thead (காட்சி: அட்டவணை-தலைப்பு-குழு) tfoot (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு) ) ....

ஏற்றுக்கொள்ளப்பட்ட பதில் எல்லா உலாவிகளிலும் எனக்கு வேலை செய்யவில்லை, ஆனால் css ஐப் பின்பற்றுவது எனக்கு வேலை செய்தது:

Tr (காட்சி: அட்டவணை-வரிசை-குழு; பக்கம்-முறிவு-உள்ளே: தவிர்க்கவும்; பக்கம்-முறிவு-பின்: தானியங்கு; )

HTML அமைப்புஇருந்தது:

...

என் விஷயத்தில், thead tr உடன் சில கூடுதல் சிக்கல்கள் இருந்தன, ஆனால் இது அட்டவணை வரிசைக் கட்டுப்பாட்டின் அசல் சிக்கலைத் தீர்த்தது.

தலைப்புச் சிக்கல்கள் காரணமாக நான் முடித்தேன்:

#theTable td * ( பக்கம் உடைப்பு உள்ளே: தவிர்க்கவும்; )

இது வரிசைகள் உடைவதைத் தடுக்கவில்லை; ஒவ்வொரு கலத்தின் உள்ளடக்கங்கள் மட்டுமே.

@vicenteherrera வின் அணுகுமுறையுடன், சில மாற்றங்களுடன் (பூட்ஸ்ட்ராப் 3 ஆக இருக்கலாம்) முடித்தேன்.

அடிப்படையில்; நாம் tr s அல்லது td களை உடைக்க முடியாது, ஏனெனில் அவை தொகுதி நிலை கூறுகள் அல்ல. எனவே ஒவ்வொன்றிலும் div களை செருகி, எங்கள் பக்க இடைவெளி-* விதிகளை div களுக்குப் பயன்படுத்துகிறோம். இரண்டாவதாக, எந்தவொரு ஸ்டைலிங் கலைப்பொருட்களையும் ஈடுசெய்ய, இந்த ஒவ்வொரு பகுதியின் மேற்புறத்திலும் சில திணிப்புகளைச் சேர்க்கிறோம்.

@media print ( /* tr"s ஐ பாதியாக */ th div, td div (மார்ஜின்-டாப்:-8px; திணிப்பு-மேல்: 8px; பக்கம்-பிரேக்-உள்ளே: தவிர்க்கவும்; ) ) $(ஆவணம்) தயார். (function())( // ஒவ்வொரு tr மற்றும் td"s உள்ளடக்கத்தையும் ஒரு div க்குள் மடிக்கவும் // (todo: லாஜிக்கை சேர் அதனால் அச்சிடும்போது மட்டுமே இதைச் செய்வோம்) $("table tbody th, table tbody td").wrapInner(" ");))

அறிமுகப்படுத்தப்பட்ட சில நடுக்கங்களுக்கு ஈடுசெய்ய, சேர்த்தல்களில் திருத்தங்கள் மற்றும் சரிசெய்தல் அவசியம் (பூட்ஸ்ட்ராப்பில் இருந்து, நான் கருதுகிறேன்). இந்தக் கேள்விக்கான மற்ற பதில்களில் இருந்து நான் ஒரு புதிய தீர்வை வழங்குகிறேனா என்று எனக்குத் தெரியவில்லை, ஆனால் அது யாருக்காவது உதவக்கூடும்.

நான் சமீபத்தில் இந்த சிக்கலை ஒரு நல்ல தீர்வுடன் தீர்த்தேன்.

AvoidBreak (எல்லை: 2px திட; பக்கம்-உடைப்பு-உள்ளே: தவிர்க்கவும்; )

செயல்பாடு அச்சு())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

ஒரு வசீகரம் போல் வேலை செய்கிறது!

நான் பல தீர்வுகளை சோதித்தேன், எதுவும் சரியாக வேலை செய்யவில்லை.

எனவே நான் ஒரு சிறிய தந்திரத்தை முயற்சித்தேன், அது வேலை செய்கிறது:

பாணியுடன் tfoot: நிலை: நிலையான; கீழே: 0px; நிலை: நிலையான; கீழே: 0px; கடைசி பக்கத்தின் கீழே வைக்கப்பட்டுள்ளது, ஆனால் அடிக்குறிப்பு மிக அதிகமாக இருந்தால், அது அட்டவணை உள்ளடக்கத்தை ஒன்றுடன் ஒன்று சேர்க்கிறது.

tfoot மட்டும் உடன்: காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; ஒன்றுடன் ஒன்று இல்லை, ஆனால் கடைசி பக்கத்தின் கீழே இல்லை...

இரண்டு அடி வைப்போம்:

TFOOT.placer (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; உயரம்: 130px; ) TFOOT.contenter (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; நிலை: நிலையானது; கீழே: 0px; உயரம்: 130px; ) உங்கள் நீண்ட உரை அல்லது உயர் படம் இங்கே

ஒன்று கடைசி அல்லாத பக்கங்களிலும் மற்றொன்று உங்கள் தனிப்பட்ட அடிக்குறிப்பிலும் இடம் ஒதுக்குகிறது.

சோதனை அட்டவணை ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

தலைப்பு

குறிப்புகள்

எக்ஸ்

எக்ஸ்

எக்ஸ்

பெரிய HTML அட்டவணையை அச்சிடும்போது பக்க முறிவுகளை எவ்வாறு கையாள்வது (8)

பல வரிசைகள் கொண்ட HTML அட்டவணையை அச்சிட வேண்டிய திட்டம் என்னிடம் உள்ளது.

பல பக்கங்களில் அட்டவணை எவ்வாறு அச்சிடப்படுகிறது என்பதுதான் எனது பிரச்சனை. இது சில சமயங்களில் ஒரு வரியை பாதியாக வெட்டி, ஒரு பாதி பக்கத்தின் விளிம்பில் இருப்பதால், அடுத்த பக்கத்தின் மேல் பகுதியில் அச்சிடப்பட்டிருப்பதால், அதை படிக்க முடியாதபடி செய்கிறது.

நான் நினைக்கும் ஒரே நம்பத்தகுந்த தீர்வு, அட்டவணைக்கு பதிலாக சிக்கலான DIVகளைப் பயன்படுத்துவதும், தேவைப்பட்டால் பக்க உடைப்புகளை கட்டாயப்படுத்துவதும் ஆகும்... ஆனால் எல்லா மாற்றங்களையும் பார்க்கும் முன் நான் இங்கு முன்பே கேட்கலாம் என்று நினைத்தேன்.

இந்த CSS பண்புகளைப் பயன்படுத்தவும்:

பக்கம்-பிரேக்-பின்-பேஜ்-பிரேக்-முன்

உதாரணத்திற்கு:

@மீடியா அச்சு (அட்டவணை (பக்கம்-பிரேக்-பிறகு:எப்போதும்) ) ....

இங்குள்ள பதில்கள் எதுவும் Chrome இல் எனக்கு வேலை செய்யவில்லை. GitHub இல் உள்ள AAverin இதற்கான பயனுள்ள ஜாவாஸ்கிரிப்டை உருவாக்கியது, அது எனக்கு வேலை செய்தது:

உங்கள் குறியீட்டில் js ஐச் சேர்த்து, டேபிளில் ஒரு splitForPrint வகுப்பைச் சேர்க்கவும், அது அட்டவணையை பல பக்கங்களாக நேர்த்தியாகப் பிரித்து, ஒவ்வொரு பக்கத்திற்கும் ஒரு அட்டவணைத் தலைப்பைச் சேர்க்கும்.

குறிப்பு: பக்க இடைவெளியைப் பயன்படுத்தும் போது: எப்போதும் ஒரு குறிச்சொல்லுக்காக, அது அட்டவணையின் கடைசி பிட்டுக்குப் பிறகு ஒரு பக்க இடைவெளியை உருவாக்குகிறது, ஒவ்வொரு முறையும் முற்றிலும் வெற்றுப் பக்கத்தை உருவாக்குகிறது! இதை சரிசெய்ய, அதை பேஜ்-பிரேக்-ஆஃப்டர்: ஆட்டோ என மாற்றவும். இது சரியாக உடைந்து கூடுதல் வெற்றுப் பக்கத்தை உருவாக்காது.

@மீடியா அச்சு (அட்டவணை (பக்கம்-பிரேக்-ஆப்டர்:ஆட்டோ) டிஆர் (பக்கம்-பிரேக்-உள்ளே:தவிர்க்கவும்; பக்கம்-பிரேக்-பின்: ஆட்டோ) td (பக்கம்-பிரேக்-உள்ளே:தவிர்க்கவும்; பக்கம்-பிரேக்-பிறகு: ஆட்டோ ) thead (காட்சி: அட்டவணை-தலைப்பு-குழு) tfoot (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு) ) ....

ஏற்றுக்கொள்ளப்பட்ட பதில் எல்லா உலாவிகளிலும் எனக்கு வேலை செய்யவில்லை, ஆனால் css ஐப் பின்பற்றுவது எனக்கு வேலை செய்தது:

Tr (காட்சி: அட்டவணை-வரிசை-குழு; பக்கம்-முறிவு-உள்ளே: தவிர்க்கவும்; பக்கம்-முறிவு-பின்: தானியங்கு; )

html அமைப்பு:

...

என் விஷயத்தில், thead tr உடன் சில கூடுதல் சிக்கல்கள் இருந்தன, ஆனால் இது அட்டவணை வரிசைக் கட்டுப்பாட்டின் அசல் சிக்கலைத் தீர்த்தது.

தலைப்புச் சிக்கல்கள் காரணமாக நான் முடித்தேன்:

#theTable td * ( பக்கம் உடைப்பு உள்ளே: தவிர்க்கவும்; )

இது வரிசைகள் உடைவதைத் தடுக்கவில்லை; ஒவ்வொரு கலத்தின் உள்ளடக்கங்கள் மட்டுமே.

@vicenteherrera வின் அணுகுமுறையுடன், சில மாற்றங்களுடன் (பூட்ஸ்ட்ராப் 3 ஆக இருக்கலாம்) முடித்தேன்.

அடிப்படையில்; நாம் tr s அல்லது td களை உடைக்க முடியாது, ஏனெனில் அவை தொகுதி நிலை கூறுகள் அல்ல. எனவே ஒவ்வொன்றிலும் div களை செருகி, எங்கள் பக்க இடைவெளி-* விதிகளை div களுக்குப் பயன்படுத்துகிறோம். இரண்டாவதாக, எந்தவொரு ஸ்டைலிங் கலைப்பொருட்களையும் ஈடுசெய்ய, இந்த ஒவ்வொரு பகுதியின் மேற்புறத்திலும் சில திணிப்புகளைச் சேர்க்கிறோம்.

@media print ( /* tr"s ஐ பாதியாக */ th div, td div (மார்ஜின்-டாப்:-8px; திணிப்பு-மேல்: 8px; பக்கம்-பிரேக்-உள்ளே: தவிர்க்கவும்; ) ) $(ஆவணம்) தயார். (function())( // ஒவ்வொரு tr மற்றும் td"s உள்ளடக்கத்தையும் ஒரு div க்குள் மடிக்கவும் // (todo: லாஜிக்கை சேர் அதனால் அச்சிடும்போது மட்டுமே இதைச் செய்வோம்) $("table tbody th, table tbody td").wrapInner(" ");))

அறிமுகப்படுத்தப்பட்ட சில நடுக்கங்களுக்கு ஈடுசெய்ய, சேர்த்தல்களில் திருத்தங்கள் மற்றும் சரிசெய்தல் அவசியம் (பூட்ஸ்ட்ராப்பில் இருந்து, நான் கருதுகிறேன்). இந்தக் கேள்விக்கான மற்ற பதில்களில் இருந்து நான் ஒரு புதிய தீர்வை வழங்குகிறேனா என்று எனக்குத் தெரியவில்லை, ஆனால் அது யாருக்காவது உதவக்கூடும்.

நான் சமீபத்தில் இந்த சிக்கலை ஒரு நல்ல தீர்வுடன் தீர்த்தேன்.

AvoidBreak (எல்லை: 2px திட; பக்கம்-உடைப்பு-உள்ளே: தவிர்க்கவும்; )

செயல்பாடு அச்சு())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

ஒரு வசீகரம் போல் வேலை செய்கிறது!

நான் பல தீர்வுகளை சோதித்தேன், எதுவும் சரியாக வேலை செய்யவில்லை.

எனவே நான் ஒரு சிறிய தந்திரத்தை முயற்சித்தேன், அது வேலை செய்கிறது:

பாணியுடன் tfoot: நிலை: நிலையான; கீழே: 0px; நிலை: நிலையான; கீழே: 0px; கடைசி பக்கத்தின் கீழே வைக்கப்பட்டுள்ளது, ஆனால் அடிக்குறிப்பு மிக அதிகமாக இருந்தால், அது அட்டவணை உள்ளடக்கத்தை ஒன்றுடன் ஒன்று சேர்க்கிறது.

tfoot மட்டும் உடன்: காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; ஒன்றுடன் ஒன்று இல்லை, ஆனால் கடைசி பக்கத்தின் கீழே இல்லை...

இரண்டு அடி வைப்போம்:

TFOOT.placer (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; உயரம்: 130px; ) TFOOT.contenter (காட்சி: அட்டவணை-அடிக்குறிப்பு-குழு; நிலை: நிலையானது; கீழே: 0px; உயரம்: 130px; ) உங்கள் நீண்ட உரை அல்லது உயர் படம் இங்கே

ஒன்று கடைசி அல்லாத பக்கங்களிலும் மற்றொன்று உங்கள் தனிப்பட்ட அடிக்குறிப்பிலும் இடம் ஒதுக்குகிறது.

சோதனை அட்டவணை ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

தலைப்பு

குறிப்புகள்

எக்ஸ்

எக்ஸ்

எக்ஸ்

இந்த ட்வீட் என்னை கவர்ந்தது. நான் அச்சிடுவதற்காக இணையப் பக்கங்களை மேம்படுத்தியபோது அல்லது அவை அச்சுப்பொறியில் எவ்வாறு வெளியிடப்படுகின்றன என்பதைச் சரிபார்த்தபோது என்னால் இனி நினைவில் இருக்க முடியாது என்பதை நான் திடீரென்று உணர்ந்தேன்.

இணைய வளர்ச்சியின் முக்கிய கவனம் மின்னணு பதிப்புகள்தளங்கள். பக்கங்கள் பல உலாவிகளில் சரிபார்க்கப்பட வேண்டும், வெவ்வேறு சாளர அளவுகளில் சோதிக்கப்பட வேண்டும்... பிரிண்டர்களைப் பற்றி யார் கவலைப்படுகிறார்கள்? அல்லது நான் அச்சு பாணிகளை மறந்துவிட்டேன், ஏனென்றால் பக்கங்களின் காகித நகல்களை நான் அரிதாகவே உருவாக்குகிறேன். அது எப்படியிருந்தாலும், நிலைமையை அவசரமாக சரிசெய்ய வேண்டும் என்று நான் உணர்ந்தேன்.

இணையப் பக்கத்தின் அச்சிடப்பட்ட பதிப்பு மின்னணு பதிப்பைப் போலவே இருப்பதற்கும் அதே உரிமையைக் கொண்டுள்ளது. மேலும், எங்கள் பொருட்களை முடிந்தவரை அணுகக்கூடியதாக மாற்ற முயற்சித்தால், காகித ஊடகத்தை நாம் புறக்கணிக்கக்கூடாது. கூடுதலாக, பயனர்கள் மற்றும் அவர்களின் நடத்தை பற்றிய அனுமானங்களை நீங்கள் செய்யக்கூடாது. மக்கள் இன்னும் அச்சுப்பொறிகளில் இணையப் பக்கங்களை அச்சிடுகிறார்கள். கட்டுரைகள் அல்லது வலைப்பதிவு இடுகைகள், சமையல் குறிப்புகளுடன் கூடிய பக்கங்கள், தொடர்புத் தகவல், திசைகள் அல்லது பட்டியல்களைப் பற்றி யோசித்துப் பாருங்கள். விரைவில் அல்லது பின்னர், நீங்கள் இணையத்தில் இடுகையிட்டதை யாராவது அச்சிட முயற்சிப்பார்கள்.

இதைப் பற்றி "உள்ளடக்கிய வடிவமைப்பு வடிவங்கள்" புத்தகத்தின் ஆசிரியர் ஹேடன் பிக்கரிங் கூறுகிறார்: "நான் நீண்ட காலமாக வீட்டு அச்சுப்பொறிகளைப் பயன்படுத்தவில்லை. இங்கே முக்கிய விஷயம் என்னவென்றால், நீங்கள் அச்சிட ஆரம்பித்து பத்து நிமிடங்களுக்குப் பிறகு அவை உடைந்துவிட்டதாக நான் உணர்கிறேன். ஆனால் நான் எல்லாம் இல்லை."

என்னைப் போலவே, நீங்களும் அச்சு பாணிகளில் போதுமான கவனம் செலுத்தவில்லை என்பதை நீங்கள் இப்போது உணர்ந்தால், எனது கதை உங்களுக்கு நன்றாகச் சேவை செய்து, உங்கள் நினைவாற்றலை விரைவாகப் புதுப்பிக்க உதவும் என்று நம்புகிறேன். அச்சுப்பொறிகளுக்கான இணையப் பக்கங்களை நீங்கள் ஒருபோதும் மேம்படுத்தவில்லை என்றால், எனது சிறிய பயனுள்ள CSS தந்திரங்களின் தொகுப்பு உங்களைத் தொடங்கும்.

1. CSS அச்சு பாணிகளைப் பயன்படுத்துதல் உங்கள் பக்கத்தில் அச்சு பாணிகளை இணைப்பதற்கான சிறந்த வழி, உங்கள் முக்கிய CSS கோப்பில் @media விதியை அறிவிப்பதாகும்.

உடல் (எழுத்து அளவு: 18px; ) @ மீடியா அச்சு ( /* அச்சு பாணிகள் இங்கே செல்லும் */ உடல் ( எழுத்துரு அளவு: 28px; ) )
மாற்றாக, நீங்கள் அச்சிடும் பாணியை ஒரு தனி கோப்பில் வைத்து அதை HTML இல் சேர்க்கலாம், ஆனால் இந்த அணுகுமுறையுடன் பக்கத்தை ஏற்றும் போது உங்களுக்கு கூடுதல் கோரிக்கை தேவைப்படும்.

2. சோதனை எப்படி மதிப்பிடுவது தோற்றம்இணையப் பக்கம் அச்சிடுவதற்கு தயாரா? ஒவ்வொரு பாணியில் மாற்றத்திற்குப் பிறகு அதை காகிதத்தில் வைப்பது இல்லை என்பது யாருக்கும் தெளிவாகத் தெரியும் சிறந்த முடிவு. அதிர்ஷ்டவசமாக, பக்கங்களின் அச்சிடப்பட்ட பதிப்புகளை "காகிதமற்ற" சரிபார்ப்புக்கு உலாவி திறன்கள் போதுமானவை.

உலாவியைப் பொறுத்து, நீங்கள் பக்கத்தை PDF க்கு ஏற்றுமதி செய்யலாம், செயல்பாட்டைப் பயன்படுத்தவும் முன்னோட்டஅல்லது இணைய உலாவியில் நேரடியாக பக்கத்தை பிழைத்திருத்தவும்.

பயர்பாக்ஸில் அச்சு பாணிகளை பிழைத்திருத்த, விசைப்பலகை குறுக்குவழி Shift + F2 ஐப் பயன்படுத்தி டெவலப்பர் பேனலைத் திறக்கவும் அல்லது டெவலப் → டெவலப்பர் பேனல் என்ற மெனு கட்டளையை இயக்கவும். உள்ளிடவும் கட்டளை வரிசாளரத்தின் கீழே அமைந்துள்ளது, பின்வருபவை: மீடியா எமுலேட் அச்சு , Enter ஐ அழுத்துவதன் மூலம் உள்ளீட்டை நிறைவு செய்கிறது. நீங்கள் பக்கத்தை மூடும் வரை அல்லது புதுப்பிக்கும் வரை செயலில் உள்ள தாவல் அதன் மீடியா வகையை அச்சிடுவது போல் செயல்படும்.

பயர்பாக்ஸில் எமுலேஷன் அச்சிடவும்

குரோமிலும் இதே போன்ற அம்சம் உள்ளது. டெவலப்பர் கருவிகளைத் திறக்கவும், அதற்காக, MacOS இல், நீங்கள் CMD + Opt + I, Windows இல் - Ctrl + Shift + I அல்லது மெனு கட்டளையை இயக்கலாம். கூடுதல் கருவிகள்→ டெவலப்பர் கருவிகள். அதன் பிறகு, ரெண்டர் பேனலைத் திறக்கவும். இதைச் செய்வதற்கான ஒரு வழி, கன்சோல் பேனலைக் கொண்டு வர Esc ஐ அழுத்தவும், பின்னர் ரெண்டரிங் பேனலைத் திறக்க மெனுவைப் பயன்படுத்தவும். ரெண்டரிங் பேனலில், எமுலேட் CSS மீடியா கொடியை அமைத்து, அச்சு என்பதைத் தேர்ந்தெடுக்கவும்.

Chrome இல் எமுலேஷன் அச்சிடுக

StackOverflow இல் இணையப் பக்கங்களின் அச்சிடப்பட்ட பதிப்புகளைச் சோதிப்பது பற்றி மேலும் படிக்கலாம்.

3. முழுமையான அளவீட்டு அலகுகள் பக்கங்களின் திரை பதிப்புகளுக்கு முழுமையான அளவீட்டு அலகுகள் மிகவும் பொருத்தமானவை அல்ல, ஆனால் அச்சிடுவதற்கு அவை உங்களுக்குத் தேவையானவை. அச்சிடும் பாணிகளில் இது முற்றிலும் பாதுகாப்பானது, மேலும், cm, mm, in, pt, அல்லது pc போன்ற முழுமையான அளவீட்டு அலகுகளைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.

பிரிவு (விளிம்பு-கீழ்: 2 செமீ;)

4. பக்க பண்புகள் அவற்றின் அளவு, நோக்குநிலை மற்றும் ஓரங்கள் போன்ற பக்க பண்புகளைக் கட்டுப்படுத்த @page விதியைப் பயன்படுத்தலாம். எல்லா அச்சிடப்பட்ட பக்கங்களும் ஒரே மாதிரியான விளிம்புகளைக் கொண்டிருக்க உங்களுக்குத் தேவைப்படும்போது இது மிகவும் எளிது.

@மீடியா அச்சு (@பக்கம் (விளிம்பு: 1 செமீ;) )
@page விதி என்பது பேஜ் செய்யப்பட்ட மீடியா தொகுதி தரநிலையின் ஒரு பகுதியாகும், இது அச்சிடுவதற்கு முதல் பக்கத்தைத் தேர்ந்தெடுப்பது, தனிப்பயனாக்குவது போன்ற பல அருமையான விஷயங்களை வழங்குகிறது. வெற்று பக்கங்கள், பக்கத்தின் மூலைகளில் உள்ள உறுப்புகளை நிலைப்படுத்துதல் மற்றும் . புத்தகங்களை அச்சிடுவதற்கு கூட இதைப் பயன்படுத்தலாம்.

5. பக்க முறிவுகளை நிர்வகித்தல், அச்சிடப்பட்ட தாள்கள், இணையப் பக்கங்களைப் போல் முடிவில்லாதவை என்பதால், இணையப் பக்கங்களின் உள்ளடக்கம் விரைவில் அல்லது பின்னர் ஒரு தாளில் உடைந்து அடுத்த தாளில் தொடர்கிறது. பக்க முறிவுகளைக் கட்டுப்படுத்த ஐந்து பண்புகள் உள்ளன: உறுப்புக்கு முன் பக்க முறிவு பக்கத்தின் தொடக்கத்தில் ஒரு உறுப்பு எப்போதும் தோன்ற வேண்டும் என நீங்கள் விரும்பினால், பக்க உடைப்புக்கு முன் பண்புகளைப் பயன்படுத்தி அதற்கு முன் ஒரு பக்க உடைப்பை கட்டாயப்படுத்தலாம்.

பிரிவு (பக்கம்-பிரேக்-முன்: எப்போதும்; )

▍உறுப்புக்குப் பிறகு பக்க முறிவு, ஒரு உறுப்புக்குப் பிறகு கட்டாயப் பக்க முறிவை அமைக்க பக்கம்-முறிவுக்குப் பின் பண்பு உங்களை அனுமதிக்கிறது. இந்த சொத்தைப் பயன்படுத்தி, நீங்கள் உடைப்பதைத் தடுக்கலாம்.

H2 ( பக்கம் உடைந்த பின்: எப்போதும்; )

▍உறுப்புக்குள் ஒரு பக்கத்தை உடைக்கவும், இரண்டு பக்கங்களுக்கு இடையில் ஒரு உறுப்பைப் பிரிப்பதைத் தவிர்க்க வேண்டுமென்றால், பக்க உடைப்பு-உள்ளே சொத்து மிகவும் பயனுள்ளதாக இருக்கும்.

உல் (பக்கம்-உள்ளே: தவிர்க்கவும்; )

▍மேல் மற்றும் கீழ் தொங்கும் கோடுகள் சில நேரங்களில் நீங்கள் பக்க இடைவெளிகளை கட்டாயப்படுத்த வேண்டிய அவசியமில்லை, ஆனால் பக்க எல்லைகளில் உள்ள பத்திகளின் வெளியீட்டை நீங்கள் கட்டுப்படுத்த வேண்டும்.

உதாரணமாக, தற்போதைய பக்கத்தில் உள்ள ஒரு பத்தியின் கடைசி வரி பொருந்தவில்லை என்றால், அந்தப் பத்தியின் கடைசி இரண்டு வரிகள் அடுத்த பக்கத்தில் அச்சிடப்படும். ஏனென்றால், இதைக் கட்டுப்படுத்தும் சொத்து (விதவைகள், அதாவது “மேல் தொங்கும் வரிசைகள்”) இயல்பாக 2 ஆக அமைக்கப்பட்டுள்ளது. இதை மாற்றலாம்.

பி (விதவைகள்: 4;)
மற்றொரு சூழ்நிலை ஏற்பட்டால், தற்போதைய பக்கத்தில் ஒரு பத்தியின் ஒரு வரி மட்டுமே பொருந்தினால், முழுப் பத்தியும் அடுத்த பக்கத்தில் அச்சிடப்படும். கீழ் தொங்கும் கோடுகளுக்கு (அனாதைகள்) பொறுப்பான சொத்து இயல்புநிலையாக 2 ஆக அமைக்கப்பட்டுள்ளது.

பி(அனாதைகள்: 3;)
மேலே உள்ள குறியீட்டின் முக்கிய அம்சம் என்னவென்றால், முழுப் பத்தியும் அடுத்த பக்கத்திற்கு வராமல் இருக்க, தற்போதைய பக்கத்தில் குறைந்தபட்சம் மூன்று வரிகளாவது பொருந்த வேண்டும்.

இதை நன்கு புரிந்து கொள்ள, CodePen ஐப் பயன்படுத்தி தயாரிக்கப்பட்ட உதாரணத்தைப் பாருங்கள். அதே எடுத்துக்காட்டின் பிழைத்திருத்த பதிப்பு இங்கே உள்ளது, இது சோதிக்க மிகவும் வசதியானது.

*, *:முன், *:பின், *:முதல்-எழுத்து, ப:முதல்-வரி, பிரிவு:முதல்-வரி, தொகுதி மேற்கோள்:முதல்-வரி, லி:முதல்-வரி (பின்னணி: வெளிப்படையானது !முக்கியம்; நிறம்: #000 !முக்கியம்; பெட்டி-நிழல்: எதுவுமில்லை !முக்கியம்; உரை-நிழல்: எதுவுமில்லை !முக்கியம்; )
மூலம், அச்சிடுவதற்கான CSS பாணிகள் சில விதிவிலக்குகளில் ஒன்றாகும்!முக்கியமான உத்தரவு முற்றிலும் இயல்பானது;)

7. தேவையற்ற உள்ளடக்கத்தை நீக்குதல் மை வீணாகாமல் இருக்க, பெரிய அழகான ஸ்லைடுகள், விளம்பரம், தள வழிசெலுத்தல் கருவிகள் மற்றும் பல போன்ற தேவையற்ற அனைத்தையும் பக்கத்தின் அச்சிடப்பட்ட பதிப்பிலிருந்து அகற்ற வேண்டும். தேவையற்ற கூறுகளுக்கு காட்சிப் பண்புகளை எதுவுமில்லை என அமைப்பதன் மூலம் இதைச் செய்யலாம். பக்கத்தின் முக்கிய உள்ளடக்கத்தை மட்டும் காண்பிப்பதும் மற்ற அனைத்தையும் மறைப்பதும் சரியாக இருப்பதை நீங்கள் கண்டறிவது மிகவும் சாத்தியம்:

உடல் > *:இல்லை(முதன்மை) (காட்சி: எதுவுமில்லை; )

8. இணைப்பு முகவரிகளைக் காண்பித்தல் இணைப்புகள், அவை பொதுவாக இணையப் பக்கங்களில் காணப்படுகின்றன, அவை அச்சிடப்படும் போது முற்றிலும் பயனற்றவை, ஆவணத்தின் காகித பதிப்பைப் படிப்பவர் அவர்கள் எங்கு செல்கிறார்களோ தெரியவில்லை.

இணைப்பு முகவரிகளை அவற்றின் உரை பிரதிநிதித்துவத்திற்குப் பிறகு காண்பிக்க, பின்வரும் பாணியைப் பயன்படுத்தவும்:

A:பிறகு ( உள்ளடக்கம்: " (" attr(href) ")"; )
நிச்சயமாக, இந்த அணுகுமுறையால், தேவையற்ற நிறைய விஷயங்கள் "புரிந்துகொள்ளப்படும்." எடுத்துக்காட்டாக, தொடர்புடைய இணைப்புகள், அச்சிடப்பட்ட பக்கத்தின் அதே தளத்தில் முழுமையான இணைப்புகள், ஆங்கர் இணைப்புகள் மற்றும் பல. அச்சிடப்பட்ட பக்கத்தை ஒழுங்கீனம் செய்யாமல் இருக்க, இது போன்ற ஒன்றைப் பயன்படுத்துவது நல்லது:

A:not():பிறகு ( உள்ளடக்கம்: " (" attr(href) ")"; )
இது பைத்தியம் போல் தெரிகிறது, நிச்சயமாக. எனவே நான் அர்த்தத்தை விளக்குகிறேன் இந்த விதியின்எளிய ஆங்கிலத்தில்: "http உடன் தொடங்கும் ஆனால் mywebsite.com ஐக் கொண்டிருக்காத பண்புக்கூறைக் கொண்ட ஒவ்வொரு இணைப்பிற்கும் அடுத்துள்ள href பண்புக்கூறின் மதிப்பைக் காட்டு."

9. சுருக்கங்களின் விளக்கம் உரையில் உள்ள சுருக்கங்கள் குறிச்சொல்லில் வைக்கப்பட வேண்டும், மேலும் அவற்றின் விளக்கங்கள் தலைப்பு பண்புக்கூறில் சேர்க்கப்பட வேண்டும். நீங்கள் சுருக்கங்களை இந்த வழியில் வடிவமைத்தால், அவற்றின் அர்த்தங்கள் அச்சிடப்பட்ட பக்கத்தில் காட்ட மிகவும் எளிதானது:

Abbr:பிறகு ( உள்ளடக்கம்: " (" attr(title) ")"; )

10. பின்னணியை கட்டாயமாக அச்சிடுதல் பொதுவாக உலாவிகள், அச்சிடுவதற்கு ஒரு பக்கத்தை உருவாக்கும் போது, ​​பின்புல வண்ணம் மற்றும் பின்னணி படங்கள், அவர்கள் இதை வெளிப்படையாகக் குறிப்பிடாவிட்டால். இருப்பினும், சில நேரங்களில் இவை அனைத்தும் அச்சிடப்பட வேண்டும். தரப்படுத்தப்படாத அச்சு-வண்ண-சரிசெய்தல் பண்பு இங்கே எங்களுக்கு உதவும், இது சில உலாவிகளுக்கான இயல்புநிலை அமைப்புகளை மேலெழுத அனுமதிக்கிறது.

தலைப்பு ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )

11. மீடியா வினவல்கள் கீழே உள்ளதைப் போன்ற மீடியா வினவல்களை நீங்கள் எழுதினால், CSS விதிகள் உள்ளதை நினைவில் கொள்ளுங்கள் இதே போன்ற கோரிக்கைகள்பக்கத்தின் அச்சிடப்பட்ட பதிப்பைப் பாதிக்காது.

@மீடியா திரை மற்றும் (குறைந்த அகலம்: 48எம்) ( /* திரை மட்டும் */ )
ஏன் இப்படி? விஷயம் என்னவென்றால், குறைந்தபட்ச அகல மதிப்பு 48em மற்றும் மீடியா வகை திரையாக இருந்தால் மட்டுமே CSS விதிகள் பயன்படுத்தப்படும். இந்த மீடியா வினவலில் இருந்து விடுபட்டால் முக்கிய வார்த்தைதிரை , பின்னர் அது குறைந்தபட்ச அகல மதிப்பால் மட்டுமே வரையறுக்கப்படும்.

@media (குறைந்த அகலம்: 48em) ( /* அனைத்து ஊடக வகைகளும் */ )

12. வரைபடங்களை அச்சிடுதல் Firefox மற்றும் Chrome இன் தற்போதைய பதிப்புகள் வரைபடங்களை அச்சிடலாம், ஆனால், எடுத்துக்காட்டாக, Safariயால் இதைச் செய்ய முடியாது. அட்டைகளை அச்சிடும்போது என்ன செய்வது? டைனமிக் வரைபடங்களுக்குப் பதிலாக நிலையான வரைபடங்களைப் பயன்படுத்துவது உலகளாவிய விருப்பங்களில் ஒன்றாகும்.

வரைபடம் (அகலம்: 400px; உயரம்: 300px; பின்னணி-படம்: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&m"); -வெப்கிட்-அச்சு-வண்ணத்தை-சரிசெய்தல்: துல்லியமானது; அச்சு-வண்ணம்-சரிசெய்தல்: துல்லியமானது; )

13. QR குறியீடுகள் முக்கியமான இணைப்புகளைக் கொண்ட QR குறியீடுகளை அச்சிடுவது இணையப் பக்கங்களின் காகிதப் பதிப்புகளின் பயன்பாட்டினை கணிசமாக மேம்படுத்தும். நீங்கள் காணக்கூடிய தி ஸ்மாஷிங் இதழின் ஒரு பகுதி இதோ பயனுள்ள குறிப்புகள்இந்த தீம் பற்றி. அவற்றில் ஒன்று, அச்சிடப்பட்ட பக்கங்களில் QR குறியீடு வடிவில் அவர்களின் முகவரிகளைச் சேர்ப்பது. இதன் விளைவாக, பயனர், உலாவியில் அச்சிடப்பட்ட பக்கத்தைத் திறக்க, அதன் முழு முகவரியை விசைப்பலகையில் தட்டச்சு செய்ய வேண்டியதில்லை.14. மேம்படுத்தப்படாத பக்கங்களை அச்சிடுவது பற்றி, இணையப் பக்கங்களை அச்சிடுதல் என்ற தலைப்பை ஆராய்ச்சி செய்யும் போது, ​​நான் கண்டுபிடித்தேன் பெரிய கருவி, இது அச்சிடுவதற்கு உகந்ததாக இல்லாத பக்கங்களை வசதியாகத் தயாரிக்க உங்களை அனுமதிக்கிறது. பிரிண்ட்லிமினேட்டரைப் பயன்படுத்துதல்