HTML ને PDF માં રૂપાંતરિત કરવું કાગળ પર સરળ લાગે છે. તમે એક સુધારેલો ટેમ્પલેટ બનાવો છો, તેમાં તમારો ડેટા ઉમેરો છો, અને એવી દસ્તાવેજની અપેક્ષા રાખો છો જે વેબ પેજને પિક્સેલ-ટુ-પિક્સેલ પ્રતિબિંબિત કરે. વાસ્તવમાં, આ પાઇપલાઇન ઘણીવાર ક્રેશ, ખૂટેલા ગ્લિફ્સ (glyphs) અને વિઝ્યુઅલ કરપ્શન સામેના રોજિંદા સંઘર્ષમાં ફેરવાઈ જાય છે. તાજેતરના એક પ્રોજેક્ટ દરમિયાન, ત્રણ સમસ્યાઓ વારંવાર સામે આવતી હતી: ચોક્કસ SVG ગ્રાફિક્સ આવતા જ iText સંપૂર્ણપણે ક્રેશ થઈ જતું, ઇમોજીસ (emojis) ખાલી સફેદ ચોરસમાં અદૃશ્ય થઈ જતા, અને સૂક્ષ્મ પારદર્શક બેકગ્રાઉન્ડ્સ અપારદર્શક કાળા બ્લોક્સમાં ફેરવાઈ જતા. દરેક નિષ્ફળતાનું કારણ અલગ હતું, અને આ ત્રણેયને ઠીક કરવા માટે PDF એન્જિન તે કન્ટેન્ટ જોતા પહેલા એપ્લિકેશન તેને કેવી રીતે તૈયાર કરે છે તેના વિશે ફરીથી વિચારવાની જરૂર હતી.
જ્યારે SVG પાઇપલાઇનને તોડી નાખે
iText સુવિધા માટે આંતરિક SVG રેન્ડરર સાથે આવે છે, પરંતુ તે ઇન્ટિગ્રેશન એક ગંભીર નબળાઈ છુપાવે છે. જ્યારે SVG માં જટિલ પાથ (paths), ભારે CSS સ્ટાઇલિંગ અથવા ચોક્કસ કોઓર્ડિનેટ ટ્રાન્સફોર્મેશન હોય છે, ત્યારે એમ્બેડેડ પાર્સર કોઈ વ્યવસ્થિત એક્સેપ્શન (exception) ફેંકીને આગળ વધતું નથી. તે વિસ્ફોટ કરે છે. આ સંપૂર્ણ સિસ્ટમ ક્રેશ છે જે કોઈ ચેતવણી વિના PDF જનરેશન થ્રેડને મારી નાખે છે, જેનાથી તમારી પાસે માત્ર એક અધૂરી ફાઇલ અને વેક્ટર પાર્સરની ઊંડાઈમાં ક્યાંક નિર્દેશ કરતો સ્ટેક ટ્રેસ (stack trace) બાકી રહે છે.
વિશ્વસનીય ઉકેલ એ છે કે iText ને SVG રેન્ડર કરવાનું કહેવાનું જ બંધ કરી દેવું. તેના બદલે, તે કામને સ્ટેન્ડઅલોન મોડમાં ચાલતા Apache Batik પર સ્થાનાંતરિત કરો. Batik તે જ જટિલ પાથ અને CSS નિયમોને તેટલી નાજુકતા વગર હેન્ડલ કરે છે, અને તેને અલગ રાખવાથી તમારું PDF એન્જિન ગ્રાફિક્સ સંબંધિત અસ્થિરતાથી સુરક્ષિત રહે છે. વર્કફ્લો સીધો છે: ડોક્યુમેન્ટ એસેમ્બલી શરૂ થાય તે પહેલાં, PNG ડેટા URL બનાવવા માટે SVG ને Batik દ્વારા ચલાવો. કાચા વેક્ટર માર્કઅપને બદલે તે રાસ્ટર ઇમેજને iText માં પાસ કરો. સ્ટેન્ડઅલોન Batik એ મોટી લાઇબ્રેરીની અંદર બંડલ થયેલા અને ફ્રોઝન એમ્બેડેડ રેન્ડરર કરતા SVG સ્પેસિફિકેશનને વધુ નજીકથી અનુસરે છે, અને આ અલગતાનો અર્થ એ છે કે કોઈ ખામીયુક્ત ગ્રાફિક આખા ડોક્યુમેન્ટ કન્વર્ઝનને તોડી શકતું નથી.
એક નાની વિગત નક્કી કરે છે કે તમારો ચાર્ટ પ્રોફેશનલ દેખાશે કે બગ રિપોર્ટ જેવો. SVG તેના કોઓર્ડિનેટ સિસ્ટમ અને સ્કેલિંગ બિહેવિયરને વ્યાખ્યાયિત કરવા માટે viewBox એટ્રિબ્યુટ પર આધાર રાખે છે. જો તમારો કન્વર્ઝન કોડ viewBox ને અવગણે છે, તો એક સંપૂર્ણ રીતે માન્ય ચાર્ટ વાંચી ન શકાય તેવા ટપકામાં સંકોચાઈ શકે છે અથવા વિકૃત અવ્યવસ્થામાં ખેંચાઈ શકે છે. આ એટ્રિબ્યુટને સ્પષ્ટપણે પાર્સ કરો અને તે પરિમાણોને તમારા આઉટપુટ સાઇઝ સાથે મેપ કરો. આ સ્ટેપને છોડી દેવાથી લેઆઉટ સમસ્યાને ડિબગ કરવામાં કલાકો બગડશે, જેનો રેન્ડરિંગ ક્વોલિટી સાથે કોઈ લેવાદેવા નથી પરંતુ ખૂટેલા કોઓર્ડિનેટ ડિક્લેરેશન સાથે બધું જ છે.
અદ્રશ્ય શાહીની સમસ્યા
જ્યાં ઇમોજી હોવા જોઈએ ત્યાં ખાલી ચોરસ એક સરળ વાર્તા કહે છે: વર્તમાન ફોન્ટ તે ભાષા જાણતા નથી. Helvetica અને અન્ય પ્રમાણભૂત PDF ફોન્ટ્સ ઇમોજીના વ્યાપક ઉપયોગ પહેલાના છે. તેમાં ઇમોજી Unicode રેન્જ માટેના ગ્લિફ્સ સામેલ નથી, તેથી જ્યારે iText તે કોડ પોઈન્ટ્સનો સામનો કરે છે ત્યારે તે કંઈપણ રેન્ડર કરતું નથી અને આગળ વધી જાય છે. પરિણામ એ છે કે દસ્તાવેજ ખાલી બોક્સથી ભરેલો હોય છે જે સોશિયલ સેન્ટિમેન્ટ રિપોર્ટ્સ અથવા યુઝર ફીડબેક એક્સપોર્ટ્સને બગડેલા બનાવે છે.
તમે આ ખામી પૂરી કરવા માટે ક્લાયન્ટ ઓપરેટિંગ સિસ્ટમ પર આધાર રાખી શકતા નથી. PDFs તેમના પોતાના ફોન્ટ રિસોર્સિસ ધરાવે છે, અને બ્રાઉઝરમાં જે સાચું દેખાય છે તેનો કોઈ અર્થ નથી રહેતો જ્યારે ફાઇલ તમારી સિસ્ટમ ફોન્ટ્સથી અલગ થઈ જાય છે. ઉકેલ એ એક સ્પષ્ટ ફોન્ટ રાઉટિંગ લેયર બનાવવાનો છે. Symbola જેવો સમર્પિત ઇમોજી-સક્ષમ ફોન્ટ રજિસ્ટર કરો, જે ઇમોજી Unicode બ્લોક્સને આવરી લેતા મોનોક્રોમ સિમ્બોલ્સ પૂરા પાડે છે. કાળું-અને-સફેદ હૃદય અથવા ચેતવણીનું પ્રતીક ગ્લોસી કલર ગ્લિફ સેટ જેવી ચમક ધરાવતું ન હોઈ શકે, પરંતુ તે અર્થ સમજાવે છે. ખાલી લંબચોરસ નિષ્ફળતા સૂચવે છે. PDF વ્યુઅર્સની અંદર ફૂલ-કલર ઇમોજી ફોન્ટ્સને સતત રેન્ડર કરવા મુશ્કેલ રહે છે, અને કલર સપોર્ટ મેળવવાનો પ્રયાસ ઘણીવાર સમસ્યાઓ ઉકેલવા કરતાં વધુ સુસંગતતા (compatibility) સમસ્યાઓ લાવે છે.
iText લાઇન બ્રેકિંગ દ્વારા બીજી, વધુ ખરાબ સમસ્યા ઉમેરે છે. લાઇબ્રેરી ઇમોજી સરોગેટ જોડીઓને (surrogate pairs) ખોટી સીમા પર વિભાજિત કરી શકે છે, જેનાથી એક જ અક્ષર બે અમાન્ય ભાગોમાં ફાટી જાય છે. જ્યારે આવું થાય છે, ત્યારે ટેક્સ્ટ સ્ટ્રીમ કરપ્ટ થઈ જાય છે અને જ્યાં એક જ ગ્લિફ હોવો જોઈએ ત્યાં તમને વાંચી ન શકાય તેવા ટુકડાઓ મળે છે. આને રોકવા માટે, એક કસ્ટમ ISplitCharacter અમલમાં મૂકો જે સરોગેટ જોડીઓને ઓળખે અને તેને એટોમિક યુનિટ્સ તરીકે ગણે. આ લેઆઉટ એન્જિનને ઇમોજીની વચ્ચે લાઇન બ્રેક ઉમેરતા અટકાવે છે અને ટેક્સ્ટની અખંડિતતા જાળવી રાખે છે.
જ્યારે પારદર્શકતા કાળી થઈ જાય
સોફ્ટ rgba બેકગ્રાઉન્ડ અથવા લેયર્ડ fill-opacity ઇફેક્ટ ધરાવતું SVG બ્રાઉઝરમાં રિફાઇન્ડ લાગે છે. તે જ માર્કઅપ iText માં આપો, અને પારદર્શકતા વારંવાર ઘાટા કાળા લંબચોરસમાં ફેરવાઈ જાય છે. એન્જિન CSS કલર ફંક્શન્સ અને ઓપેસિટી એટ્રિબ્યુટ્સને ખોટી રીતે હેન્ડલ કરે છે, અને ઓપેસિટીને ફૂલ-ડેન્સિટી ઇન્ક સાથે બદલી નાખે છે.
કન્વર્ટર સુધી પહોંચતા પહેલા SVG નું પ્રી-પ્રોસેસિંગ કરવું એ એકમાત્ર ભરોસાપાત્ર બચાવ છે. આલ્ફા બ્લેન્ડિંગ (alpha blending) પર આધારિત કોઈપણ એલિમેન્ટને દૂર કરો અથવા બદલો. rgba() વેલ્યુઝને સોલિડ rgb() કલર્સમાં રૂપાંતરિત કરો. જો તમારે ઓપેસિટી (opacity) નો અમુક અંશ રાખવો જ હોય, તો વેલ્યુઝને CSS શોર્ટકટમાંથી બહાર કાઢીને સ્ટાન્ડર્ડ ઓપેસિટી એટ્રિબ્યુટ્સમાં મૂકો, જોકે પારદર્શકતા (transparency) ને સંપૂર્ણપણે દૂર કરવી એ સૌથી સુરક્ષિત રસ્તો છે. આ ફેરફારો વેબ ડિઝાઇન માટે એક ડગલું પાછળ જેવું લાગે છે, પરંતુ PDF એક અલગ ઇમેજિંગ મોડેલનો ઉપયોગ કરે છે જે આધુનિક CSS ટ્રાન્સપરન્સી કરતા જૂનું છે. આ ફોર્મેટ ચોક્કસ કલર વેલ્યુઝની અપેક્ષા રાખે છે, અને તેને અસ્પષ્ટ વેલ્યુઝ આપવાથી મુશ્કેલી ઊભી થઈ શકે છે.
જ્યારે તમે માર્કઅપને સેનિટાઇઝ કરી રહ્યા હોવ, ત્યારે ખાતરી કરો કે દરેક SVG માં યોગ્ય xmlns નેમસ્પેસ ડિક્લેરેશન છે. જનરેટ થયેલ HTML અને ટેમ્પલેટ એન્જિન ઘણીવાર મિનિફિકેશન અથવા DOM સિરિયલાઇઝેશન દરમિયાન નેમસ્પેસ એટ્રિબ્યુટ્સને કાઢી નાખે છે. તે નેમસ્પેસ વગર, SVG પાર્સર એલિમેન્ટ્સને ખોટી રીતે ઓળખી શકે છે અથવા નિષ્ફળ જઈ શકે છે, જેનાથી પાર્સર એરર અથવા ખામીયુક્ત વેક્ટર ડેટા પેદા થાય છે જે ક્યારેય પેજ પર પહોંચતો નથી. આ એક પાયાની તપાસ છે જે સેકન્ડો લે છે અને કલાકો બચાવે છે.
એક ટેમ્પલેટ, બે દુનિયા
સૌથી ખરાબ લાંબા ગાળાનો ઉકેલ બ્રાઉઝર અને PDF માટે અલગ-અલગ HTML ટેમ્પલેટ્સ રાખવાનો છે. લેબલ્સ બદલાઈ જાય છે, માર્જિન બદલાય છે, અને ટૂંક સમયમાં એક્સપોર્ટ થયેલ રિપોર્ટ ડેશબોર્ડ સાથે મેળ ખાતો નથી. વધુ સારી આર્કિટેક્ચર એક જ ટેમ્પલેટ પર આધારિત હોય છે અને context.isForPdf() જેવા સિંગલ ફ્લેગ સાથે રેન્ડરિંગ લોજિકને અલગ પાડે છે.
જ્યારે તે ફ્લેગ 'false' હોય, ત્યારે ટેમ્પલેટ સંપૂર્ણ બ્રાઉઝર અનુભવ આપે છે. તે ઇન્ફિનિટ ઝૂમ માટે નેટિવ SVG, આધુનિક CSS અને બ્રાઉઝર જે પણ કલર એસેટ્સ સપોર્ટ કરે છે તે પૂરા પાડે છે. જ્યારે ફ્લેગ 'true' હોય, ત્યારે સમાન ટેમ્પલેટ SVG એસેટ્સને પ્રી-રેન્ડર્ડ PNGs સાથે બદલી નાખે છે, ઇમોજી-સેફ ફોન્ટ સ્ટેક સક્રિય કરે છે, અને કોઈપણ અસમર્થિત ટ્રાન્સપરન્સી ઇફેક્ટ્સને દૂર કરે છે. ટેક્સ્ટ અને સ્ટ્રક્ચર અપરિવર્તિત રહે છે; ફક્ત એસેટ પાઇપલાઇન અને સ્ટાઇલિંગ નિયમો લક્ષ્ય માધ્યમ મુજબ અનુકૂળ થાય છે.
આ ડ્યુઅલ-પાથ એપ્રોચ કોડબેઝને સચોટ રાખે છે. તમે એક જ જગ્યાએ કન્ટેન્ટ અપડેટ કરો છો, અને રાઉટિંગ લેયર સ્ક્રીન અને પેપર વચ્ચેના યાંત્રિક તફાવતોને સંભાળે છે. તે ટેસ્ટિંગને પણ સરળ બનાવે છે. તમે ફૂલ ડેવલપર ટૂલ્સ સાથે બ્રાઉઝરમાં ટેમ્પલેટ લોજિકને વેરિફાય કરી શકો છો, પછી PDF ફ્લેગ ટ્રિગર કરી શકો છો અને ખાતરી કરી શકો છો કે સમાન ડેટા કન્વર્ટરને ક્રેશ કર્યા વિના સ્વચ્છ દસ્તાવેજ બનાવે છે.
PDF જનરેશન વિશેની કડવી વાસ્તવિકતા
PDF ક્યારેય બ્રાઉઝરની જેમ વર્તશે નહીં. રેન્ડરિંગ મોડેલ્સ મૂળભૂત રીતે અલગ છે, અને iText જેવી લાઇબ્રેરીઓ સ્પીડ, ફાઇલ સાઇઝ અને સ્પેસિફિકેશન પાલન વચ્ચે જાણીજોઈને સમાધાન (trade-offs) કરે છે. સફળતા એન્જિન સામે લડવાથી અને શ્રેષ્ઠની આશા રાખવાથી નથી મળતી. તે સીમાઓને વહેલી સ્વીકારીને તેની આસપાસ પાઇપલાઇન ડિઝાઇન કરવાથી મળે છે.
PDF સ્ટેજ પહેલા તમારા વેક્ટર્સને રૂપાંતરિત કરો. તમારા ફોન્ટ્સને સ્પષ્ટ રીતે રૂટ કરો જેથી દરેક ગ્લિફ (glyph) પાસે ફોલબેક હોય. ટ્રાન્સપરન્સીને દૂર કરી તેને સોલિડ કલર્સમાં બદલો. તમારા ટેમ્પલેટ્સને તે સંદર્ભ (context) આપો જે તેમને એ જાણવા માટે જરૂરી છે કે તેઓ કઈ દુનિયા માટે રેન્ડર કરી રહ્યા છે. આ કામ સતત કરો, અને તમારા દસ્તાવેજો રેન્ડરર સાથે લડવાનું બંધ કરશે અને બરાબર તે જ રીતે દેખાવા લાગશે જે રીતે તમે ઈચ્છો છો.