איך אפשר ליצור PDF ישירות בדפדפן?

יצירת PDF נשמעת כמו פעולה פשוטה.

יש לנו מסמך בדף האינטרנט, ואנחנו רוצים לקבל ממנו קובץ PDF שאפשר לשמור, לשלוח ולהדפיס.

אבל ברגע שרוצים שהתוצאה תהיה מדויקת ועקבית, במיוחד בעברית עם ניקוד, מגלים שיש כאן הרבה יותר ממה שנראה לעין.

במקום לשלוח את המסמך לשרת

בדרך המקובלת, כדי ליצור PDF אתר יכול לשלוח את המסמך ל־שרת.

שרת הוא פשוט מחשב שמבצע עבודה עבור האתר.

התהליך נראה בערך כך:

המחשב שלך → האתר → שרת → יצירת PDF → חזרה למחשב שלך

הגישה הזו עובדת, אבל היא אומרת שהשרת צריך לבצע את העבודה.

אם יש אלף משתמשים שיוצרים PDF, השרת צריך להתמודד עם אלף עבודות.

אפשר לעשות משהו אחר:

לתת למחשב של המשתמש לבצע את העבודה בעצמו.

ואז התהליך נראה כך:

המחשב שלך → הדפדפן → יצירת PDF

אין צורך לשלוח את המסמך למחשב אחר רק כדי ליצור ממנו PDF.

איך הדפדפן יכול לעשות עבודה כזאת?

כאן נכנסת טכנולוגיה שנקראת WebAssembly, או בקיצור Wasm.

בלי להיכנס לפרטים טכניים, אפשר לחשוב על WebAssembly כעל דרך להריץ בתוך הדפדפן תוכנה שמבצעת חישובים מורכבים במהירות גבוהה.

במקום שהדפדפן רק יציג את האתר, הוא יכול גם להריץ בתוכו מנוע שלם שעוסק ביצירת PDF.

וזה מה שהופך את הרעיון למעניין:

יצירת ה־PDF יכולה לקרות בתוך הדפדפן, על המחשב של המשתמש.

העבודה לא חייבת לעבור דרך שרת.

אבל יצירת PDF היא לא צילום של המסך

כאן נמצא אחד האתגרים החשובים.

אפשר לחשוב על PDF בצורה פשוטה:

"יש לי דף על המסך. פשוט תשמור את מה שאני רואה כ־PDF."

אבל זו לא הדרך שבה רוצים ליצור מסמך איכותי.

אם פשוט נהפוך את המסך לתמונה, נקבל משהו שנראה נכון ברגע הצילום - אבל למעשה יצרנו תמונה של המסמך, לא מסמך אמיתי.

טקסט לא יהיה באמת טקסט.

הוא יהיה אוסף של פיקסלים.

וכשמגדילים אותו או מדפיסים אותו, אנחנו תלויים באיכות של התמונה.

לכן צריך דרך אחרת.

הדפדפן צריך לבנות את המסמך מחדש

דף אינטרנט מורכב מהרבה דברים:

טקסט, כותרות, תמונות, טבלאות, רווחים, שוליים ועוד.

הדפדפן צריך להחליט איפה כל אחד מהם נמצא.

הוא צריך לדעת:

• איפה מתחילה שורה.
• מתי צריך לעבור לשורה הבאה.
• איפה נמצאת תמונה.
• כמה מקום תופס הטקסט.
• איפה מסתיים עמוד.
• איך האלמנטים מסתדרים אחד ביחס לשני.

התהליך הזה נקרא Layout - פריסה.

והתוכנה שאחראית לבצע את החישובים האלה נקראת Layout Engine - מנוע פריסה.

מה עושה מנוע פריסה?

במקום לקחת צילום של הדף, מנוע הפריסה מסתכל על מה שהדף אומר שהוא צריך להיות.

לדוגמה:

הכותרת צריכה להיות כאן. הטקסט צריך להיות מתחתיה. התמונה צריכה להיות בצד. השורה הזו ארוכה מדי, ולכן צריך להעביר חלק ממנה לשורה הבאה.

ואז הוא מחשב מחדש את כל המיקומים.

זה בדיוק מה שצריך לעשות כאשר בונים PDF.

לא לצלם את הדף.

לבנות אותו.

ומה עם הגופנים?

עכשיו מגיעה בעיה נוספת.

נניח שהמסמך משתמש בגופן מיוחד.

אם הגופן נמצא במחשב - אין בעיה.

אבל מה קורה כאשר הוא לא נמצא?

הדפדפן יכול להשתמש בגופן אחר.

לזה קוראים Font Fallback.

כלומר:

"הגופן שביקשת אינו זמין, אז אנסה גופן אחר."

זה מצוין עבור אתר אינטרנט.

אם גופן מסוים חסר, עדיף שהאתר יוצג עם גופן דומה מאשר שיופיעו סימנים חסרים.

אבל כאשר יוצרים PDF שאמור להיראות בדיוק אותו הדבר בכל מקום, החלפה כזו יכולה להיות בעיה.

אז מה זה Web Font?

כדי לפתור חלק מהבעיה, אתר יכול להביא איתו את הגופן שהוא צריך.

גופן שמגיע יחד עם האתר נקרא Web Font.

במקום להגיד למחשב:

"תשתמש בגופן שכבר מותקן אצלך."

האתר אומר:

"זה הגופן שאני רוצה שתשתמש בו."

כך אפשר לקבל שליטה הרבה יותר טובה על המראה של הטקסט.

אבל עדיין צריך לדאוג שה־PDF עצמו לא יהיה תלוי במה שקיים במקרה במחשב שעליו פותחים או מדפיסים אותו.

ומה קורה כאשר אות או סימן חסרים?

כאן אנחנו מגיעים למשהו שאולי מי שהשתמש במחשבים בשנות ה־90 זוכר היטב.

לפעמים במקום אות הופיע:

□

ריבוע.

למי שגדל עם מחשבים חדשים זה אולי נראה מוזר.

אבל הריבוע הזה פשוט אומר:

"יש כאן תו, אבל אין לי את הצורה הדרושה כדי לצייר אותו."

הצורה של תו בתוך גופן נקראת Glyph - גליף.

אז מה זה Glyph?

אפשר לחשוב על Glyph בתור:

הציור של התו.

לדוגמה, התו אומר:

"זו האות א."

ה־Glyph הוא הצורה שהגופן משתמש בה כדי לצייר את האות א.

לגופנים שונים יש Glyphs שונים.

לכן אותה אות יכולה להיראות אחרת לגמרי מגופן לגופן.

ה־Glyph הוא למעשה הדבר שהמחשב צריך לדעת איך לצייר.

למה לא פשוט להפוך את הטקסט לתמונה?

כי אז אנחנו מאבדים את היתרון של טקסט אמיתי.

אם נהפוך את המילה:

שלום

לתמונה, המחשב כבר לא יודע שמדובר במילה "שלום".

הוא רק רואה פיקסלים.

לעומת זאת, כאשר עובדים עם ה־Glyphs של הגופן, אפשר לשמור את צורות האותיות עצמן.

לכן הטקסט יכול להישאר חד גם בהגדלה ובהדפסה.

והכי חשוב:

אנחנו לא צריכים לסמוך על כך שהמחשב או המדפסת מחזיקים בדיוק את אותו גופן.

המידע הדרוש לציור הטקסט יכול להיות חלק מהמסמך.

ועכשיו מגיעה העברית

בעברית רגילה יש כבר כמה דברים שצריך לקחת בחשבון.

אבל כאשר מוסיפים ניקוד, המצב נעשה מורכב יותר.

לדוגמה:

שָׁלוֹם

הסימנים הקטנים שמופיעים מעל ומתחת לאותיות אינם סתם תמונות קטנות.

הם חלק מהטקסט.

צריך לדעת:

• איזה סימן נמצא שם.
• לאיזו אות הוא שייך.
• איפה בדיוק למקם אותו.
• איך הוא משתלב עם הגופן.
• איך הוא מתנהג כאשר הגופן משתנה.

וזה בדיוק המקום שבו טיפול נכון ב־Glyphs ובגופנים הופך לחשוב במיוחד.

הגופן הוא לא רק "ציור של אותיות"

אפשר לחשוב על גופן כמו על מאגר גדול של צורות.

הוא מכיל את הצורות של האותיות, המספרים והסימנים השונים.

כאשר אנחנו רוצים להציג טקסט, צריך למצוא את הצורה המתאימה לכל תו ולמקם אותה במקום הנכון.

בניקוד עברי יש אפילו יותר עבודה:

הניקוד צריך להיות ממוקם ביחס לאות שאליה הוא שייך.

לכן לא מספיק לדעת:

"יש כאן קמץ."

צריך גם לדעת:

"איפה הקמץ הזה צריך להיות ביחס לאות?"

ההרחבה עבור עברית וניקוד

מנוע ה־PDF שבו אנחנו משתמשים נקרא Folio. הוא התחיל כפרויקט פתוח, ואנחנו בנינו עליו גרסה משלנו, שמורחבת במיוחד עבור הצרכים של מסמכים בעברית.

במיוחד עם:

ניקוד, גופנים, Font Fallback ו־Glyphs.

המטרה היא לא רק שהעברית תיראה טוב בדפדפן.

המטרה היא שגם כאשר הדף הופך ל־PDF, הטקסט יישאר מדויק ועקבי.

התוצאה שאנחנו רוצים

בסופו של דבר, אנחנו רוצים מצב שבו:

יצרתם PDF במחשב שלכם

↓

שלחתם אותו למישהו אחר

↓

הוא פתח אותו במחשב אחר

↓

הוא הדפיס אותו במדפסת אחרת

והתוצאה עדיין זהה.

לא צריך להתקין את הגופן המקורי.

לא צריך לסמוך על מה שיש במחשב השני.

לא צריך להפוך את הטקסט לתמונה.

וה־PDF לא צריך להיווצר על שרת מרוחק.

כל התהליך במקום אחד

אפשר לסכם את כל הרעיון בצורה פשוטה:

HTML

המסמך שאנחנו רוצים להפוך ל־PDF.

↓

Layout Engine

מחשב מחדש איפה כל דבר צריך להיות.

↓

Web Fonts

מספקים את הגופנים שהמסמך צריך.

↓

Glyphs

מספקים את הצורות המדויקות של האותיות והסימנים.

↓

PDF

שומר את התוצאה כמסמך עצמאי שאפשר לפתוח ולהדפיס.

וכל העבודה הזו יכולה להתבצע:

ישירות בתוך הדפדפן באמצעות WebAssembly.

אז מה בעצם מיוחד בגישה הזו?

לא מדובר רק ביכולת "להוריד PDF".

העניין הוא איך ה־PDF נוצר.

במקום לצלם את מה שהדפדפן מציג, אנחנו בונים את המסמך מחדש.

במקום לסמוך על הגופנים שמותקנים במחשב, אנחנו יכולים לספק את המידע הדרוש למסמך.

במקום להפוך את הטקסט לתמונה, אנחנו עובדים עם הצורות האמיתיות של האותיות.

ובמקום לשלוח את המסמך לשרת כדי לבצע את העבודה, אפשר לבצע את כל התהליך בתוך הדפדפן.

וכשמוסיפים לזה טיפול נכון בעברית ובניקוד, אפשר להגיע לתוצאה שבה:

המסמך שנוצר בדפדפן נשאר מסמך אמיתי, חד ועקבי - מהמסך ועד המדפסת.