HTML-ஐ PDF ஆக மாற்றுவது காகிதத்தில் பார்ப்பதற்கு எளிதாகத் தோன்றலாம். நீங்கள் ஒரு நேர்த்தியான டெம்ப்ளேட்டை உருவாக்கி, அதில் உங்கள் தரவைச் சேர்த்து, இணையப் பக்கத்தைப் போலவே பிக்சல் வாரியாகத் துல்லியமாக இருக்கும் ஒரு ஆவணத்தை எதிர்பார்க்கிறீர்கள். ஆனால் உண்மையில், இந்தச் செயல்முறை பெரும்பாலும் கிராஷ்கள் (crashes), விடுபட்ட குறியீடுகள் (missing glyphs) மற்றும் காட்சி சிதைவுகள் (visual corruption) ஆகியவற்றிற்கு எதிரான ஒரு தினசரி போராட்டமாக மாறிவிடுகிறது. சமீபத்திய ஒரு திட்டத்தின் போது, மூன்று பிரச்சனைகள் மீண்டும் மீண்டும் தோன்றின: குறிப்பிட்ட SVG கிராபிக்ஸ்களைக் கையாளும் போது iText முற்றிலும் செயலிழந்துவிட்டது, எமோஜிகள் (emojis) வெற்று வெள்ளை சதுரங்களாக மறைந்துவிட்டன, மேலும் மென்மையான வெளிப்படையான பின்னணிகள் (transparent backgrounds) அடர்த்தியான கருப்புத் தொகுதிகளாக மாறிவிட்டன. ஒவ்வொரு தோல்விக்கும் ஒரு தனித்துவமான காரணம் இருந்தது, மேலும் மூன்றையும் சரிசெய்ய, PDF என்ஜின் (engine) உள்ளடக்கத்தைப் பார்ப்பதற்கு முன்பே, அந்தச் செயலி எவ்வாறு உள்ளடக்கத்தைத் தயார் செய்கிறது என்பதைப் பற்றி மறுபரிசீலனை செய்ய வேண்டியிருந்தது.
SVG செயல்முறையைச் சிதைக்கும் போது
வசதிக்காக iText ஒரு உள் SVG ரெண்டரருடன் (renderer) வருகிறது, ஆனால் அந்த ஒருங்கிணைப்பு ஒரு முக்கியமான பலவீனத்தை மறைத்து வைத்திருக்கிறது. ஒரு SVG சிக்கலான பாதைகள் (paths), கனமான CSS ஸ்டைலிங் அல்லது குறிப்பிட்ட ஆயத்தொலைவு மாற்றங்களைக் (coordinate transformations) கொண்டிருக்கும்போது, அதில் உள்ள பார்ஸர் (parser) ஒரு தெளிவான பிழையை (exception) மட்டும் காட்டிவிட்டு அடுத்த கட்டத்திற்குச் செல்லாது. அது முழுமையாகச் செயலிழந்துவிடும். இவை எச்சரிக்கையின்றி PDF உருவாக்கும் த்ரெட்டை (thread) அழித்துவிடும் முழுமையான சிஸ்டம் கிராஷ்கள் ஆகும், இதனால் உங்களுக்கு ஒரு முழுமையற்ற கோப்பும், வெக்டர் பார்ஸருக்குள் எங்கோ ஒரு இடத்தைக் காட்டும் ஸ்டாக் ட்ரேஸும் (stack trace) மட்டுமே மிஞ்சும்.
இதற்கு நம்பகமான தீர்வு, iText-ஐ SVG-ஐ ரெண்டர் செய்யச் சொல்வதை முற்றிலுமாக நிறுத்துவதாகும். அதற்குப் பதிலாக, அந்த வேலையைத் தனித்து இயங்கும் (standalone mode) Apache Batik-க்கு மாற்றவும். Batik அதே சிக்கலான பாதைகள் மற்றும் CSS விதிகளை அதே போன்ற உடையக்கூடிய தன்மை இன்றி கையாளும், மேலும் அதைத் தனித்துப் பிரித்து வைப்பது உங்கள் PDF என்ஜினை கிராபிக்ஸ் தொடர்பான நிலையற்ற தன்மையிலிருந்து பாதுகாக்கும். இதன் பணிப்பாய்வு (workflow) எளிமையானது: ஆவணத் தொகுப்பு தொடங்குவதற்கு முன், SVG-ஐ Batik மூலம் இயக்கி ஒரு PNG data URL-ஐ உருவாக்கவும். மூல வெக்டர் மார்க்கப்-க்குப் (raw vector markup) பதிலாக அந்த ராஸ்டர் படத்தை (raster image) iText-க்குள் அனுப்பவும். ஒரு பெரிய லைப்ரரிக்குள் (library) இணைக்கப்பட்டு மாற்ற முடியாத நிலையில் இருக்கும் ஒரு உள் ரெண்டரரை விட, தனித்து இயங்கும் Batik SVG விதிகளின்படி மிகத் துல்லியமாகச் செயல்படும். மேலும், இந்தத் தனிமைப்படுத்தல் காரணமாக, ஒரு தவறான கிராபிக்ஸ் முழு ஆவண மாற்றத்தையும் முடக்கிவிடாது.
உங்கள் வரைபடம் (chart) தொழில்முறைத் தரத்தில் இருக்குமா அல்லது ஒரு பிழை அறிக்கையைப் போல இருக்குமா என்பதை ஒரு சிறிய விஷயம் தீர்மானிக்கிறது. SVG தனது ஆயத்தொலைவு அமைப்பு (coordinate system) மற்றும் அளவிடுதல் முறையை (scaling behavior) வரையறுக்க viewBox பண்பை (attribute) நம்பியுள்ளது. உங்கள் மாற்றும் குறியீடு (conversion code) viewBox-ஐப் புறக்கணித்தால், ஒரு சரியான வரைபடம் கூட வாசிக்க முடியாத மிகச்சிறிய புள்ளியாகச் சுருங்கலாம் அல்லது சிதைந்த ஒரு குழப்பமாக நீளமாகத் தெரியலாம். அந்தப் பண்பை (attribute) வெளிப்படையாகப் பகுப்பாய்வு செய்து (parse), அந்த அளவுகளை உங்கள் வெளியீட்டு அளவிற்கு (output size) ஏற்றவாறு மாற்றவும். இந்தப் படிநிலையைத் தவிர்ப்பது, ரெண்டரிங் தரத்துடன் தொடர்பில்லாத, ஆனால் ஒரு ஆயத்தொலைவு அறிவிப்பு (coordinate declaration) இல்லாததால் ஏற்படும் லேஅவுட் (layout) சிக்கலைத் தீர்க்க பல மணிநேரங்களை வீணடிக்கும்.
கண்ணுக்குத் தெரியாத மை பிரச்சனை
எமோஜிகள் இருக்க வேண்டிய இடத்தில் காலியான சதுரங்கள் இருப்பது ஒரு எளிய உண்மையைக் கூறுகிறது: தற்போதைய எழுத்துருவிற்கு (font) அந்த மொழி தெரியாது. Helvetica மற்றும் பிற நிலையான PDF எழுத்துருக்கள் எமோஜிகளின் பரவலான பயன்பாட்டிற்கு முன்பே உருவாக்கப்பட்டவை. அவை எமோஜி Unicode வரம்புகளுக்கான குறியீடுகளைக் (glyphs) கொண்டிருக்கவில்லை, எனவே iText அந்த கோட் பாயிண்டுகளைக் (code points) காணும்போது எதையும் ரெண்டர் செய்யாமல் அடுத்த கட்டத்திற்குச் சென்றுவிடுகிறது. இதன் விளைவாக, சமூக உணர்வு அறிக்கைகள் (social sentiment reports) அல்லது பயனர் கருத்துப் பதிவுகள் (user feedback exports) சிதைந்ததைப் போலத் தோன்றும் வகையில், காலியான பெட்டிகள் நிறைந்த ஆவணம் உருவாகிறது.
இந்த இடைவெளியை நிரப்ப கிளையண்ட் இயங்குதளத்தை (client operating system) நீங்கள் நம்ப முடியாது. PDF-கள் அவற்றிற்கெனத் தனித்தனி எழுத்துரு வளங்களைக் (font resources) கொண்டுள்ளன, மேலும் உங்கள் உலாவியில் (browser) சரியாகத் தெரிவது, அந்த கோப்பு உங்கள் கணினியின் எழுத்துருக்களிலிருந்து பிரிக்கப்பட்டவுடன் அர்த்தமற்றதாகிவிடும். இதற்குத் தீர்வு, ஒரு தெளிவான எழுத்துரு வழித்தட அடுக்கை (font routing layer) உருவாக்குவதாகும். எமோஜி Unicode தொகுதிகளை உள்ளடக்கிய ஒற்றை நிறக் குறியீடுகளை (monochrome symbols) வழங்கும் Symbola போன்ற பிரத்யேக எமோஜித் திறன் கொண்ட எழுத்துருவை பதிவு செய்யவும். ஒரு கருப்பு-வெள்ளை இதயம் அல்லது எச்சரிக்கை சின்னம், வண்ணமயமான குறியீடுகளைப் போலத் துல்லியமாக இல்லாவிட்டாலும், அது பொருளைத் தெளிவாகத் தெரிவிக்கும். ஒரு காலியான செவ்வகம் தோல்வியைக் குறிக்கும். முழு வண்ண எமோஜி எழுத்துருக்களை PDF பார்வையாளர்களுக்குள் (viewers) சீராக ரெண்டர் செய்வது கடினமாகவே உள்ளது, மேலும் வண்ண ஆதரவைத் தேடிச் செல்வது பெரும்பாலும் தீர்வை விட அதிக இணக்கத்தன்மைப் (compatibility) பிரச்சனைகளையே ஏற்படுத்தும்.
iText வரிப் பிரிவின் (line breaking) மூலம் இரண்டாவது, இன்னும் மோசமான ஒரு பிரச்சனையை ஏற்படுத்துகிறது. இந்த லைப்ரரி எமோஜி சரோகேட் ஜோடிகளை (emoji surrogate pairs) தவறான எல்லையில் பிரிக்கக்கூடும், இதனால் ஒரு ஒற்றை எழுத்து இரண்டு செல்லாத பகுதிகளாகத் துண்டிக்கப்படும். அப்படி நடக்கும்போது, உரை ஓட்டம் (text stream) சிதைந்து, ஒரு குறியீடு இருக்க வேண்டிய இடத்தில் வாசிக்க முடியாத துண்டுகள் மிஞ்சும். இதைத் தடுக்க, சரோகேட் ஜோடிகளைக் கண்டறிந்து அவற்றை அணு அலகுகளாக (atomic units) கருதும் ஒரு தனிப்பயன் ISplitCharacter-ஐச் செயல்படுத்தவும். இது லேஅவுட் என்ஜின் எமோஜியின் நடுவே வரிப் பிரிவைச் சேர்ப்பதைத் தடுத்து, உரையின் முழுமையைப் பாதுகாக்கும்.
வெளிப்படைத்தன்மை கருப்பாக மாறும் போது
மென்மையான rgba பின்னணி அல்லது அடுக்குமுறை fill-opacity விளைவைக் கொண்ட ஒரு SVG உலாவியில் நேர்த்தியாகத் தெரியும். அதே மார்க்கப்-ஐ iText-க்குள் அளிக்கும்போது, அந்த வெளிப்படைத்தன்மை அடிக்கடி ஒரு அடர்த்தியான கருப்புச் சதுரமாக மாறிவிடுகிறது. இந்த என்ஜின் CSS வண்ணச் செயல்பாடுகள் மற்றும் opacity பண்புகளைத் தவறாகக் கையாளுகிறது, opacity-க்கு பதிலாக முழு அடர்த்தி கொண்ட மையை (full-density ink) பயன்படுத்துகிறது.
SVG கன்வெர்ட்டரைச் (converter) சென்றடைவதற்கு முன்பே அதை முன்செயலாக்கம் (pre-processing) செய்வது மட்டுமே நம்பகமான தற்காப்பு முறையாகும். ஆல்பா பிளெண்டிங் (alpha blending) சார்ந்த எந்தவொரு உறுப்பையும் நீக்கிவிடுங்கள் அல்லது மாற்றுங்கள். rgba() மதிப்புகளைத் திடமான rgb() வண்ணங்களாக மாற்றவும். நீங்கள் ஒளிபுகுத்தலை (opacity) தக்கவைக்க விரும்பினால், மதிப்புகளை CSS shorthand-லிருந்து அகற்றிவிட்டு நிலையான opacity பண்புகளுக்கு (attributes) மாற்றவும்; இருப்பினும், வெளிப்படைத்தன்மையை (transparency) முழுமையாக நீக்குவதே பாதுகாப்பானது. இந்த மாற்றங்கள் இணைய வடிவமைப்பிற்கு (web design) ஒரு பின்னோட்டமாகத் தோன்றலாம், ஆனால் PDF நவீன CSS வெளிப்படைத்தன்மைக்கு முந்தைய ஒரு வேறுபட்ட இமேஜிங் மாதிரியைப் (imaging model) பயன்படுத்துகிறது. இந்த வடிவம் துல்லியமான வண்ண மதிப்புகளை எதிர்பார்க்கிறது, தெளிவற்ற மதிப்புகளைக் கொடுப்பது சிக்கல்களை உருவாக்கும்.
நீங்கள் மார்க்கப்பைப் (markup) சுத்திகரிக்கும்போது, ஒவ்வொரு SVG-யும் சரியான xmlns namespace அறிவிப்பைக் கொண்டுள்ளதா என்பதை மீண்டும் சரிபார்க்கவும். உருவாக்கப்பட்ட HTML மற்றும் டெம்ப்ளேட் என்ஜின்கள் (template engines) பெரும்பாலும் minification அல்லது DOM serialization செய்யும் போது namespace பண்புகளை நீக்கிவிடுகின்றன. அந்த namespace இல்லையென்றால், SVG parser உறுப்புகளைத் தவறாக அடையாளம் காணலாம் அல்லது அமைதியாகத் தோல்வியடையலாம், இதனால் parser error அல்லது பக்கத்திற்குச் சென்றடையாத சிதைந்த வெக்டர் தரவு (malformed vector data) உருவாகலாம். இது சில வினாடிகளில் செய்யக்கூடிய ஒரு அடிப்படைச் சரிபார்ப்பு, ஆனால் இது பல மணிநேர நேரத்தைச் சேமிக்கும்.
ஒரு டெம்ப்ளேட், இரண்டு உலகங்கள்
உலாவಿಗாகவும் (browser) PDF-க்காகவும் தனித்தனி HTML டெம்ப்ளேட்டுகளைப் பராமரிப்பது மிக மோசமான நீண்டகாலத் தீர்வாகும். லேபிள்கள் மாறக்கூடும், மார்ஜின்கள் (margins) மாறும், விரைவில் ஏற்றுமதி செய்யப்பட்ட அறிக்கை (exported report) டேஷ்போர்டுடன் ஒத்துப்போகாது. ஒரு சுத்தமான கட்டமைப்பு (architecture) ஒரே ஒரு டெம்ப்ளேட்டைச் சார்ந்து இருக்கும் மற்றும் context.isForPdf() போன்ற ஒரு ஃபிளாக் (flag) மூலம் ரெண்டரிங் லாஜிக்கைப் (rendering logic) பிரிக்கும்.
அந்த ஃபிளாக் false ஆக இருக்கும்போது, டெம்ப்ளேட் முழுமையான உலாவிக் அனுபவத்தை வழங்கும். இது முடிவில்லா ஜூமிற்கு (infinite zoom) நேட்டிவ் SVG, நவீன CSS மற்றும் உலாவி ஆதரிக்கும் வண்ணச் சொத்துக்களை (color assets) வழங்கும். அந்த ஃபிளாக் true ஆக இருக்கும்போது, அதே டெம்ப்ளேட் SVG சொத்துக்களை முன்கூட்டியே ரெண்டர் செய்யப்பட்ட PNG-களாக மாற்றும், emoji-safe ஃபாண்ட் ஸ்டேக்கை (font stack) இயக்கும் மற்றும் ஆதரிக்கப்படாத வெளிப்படைத்தன்மை விளைவுகளை நீக்கும். உரை மற்றும் அமைப்பு மாறாது; சொத்து குழாய்முறை (asset pipeline) மற்றும் ஸ்டைலிங் விதிகள் (styling rules) மட்டுமே இலக்கு ஊடகத்திற்கு ஏற்ப மாறும்.
இந்த இரட்டைப் பாதை அணுகுமுறை (dual-path approach) கோட்பேஸை (codebase) துல்லியமாக வைத்திருக்கும். நீங்கள் ஒரு இடத்தில் உள்ளடக்கத்தைப் புதுப்பித்தால் போதும், ரூட்டிங் லேயர் (routing layer) திரை மற்றும் காகிதத்திற்கு இடையிலான இயந்திரவியல் வேறுபாடுகளைக் கவனித்துக் கொள்ளும். இது சோதனையையும் (testing) எளிதாக்குகிறது. முழுமையான டெவலப்பர் டூல்களுடன் (developer tools) உலாவியில் டெம்ப்ளேட் லாஜிக்கைச் சரிபார்க்கலாம், பின்னர் PDF ஃபிளாக்கை இயக்கி, அதே தரவு கன்வெர்ட்டரை முடக்காமல் ஒரு சுத்தமான ஆவணத்தை உருவாக்குவதை உறுதி செய்யலாம்.
PDF உருவாக்கம் குறித்த கசப்பான உண்மை
PDF ஒருபோதும் உலாவியைப் போலச் செயல்படாது. ரெண்டரிங் மாதிரிகள் அடிப்படையில் வேறுபட்டவை, மேலும் iText போன்ற லைப்ரரிகள் (libraries) வேகம், கோப்பு அளவு மற்றும் விவரக்குறிப்பு இணக்கத்திற்கு (specification compliance) இடையே திட்டமிட்ட சமரசங்களைச் செய்கின்றன. என்ஜினை எதிர்த்துப் போராடி சிறந்தத hoped செய்வதில் வெற்றி இல்லை. எல்லைகளை முன்கூட்டியே ஏற்றுக்கொண்டு, அவற்றைச் சுற்றியே குழாய்முறையை (pipeline) வடிவமைப்பதில் தான் வெற்றி உள்ளது.
PDF நிலைக்கு முன்பே உங்கள் வெக்டர்களை மாற்றவும். ஒவ்வொரு கிளிஃபிற்கும் (glyph) ஒரு மாற்று (fallback) இருக்கும் வகையில் உங்கள் எழுத்துருக்களை (fonts) வெளிப்படையாக வழிநடத்தவும். வெளிப்படைத்தன்மையை நீக்கிவிட்டு திடமான வண்ணங்களுக்கு மாற்றவும். எந்த உலகத்திற்காகத் தங்களை ரெண்டர் செய்கிறார்கள் என்பதைத் தெரிந்துகொள்ளத் தேவையான சூழலை (context) உங்கள் டெம்ப்ளேட்டுகளுக்கு வழங்கவும். இதைத் தொடர்ச்சியாகச் செய்யுங்கள், அப்போது உங்கள் ஆவணங்கள் ரெண்டரருடன் போராடுவதை நிறுத்திவிட்டு, நீங்கள் திட்டமிட்டது போலவே தோற்றமளிக்கும்.