יום ראשון, 16 באוקטובר 2011

שיבוץ טקסט מתמטי ב-Blogger

כמה וכמה חודשים חרקתי שיניים למראה התוצאה העלובה שהתקבלה בכל פעם שניסיתי לשבץ טקסט מתמטי בגוף הרשומות. בתחילה סברתי שזוהי בעיה של Blogger אבל ביקור תדיר אצל בלוגרים מקצועיים (המרוססים אצלי באמצעות google reader) ניפץ את ההיפותזה והשאיר אותי מתוסכל למדי. שאלות שהצגתי בפורום המתאים של משתמשי Blogger זכו למענה לא מספק. כל זה לא הותיר לי ברירה אלא לברר את העניין בעצמי, ולמרבה השמחה יש תוצאות. הרשומה הזו מוגשת לכל בלוגר עברי המעוניין לשבץ בבלוג שלו טקסט מתמטי באיכות גבוהה, והוא צמא למעט טיפים בתחום.

שתי דרכים מוכרות לי לצורך שיבוץ קוד \(\LaTeX\) בקוד HTML:
  • קימפול קוד \(\LaTeX\) לקובץ גרפי והמרתו לטקסט HTML.
  • קימפול קוד \(\LaTeX\) "בענן" באמצעות שתילת סקריפט.
במקרה הראשון מתבצעת כל העבודה על אתר מרוחק, ומתקבל קוד אותו יש לשתול במקום המתאים בדף הרשומה. במקרה השני הטקסט נכתב ישירות לתוך דף הרשומה בפורמט כתיבה רגיל, וההדרה עצמה מתבצעת על אתר מרוחק עם פתיחת הדף. השיטה הראשונה איננה מצריכה ידע מוקדם ב-\(\LaTeX\), לפחות לא עבור משימות פשוטות. השיטה השנייה בהחלט כן, היא מקצועית יותר ותוצאותיה מרנינות-עין. אציג עתה את שתי השיטות כמיטב הבנתי.

א) קימפול קוד \(\LaTeX\) לקובץ גרפי והמרתו לטקסט HTML:
  1. כנסו לאתר codecogs. אתר זה מכיל עורך מעולה לכתיבת קוד \(\LaTeX\). בחלק העליון של הדף ישנם טמפלטים לסמלים מתמטים ולפקודות, והשימוש בהם קל ואינטואיטיבי. הקשה עם העכבר על הסמלים תייצר קוד \(\LaTeX\) אשר יופיע בתוך התיבה הגדולה שמתחת. אם אתם מכירים את השפה ומעדיפים לכתוב את הקוד בעצמכם, תוכלו לעשות זאת ישירות לתוך התיבה. במקרה זה העורך נוח מאוד לעבודה ותכונותיו מזכירות את אלו של העורך Kile.
  2. מתחת לתיבה מופיעה שורת פקדים באמצעותה תוכלו לשנות כמה פרמטרים: החשוב מכולם הוא זה המופיע משמאל: פורמט הקובץ הגרפי. הפורמט היחיד ששווה יחס הוא svg. כל השאר זוועה, כמודגם מטה. הכפתורים הימניים ישפרו במעט את הביצועים כאשר הנוסחא משובצת כחלק ממשפט, אך לפעמים זה בא על חשבון איכות הפרזנטציה. 
  3. מתחת לשורת הפרמטרים מופיע הטקסט שאנו מייצרים כפי שהוא אמור להיראות לאחר ההידור (=הקימפול). לכן בעצם ראוי העורך שלנו להיקרא WYSIWYG. תוכלו כל העת לשנות את הקוד בהתאם לפידבק המתקבל כאן. אם בחרתם בפורמט svg (ואני בעצם לא רואה כל סיבה לבחור אחרת) התוצאה תהיה מרנינת לב. אם לאו, שפרו את הקוד.
  4. במרכז תחתית הדף נמצאת תיבה בה מופיע קוד ה-HTML המתאים לקוד ה-\(\LaTeX\) שאתם בונים למעלה. חפצתם בקוד מסוג אחר? למשל קוד של WordPress? ואולי קוד לקובץ pdf? בצמוד לחלקה העליון השמאלי של התיבה יש לשונית בה ניתן לבחור את השפה אליה יומר הקובץ! ברירת המחדל היא HTML והיא זו המעניינת את משתמשי Blogger.
  5. הביאו את הסמן לתיבה זו והקישו על הלחצן השמאלי בעכבר. תוכנה של התיבה יצבע. הקשה עתה על הלחצן הימני של העכבר תאפשר לכם להעתיק את כל קוד ה- HTML באחת. 
  6. גשו עתה לטקסט שלכם, העבירו את מוד העריכה מכתיבה רגילה ל-HTML ושבצו את הטקסט המועתק במקום המתאים (לא כ"כ קל לזיהוי במוד זה, אבל לא צריכה להיות בעייה מיוחדת). חיזרו עתה למוד הכתיבה הרגיל, והטקסט המתמטי שיצרתם כבר משובץ בפנים כקובץ גרפי. הקשה עליו עם העכבר תפתח אפשרויות שליטה שונות, כמו במקרה של קובץ תמונה רגיל המשובץ ברשומה.
זהו זה. המשוואה שתולה במקומה. הבה נבחן את התוצאות בשני פורמטים שונים: הנה פיסת קוד שהומרה לקובץ gif אותו שתלתי כאן:


כפי שהנכם רואים, הטקסט מגורען ודהוי ולעיתים אינו קריא כלל; קל להבין את התיסכול שעולה למראה התוצאה העגומה... תוצאות דומות תתקבלנה גם בפורמטים png, jpeg, swf, עם עדיפות קלה באיכות ל-swf (לפחות על פי נסיוני). והנה אותה פיסת קוד בדיוק שהומרה הפעם לקובץ svg, ואותו שתלתי כאן:


עיניכם הרואות, תקן svg משפר את איכות הגרפיקה של הנוסחאות באופן משמעותי ביותר. תוכלו לקרוא עליו כמה מילים כאן. יחד עם זאת, יש לו שני חסרונות בולטים:  
  • שיבוץ הסמלים המתמטיים בתוך טקסט מילולי אינו מיושר כראוי; הטקסט המתמטי בורח מהשורה ולעיתים אף הגודל של הסמלים המתמטיים אינו תואם את גודל הפונטים במשפט. בפורמט הדינמי של blogger התוצאה במקרה זה תהיה גרועה במיוחד. אם יש למישהו מושג כיצד לשפר את הביצועים, אני אהיה אסיר תודה.
  • (נכון למועד כתיבת הרשומה) התקן איננו נתמך ע"י דפדפני IE מגירסאות שמונה ומטה. כמו כן התמיכה ב-FF לא מושלמת, וחלק מהדפדפנים התומכים קורסים כאשר הדפים מוצגים על גבי טבלטים. ומנגד, נראה שהתמיכה בתקן בכרום ובספארי מושלמות, ספארי נותן תמיכה מצויינת אפילו באייפונים! 

ב) קימפול קוד \(\LaTeX\) באמצעות שתילת סקריפט מתאים בראש הדף (הערה מאוחרת: זו השיטה שאימצתי בשני הבלוגים פרי עטי, והיא מתפקדת מצויין):

בשיטה זו אנו עושים שימוש במנוע בשם MathJax היושב על שרת מרוחק. סקריפט מיוחד שנשתל בראש הרשומה שולח את דף האינטרנט שלך לקימפול על גבי המנוע כל אימת שמישהו פותח אותו. תוך שניה או שתיים נפרש הקובץ המקומפל, והטקסט המתמטי מופיע כחלק אינטגרלי של הטקסט הכולל. לכאורה נראה הפיתרון הזה אידאלי: אתה כותב את הרשומה שלך במוד כתיבה, ובתוכו אתה משלב קוד \(\LaTeX\) בהתאם לצורך, ממש כפי שכותבים מסמך \(\LaTeX\) רגיל. 

ובכן, פתח את הרשומה במוד HTML ושבץ את הסקריפט הבא בראש הדף (כלומר לפני הטקסט שבכוונתך לרשום):

<script type="text/javascript"<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"> </script>
 <script type="text/javascript">MathJax.Hub.Queue(["Typeset",MathJax.Hub])</script>

זהו! חזור למוד כתיבה רגיל וכתוב את המסמך תוך שאתה משבץ קוד מתמטי ב- \(\LaTeX\) היכן שצריך, ממש כאילו היית רושם מסמך \(\LaTeX\) רגיל. ברגע שמישהו פותח את הדף שלך, שולח הסקריפט את הטקסט לקימפול על גבי המנוע המרוחק ומחזיר אותו מקומפל ומוכן לקריאה, כך שכל טקסט מתמטי משתלב בשלמות עם כל טקסט אחר. החיסרון היחיד בשיטה זו: הקורא נאלץ לחכות כמה שניות בטרם יסתיים הקימפול (כפי שנוכחת לדעת בעת קריאת חיבור זה).

שימו לב: יש לכתוב את הטקסט המתמטי בתוך סביבה מתמטית מתאימה, ממש כמו במסמך \(\LaTeX\) רגיל, אבל אסור להשתמש בסימן דולר בודד לפתיחה וסגירה של הסביבה המתמטית: יש להשתמש בסימן דולר כפול או בסלש-סוגר ע"מ לאפשר שימוש רגיל בסימן הדולר. הנה הדגמה לתוצאות המתקבלות בשיטה זו:
... הטנזור האלקטרומגנטי \(F_{\mu\nu}\) מקיים תמיד את זהות ביאנקי \(\partial_{\lambda}F_{\mu\nu}+\partial_{\mu}F_{\nu\lambda}+\partial_{\nu}F_{\lambda\mu}=0\) המבטאת אילוץ מבני על התורה... ומנגד, קשרי המבנה בתווך דינאמי הם כלליים ביותר וניתנים ע"י $$F_{\mu\nu}\left(x\right)\:=\:\int_{\text{p}\mathbb{L}}\mathcal{K}_{\mu\nu\rho\sigma}\left(x,y\right)G^{\rho\sigma}\left(y\right)\mathrm{d}^{4}y$$ ...
תוצאה מצוינת לכל הדעות! יתר על כן, המנוע נתמך כמעט ע"י כל הפלטפורמות (!...); לא משנה באיזה דפדפן אתה משתמש, סיכוי טוב מאוד שהטקסט יפתח בדיוק כמו שתכננת.


2 comments:

  1. בעוד ש־SVG יכול תיאורתית להציג תוכן מתמטי, השפה המומצת לכך היא MathML, מה שיבטיח שכל דפדפן שתומך בתקן יציג את התוכן כראוי, ויותר מכך – אפשר יהיה לייצא אותו בקלות לכל תוכנה אחרת שמסוגלת לטעון תוכן מתמטי, וגם מבחר העורכים הזמינים רב יותר מאלו ששומרים את התוצר בתבנית גרפית (לצורך העניין svg הוא הרבה יותר מכוון גרפיקה מסימולים מתמטיים).

    השבמחק
    תשובות
    1. תודה תומר. אני לא מכיר את השפה אבל הצצתי בויקיפדיה (http://en.wikipedia.org/wiki/MathML) ונראה לי שזה לגמרי לא פשוט לרשום קוד לנוסחאות ארוכות (או טקסט מתמטי עשיר) בשפה הזו... ראה לדוגמא נוסחת השורשים למשוואה ריבועית בלטך מול MathML. האם התרשמותי מוטעית? אגב, האם לדעתך MathJax עושה שימוש ב-MathML?

      מחק