עימוד דיגיטלי - כשעימוד ותכנות נפגשים

יידישע קאפ

משתמש סופר מקצוען
מנוי פרימיום
עיצוב גרפי
צילום מקצועי
עריכה והפקת סרטים
עימוד ספרים
Screenshot 2019-07-21 at 6.41.55 pm.png


שלום חברים!

כבר משנות ילדותי בחיידר הייתי תמיד תָמֵה איך בונים את צורת הדף המשוכלל של התלמוד בבלי (וילנא).
אז שיחקתי עם וורד, וכמובן שלא יצא כלום...
לפני 4 שנים נתקלתי באינדיזיין - וחשבתי שחייב להיות שבתוכנה זו אפשר לעשות עימוד מורכב של גמרא, וניסיתי הרבה, עד שהצלחתי - שיתפתי את זה כאן בזמנו.
אז פיתחתי סקריפטים שיקילו את עשיית הברך באינדיזיין...
ו...אתמול חשבתי לעצמי: אולי צריך לנסות לעמד את הגמרא ב HTML-CSS-JS, ושהכל יהיה טקסט חי, ואז השמים לא הגבול מה אפשר לעשות עם זה!
אתמול במוצ״ש ישבתי לכתוב את הקוד. הקטע הכי מורכב הוא ליצור את צורת המסגרות של הטקסטים (הברכיים).

מעכשיו מתחיל החלק שרק אלו שמכירים HTML/CSS יבינו (אומרים שבימים הקרובים יפתח פורום מתכנתים, אבל לעת עתה עדיין לא נפתח...):
קודם כל צריך ליישר הטקסט בלוק - justify.
ורציתי לשמור על שבירת השורות המדוייקות כבמהדורת וילנא, אז הכנסתי שוברי שורה, שב-HTML נראים ככה: <br>.
אז התברר, שכשיש <br> בסוף שורה, היישור justify לא עובד, אלא הטקסט מיושר לימין (וכן, גם אם מגדירים text-align-last).
ולגבי הברך - דבר ראשון חשבתי להשתמש עם shape-outside עם polygon() לדחיית הטקסט של רש״י ותוס׳.
אבל התברר שזה לא יעבוד, כי זה ידחה את כל הטקסטים שבעמוד (וצריך לעשות צורה שונה לכל טקסט), ואף שאפשר לתת position: absolute, מ״מ אז זה יתעלם מכל הצורות...
אז הגעתי לפתרון כזה: לשים כל שורה ב-span לעצמו, ולהכין 3 classes, אחד לשורות הקצרות, ואחד לבינוניות, ואחד לארוכות, ונתתי לכל אחד רוחב לעצמו [285px, 500px, 1050px], וכמובן שלרש״י נתתי float: right, clear: both, ולתוס׳ float: left. ועכשיו לא צריך כבר את ה<br>, וממילא פתרתי גם את היישור.

ואיך אני מקטין את כל הסוגריים, מדגיש את דיבורי-המתחיל וכו׳, בלי להצטרך לכתוב HTML ידני?
בטח - עם גרפ (regExp)! ;)

איזה תענוג היה לכתוב שורה אחד של Javascript, ולראות כל המקורות מתקטנים...
carbon (6).png
משתמשי אינדיזיין אמורים להבין קצת את הקוד הזה...
וככה עשיתי אפילו חלונות בתוספות!
carbon (7).png

למעשה לא היה טוב שכל שורה נמצא ב-span נפרד, כי אז אם יש ד״ה שעובר לשורה הבאה הייתי צריך לחלק אותו לשניים, ולשים כל חלק ב-span נפרד...
היום בבוקר מצאתי פתרון הרבה יותר טוב (stackoverflow): לשים אלמנט (השתמשתי ב <i></i>) במקום <br>, ולתת לו רוחב 100% ו-display: inline-block, ואז הוא כאילו נוטל לעצמו שורה שלימה, וממילא מכריח את הטקסט שאחריו להתחיל בשורה הבאה, והיתרון בזה שהוא עובד עם יישור justify!

יש עוד הרבה מה להגיד, אבל כאן לא המקום. למי שמעוניין - הקוד נמצא במאגר גיטהאב כאן: GitHub.

עכשיו שיש לנו עימוד גמרא דיגיטלי - השמים לא הגבול מה שאפשר לעשות איתו.
לדוגמא: אפשר להכניס את ביאור שוטנשטיין או מתיבתא - שברחיפה על הטקסט יופיע הביאור בפופאפ.
מקורות יכולים להיות לחיצים - שיפתחו חלונית לעיון מהיר במקור (כבר עשיתי את הבסיס לזה - תנסו ללחוץ על המקורות ברש״י ותוס׳).
ועוד המון - כיד הדמיון הטובה עליכם...
יש לכם רעיונות? אשמח לשמוע!

הנה הלינק:
https://shas.newgraphdesign.com/
 

עט להשקיע

עימוד ועיצוב מקצועי
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
עיצוב פונטים
עימוד ספרים
עריכה תורנית
עימוד ספרים
אתה פשוט מדהים בכל פעם מחדש!!
 

יענקי R

ספר יהלום - עימוד נוצץ ברמה אחרת
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
פרסום וקופי
עימוד ספרים
צילום מקצועי
עריכה תורנית
עריכה והפקת סרטים
הוי אומר: כש'ראש של גמרא' ותכנות נפגשים...
מדהים!
 

צח מלול

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

יידישע קאפ

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

תודה @צח מלול :).

הדרך שבניתי את הדף הזה - שמכניסים את הטקסט עם סימנים מינימליים, והוא כבר מחיל את העיצוב לבד (שח״ו לא צריכים לכתוב לבד את כל ה-HTML...).
לדוגמא: תוספות - מכניסים טקסט פשוט עם שבירת שורה בכל סוף שורה, ועם @1 בתחילת הדיבור, @2 בתחילת גוף התוס׳, @3 בסוף גוף התוס׳.
ובאמצעות Javascript (עם שימוש כבד בגרפ ;), כפי שאפשר לראות למעלה), אני מחיל לפי״ז את הסגנונות (דהיינו מייצר את ה-HTML עם ה-classes הנכונים).

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

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

וזה לא רק לקריאה על המסך, אפשר גם לייצא PDF ע״י הדפסה לPDF (תנסו את זה, וצירפתי PDF שהדפסתי מכרום)...
איי איי איי...
 

קבצים מצורפים

  • ש״ס וילנא.pdf
    KB 44.4 · צפיות: 133

אריאל וו

משתמש סופר מקצוען
עיצוב גרפי
מוזיקה ונגינה
עימוד ספרים
מעניין מאוד! לא שקלת להשתמש ב-Canvas? ככה יש לך שליטה מלאה במיקום של כל אלמנט במדויק!
 

יידישע קאפ

משתמש סופר מקצוען
מנוי פרימיום
עיצוב גרפי
צילום מקצועי
עריכה והפקת סרטים
עימוד ספרים
מעניין מאוד! לא שקלת להשתמש ב-Canvas? ככה יש לך שליטה מלאה במיקום של כל אלמנט במדויק!
מכמה סיבות, קודם כל הטקסט לא יהיה חי (selectable), וגם לא אוכל להשתמש עם מצבי ריחוף וכו' (hover), כי canvas בעצם מציג פיקצלים בלבד...
 

5127109

מהמשתמשים המובילים!
עיצוב גרפי
עימוד ספרים
תענוג ממש.
אני מזמן חשבתי css זה התשובה, אני אישית לא מחובבי בcss אני עושה כי זה העבודה שלי , אבל בהחלט זה התשובה.
להכניס קובץ מקודד ולעצב אותו עם תגיות html וclasses יכול להיות מאוד קל בreact שגם בזה יש לך יד.
עלה והצלח ותענוג לראות את העבודות שלך.
 

יידישע קאפ

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

נכון - זה יכול להיות יותר קל.
אבל אם כבר, אז כבר להשתמש עם Svelte, שהרבה יותר מהיר מ-React (שוה להכיר אותו! אני חושב שזה יותר מוצלח מ-React, ולאחרונה גובר תאוצה בקרב המפתחים).

אולי על זה תבוסס התוכנה החדשה של רחמים?..
מכיר Electron?
 

5127109

מהמשתמשים המובילים!
עיצוב גרפי
עימוד ספרים
נכון שהוא מגניב, אבל התעשיה נמצאת בריאקט ויש לזה המון כלים וקהילה תומכת בשביל כל ג'וק שיעלה על דעתך....
מגניב ג"כ, אבל לא כמו ריאקט. זה סביבה דסקט טופ עבור JS.
בעקרון היה יכול להיות נמחד מאוד ממשק וובי עם שם מתמשמש וסיסמא ככה שאפשר לעמד און ליין.
אני בהחלט סומך עליך (ויהיה אפשר לעשות SHARE עם הלקוח, וכיד ה' הטובה)
 

מענדי מ

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

נפלא.
דווקא ראיתי רעיון דומה. (@ניוגראף בתור דובר אנגלית זה בכלל יכול לתת לך השראה)
https://www.sefaria.org
 

יידישע קאפ

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

ולמה אתה חושב שאי אפשר להשתמש בריאקט בתוך אלקטרון?
בטח אפשר!
(וכן אפשר להשתמש ב-svelte או כל framework אחר)
כל מה שאתה יכול לעשות בתוך הדפדפן אתה יכול לעשות באלקטרון, ויותר (כי יש לך גישה למערכת הקבצים ע"י NodeJS)...
(בטח אתה יודע ש-VScode בנוי עם אלקטרון).

נכון שהוא מגניב, אבל התעשיה נמצאת בריאקט
למה לא להיות בקדמת הטכנולוגיה? כבר בניתי כמה דברים ב-svete, ומאוד התחברתי אליו (בממוצע כותבים 40% פחות קוד מריאקט).
יש שיעור מאוד מעניין של Chris Harris (היוצר של Svelte) שנקרא Rethinking Reactivity, שפותח את הראש בכמה דברים לגבי ריאקט, לדוגמא: ריאקט הוא לא באמת reactive, כי על כל שינוי הוא צריך לבדוק את כל ה-shadow dom לראות מה השתנה, ואז הוא מעדכן רק את החלק ההוא. Svelte אין לו בכלל את כל ה-shadow dom, אלא מעדכן ישירות את החלק שצריך, ויש בזה גם יתרון עצום ב-performance.
חוץ מזה הוא לא framework אלא compiler, וממילא לא צריך לארוז את כל ה-framework באפליקציה, ויוצא שאפליקצית svelte יכול לשקול ~3kb, והמינימום של ריאקט הוא ~120kb (רק ל-framework עצמו, לפני הקוד שלך)!
 

ש.ב.ח.

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
וזה לא רק לקריאה על המסך, אפשר גם לייצא PDF ע״י הדפסה לPDF (תנסו את זה, וצירפתי PDF שהדפסתי מכרום)...
תעטוף כל עמוד בזה:

קוד:
class="no-breack"

תוסיף לגליון הcss

קוד:
@page{
  size:A4;
  margin: 0mm;
  padding:10mm 10mm 10mm 10mm;
  prince-shrink-to-fit: auto;
}

@media print{

.no-breack{
   page-break-inside: avoid;
}
   
}

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

יידישע קאפ

משתמש סופר מקצוען
מנוי פרימיום
עיצוב גרפי
צילום מקצועי
עריכה והפקת סרטים
עימוד ספרים
תוסיף לגליון הcss

@page{
size:A4;
margin: 0mm;
padding:10mm 10mm 10mm 10mm;
prince-shrink-to-fit: auto;
}
נראה שזה יעזור לעמוד לא להחתך בהדפסה

זה יותר גדול מ-A4.
השתמשתי בזה:
קוד:
@page {
  size: auto;
  margin: 0mm;
  padding: 10mm 5mm;
  prince-shrink-to-fit: auto;
}

@media print {
  .document-container {
    page-break-inside: avoid;
  }
}
מצורף ה-PDF שיוצא מזה.
מעניין אם הוא מוכן להדפסה...
 

קבצים מצורפים

  • ‎⁨ש״ס וילנא⁩.pdf
    KB 115.5 · צפיות: 70

ש.ב.ח.

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
זה יותר גדול מ-A4.
השתמשתי בזה:
זה לא משנה מה הגודל של העיצוב עצמו כי כתבתי לך להגדיר fit אוטו' לגודל הדף.
קוד:
prince-shrink-to-fit: auto;

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

(צריך לבדוק אפשרות לתת לכל אלמנט הגדרות במ"מ עבור מצב פרינט (לא כל סטייל מכיר את המידה הזאת).

אבל להדפיס כמה דפים ל"בלכתך.." זה מצויין +

וד.א. אם כבר על פרפקצוניזם עסקינן.... תן display:none; ל'חץ' ליד אות העמוד
 

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קיט ב'

ט בַּמֶּה יְזַכֶּה נַּעַר אֶת אָרְחוֹ לִשְׁמֹר כִּדְבָרֶךָ:י בְּכָל לִבִּי דְרַשְׁתִּיךָ אַל תַּשְׁגֵּנִי מִמִּצְוֹתֶיךָ:יא בְּלִבִּי צָפַנְתִּי אִמְרָתֶךָ לְמַעַן לֹא אֶחֱטָא לָךְ:יב בָּרוּךְ אַתָּה יְהוָה לַמְּדֵנִי חֻקֶּיךָ:יג בִּשְׂפָתַי סִפַּרְתִּי כֹּל מִשְׁפְּטֵי פִיךָ:יד בְּדֶרֶךְ עֵדְוֹתֶיךָ שַׂשְׂתִּי כְּעַל כָּל הוֹן:טו בְּפִקֻּדֶיךָ אָשִׂיחָה וְאַבִּיטָה אֹרְחֹתֶיךָ:טז בְּחֻקֹּתֶיךָ אֶשְׁתַּעֲשָׁע לֹא אֶשְׁכַּח דְּבָרֶךָ:
נקרא  14  פעמים

לוח מודעות

למעלה