יום ראשון, 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"
  src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</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$$ 
תוצאה מצוינת! יתר על כן, המנוע נתמך כמעט ע"י כל הפלטפורמות(!); לא משנה באיזה דפדפן אתה משתמש, סיכוי טוב מאוד שהטקסט יפתח בדיוק כמו שתכננת. ובכל זאת, יש גם כאן כמה חסרונות: 

  • הפלטפורמה של Blogger לא בנוייה לכתיבת קוד LaTeX. אי אפשר להשוות אותה לעורך מתוחכם דוגמת Kile או codecogs. ובהתאם לכך, מלאכת הכתיבה היא סזיפית: סוגריים לא נסגרים אוטומטית, סביבות אינן נסגרות אוטומטית, אין קיצורים מובנים, ועוד ועוד... כתיבה של נוסחא ארוכה עשויה לעייף וצפוייה להיות רצופת שגיאות אלא אם היא נעשית בזהירות רבה. 
  • הפונטים גדולים מידי ביחס לפונטים של שאר הטקסט. לא ברור מדוע זה קורה, אבל אפשר לקוות שהפגם האסתטי הזה יתוקן בחלוף הזמן.
  • פה ושם, אם כי במקרים נדירים ויחסית מורכבים, המנוע לא קורא היטב את התחביר ומייצר אנומליות אותן יש צורך לתקן באופן ידני. גם כאן אפשר להניח שבחלוף הזמן הבעיה תיעלם.
  • העלאת הדף כרוכה בקומפילציה על שרת מרוחק ולפיכך תלוייה בזמינותו. והיה והוא לא זמין יופיע הטקסט עם הקוד המקורי ולא עם הקוד המקומפל ובמקרה זה תהא הרשומה בלתי קריאה באופן זמני. אבל תקלות מסוג כזה הופכות יותר ויותר נדירות.  

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

<script src="http://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>




2 comments:

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

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

      מחק