חיפוש

איך מיישרים טקסט לימין ברייז?

איך מיישרים לימין טקסט ברייז?

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

התשובה על שתי השאלות הראשונות היא – כמובן שכן!

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

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

אז איך מיישרים טקסט לימין ברייז?

אנחנו משתמשים בשתי דרכים:

הדרך הראשונה:

1.מייצאים את הקורס > מחלצים את התוכן מתיקיית הזיפ > מוצאים את הקובץ בשם ״index.html״
ופותחים אותו לעריכה בתוכנת text editor במק או notepad בווינדווס.

2.מחליפים את השורה השניה בקוד :

<html lang="en" class="">

לקוד:

<html lang="he" class="" dir="RTL">

3. מחליפים את פסקת הסטייל (שמתחילה ונגמרת בסימון <style> ) בפסקה הבאה:

				
					<style>
      .brand--head, .brand--head *   { font-family: 'Assistant Regular' !important; }
      .brand--body, .brand--body *   { font-family: 'Assistant Regular' !important; }
      .brand--lhead, .brand--lhead * { font-family: 'Assistant Regular' !important; }
      .brand--lbody, .brand--lbody * { font-family: 'Assistant Regular' !important; }
      .brand--ui, .brand--ui *       { font-family: 'Lato' !important; }

      .brand--beforeHead:before { font-family: 'Assistant Regular' !important; }
      .brand--afterHead:after { font-family: 'Assistant Regular' !important; }

      .brand--background        { background-color: #4BAAF4 !important; }
      .brand--background-all *  { background-color: #4BAAF4 !important; }
      .brand--border            { border-color: #4BAAF4 !important; }
      .brand--color             { color: #4BAAF4 !important; }
      .brand--color-all *       { color: #4BAAF4 !important; }
      .brand--shadow            { box-shadow: 0 0 0 0.2rem #4BAAF4 !important; }
      .brand--shadow-all *      { box-shadow: 0 0 0 0.2rem #4BAAF4 !important; }
      .brand--fill              { fill: #4BAAF4 !important; }
      .brand--stroke            { stroke: #4BAAF4 !important; }

      .brand--beforeBackground:before { background-color: #4BAAF4 !important; }
      .brand--beforeBorder:before     { border-color: #4BAAF4 !important; }
      .brand--beforeColor:before      { color: #4BAAF4 !important; }

      .brand--afterBackground:after { background-color: #4BAAF4 !important; }
      .brand--afterBorder:after     { border-color: #4BAAF4 !important; }
      .brand--afterColor:after      { color: #4BAAF4 !important; }

      /* should be applied to containers where links
         need to appear in brand color */
      .brand--linkColor a { color: #4BAAF4 !important; }

      /* should be applied to containers where links
         need to change to brand color on hover */
      .brand--linkColorHover a:hover { color: #4BAAF4 !important; }

      /* should be applied to any single element that
         needs to change color on hover */
      .brand--hoverColor:hover { color: #4BAAF4 !important; }

      /* TODO: probably need a way to create a 5-10% darker/lighter color */
      .brand--linkColor a:hover,
      .button.brand--background:hover { opacity: .65 !important; }

      @media (min-width: 47.9375em) { /* 768px */
        .brand--min768--background { background-color: #4BAAF4 !important; }
        .brand--min768--border     { border-color: #4BAAF4 !important; }
        .brand--min768--color      { color: #4BAAF4 !important; }
      }

      @media (max-width: 47.9375em) { /* 768px */
        .brand--max768--background { background-color: #4BAAF4 !important; }
        .brand--max768--border     { border-color: #4BAAF4 !important; }
        .brand--max768--color      { color: #4BAAF4 !important; }
      }
.@media (min-width: 60em) {
            .lesson--open {
                padding-left: 0 !important;
                padding-right: 28rem !important;
            }
        }
        .lesson__sidebar {
            left: unset;
            right: 0;
        }
        a, body, br, button, col, colgroup, form, h1, h2, h3, h4, h5, h6, hr,img, span, input, label, li, ol, p, select, strong, table, tbody, td, textarea, tfoot, th, thead, tr, ul {
            direction: rtl;
        }
        .process-counter {
            direction: ltr;
        }
        .block-list__content__left {
            left: unset;
            right: 0;
        }
        @media (min-width: 37.5em) {
            .block-list__content {
                padding-left: unset;
                padding-right: 12.5%;
            }
        }
        .block-list__content {
            padding-left: unset;
            padding-right: 5.5rem;
        }
        .bubble {
            text-align: right;
        }
        .bubble__controls {
            left: 1rem;
            right: unset;
        }
        .blocks-accordion__header {
            text-align: right;
        }
        .block-gallery{
            direction:rtl;
            text-align:right;
        }
        @media (min-width: 48em) and (min-width: 90em) {
            .block-image--text-aside .block-image__col:first-child {
                margin-right: -8.33333%;
                margin-left: unset;
            }
        }
        @media (min-width: 60em) {
            .lesson--open {
                padding-left: 0 !important;
                padding-right: 28rem !important;
            }
        }
        .lesson__sidebar {
            left: unset;
            right: 0;
       }
        .slick-slider block-gallery__images slick-initialized{
            direction:ltr !important;
        }
.lesson-header__top-wrap:after{
                right:0;

            }
    </style>
				
			

4. שומרים וסוגרים את הקובץ. 

בפעם הבאה שנפתח אותו – הטקסט יהיה מיושר לימין 🙂

הדרך השניה:

  1. כמו קודם: מייצאים את הקורס > מחלצים את התוכן מתיקיית הזיפ > מוצאים את הקובץ בשם ״index.html״
    ופותחים אותו לעריכה בתוכנת text editor במק או notepad בווינדווס.
  2. מחליפים את השורה השניה בקוד:
<html lang="en" class="">

לקוד:

<html lang="he" class="" dir="RTL">

 עד כאן בדיוק אותו דבר. שומרים וסוגרים את הקובץ.

3. מאתרים את הקובץ ״main.bundle.css״ בתיקיית ״lib״ ופותחים אותו לעריכה.
מסמנים את כל התוכן שלו (ctrl+A) ומעתיקים (ctrl+C).

4. נכנסים לאתר https://rtlcss.com/playground/  ומדביקים בחלונית INPUT את הטקסט שהעתקנו (במקום כל הטקסט). מעתיקים את הטקסט מחלונית ה-OUTPUT.

5. חוזרים לקובץ  ״main.bundle.css״ ומחליפים את כל התוכן שלו בטקסט החדש שהעתקנו.

6. שומרים וסוגרים את הקובץ.

וזהו! הטקסט יתיישר לימין.

זה נשמע יותר מלחיץ ממה שזה, מבטיחים!

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

עוד כמה דגשים:

  • אחרי שביצעתם את השינויים, כדי להעלות ל LMS, יש לקמפרסס חזרה את הקובץ ל ZIP
  • אם אתם לא מוציאים את הקובץ main.bundle.css, חפשו קובץ css אחר בתוך התיקיות.
  • כדאי לעבוד עם שמות קבצים באנגלית בלבד, ללא רווחים ובלי סימנים מיותרים.

 

מה הפתרון שלכם לשימוש ברייז בעברית? יש לכם דרך נוספת? מה אתם חושבים על הדרכים שלנו?
שתפו אותנו, נשמח לשמוע!

כתיבת תגובה

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

תפריט נגישות