Right To Left Languages Support – The Right Way

Right To Left Languages In WordPress

Yoav Farhi @yoavf


Yoav Farhi @yoavf

תמיכה בשפות הנכתבות מימין-לשמאל בוורדפרס

יואב פרחי @yoavf


CHAPTER 1

The Basics

פרק א

הבסיס

Right to left

Applies to script, not language

ימין לשמאל

מתייחס לכתב,ולא לשפה

العربية Arabicערבית

پنجابی Punjabi פנג'אבי

اردو Urdu אורדו

فارسی Farsi פרסית

پښتو Pashto פשטו

Languagesשפות

Hebrew עברית

سۆرانیSorani

(Kurdish)

סוראני (כורדית)

ދވހMaldivian

(dhivehi)

מלדיבית(דיבהי)

ئۇيغۇر تىلى Uyghur+ אויגור






Languagesשפות

Hebrew עברית

سۆرانیSorani

(Kurdish)


ދވހMaldivian

(dhivehi)








Languagesשפות

Hebrew עברית

سۆرانیSorani

(Kurdish)


ދވހMaldivian

(dhivehi)



600,000,000 8%

CHAPTER 2

Directionality

פרק ב

כיווניות

Astérix Le Gaulois

Astérix Le Gaulois

אסטריקס הגאלי Astérix Le Gaulois

CHAPTER 3

WordPress

פרק ג

וורדפרס

ימין-שמאל, כיצד

תבניות ⬅תוספים⬅

➡ Themes ➡ Plugins

RTL How-To

תבניות

⬅ rtl.css-שימוש ב➡ Use rtl.css

Themes

הבעיה עם קובץ rtl.css

קובץ נוסף לטעינה בכל צפיה ⬅באתר

קשה יותר ליצירה באופן אוטומטי ⬅פתרון חלקי בלבד במקרים בהם ⬅

ה-CSS מודולרי

➡ Another file to request on every page view

➡ Harder to generate automatically

➡ Only a partial solution when using modular css

The problem with rtl.css

rtl.css

Nope! לא!

האלטרטיבה

צרו קובץ מראה מקובץ המקור ⬅ {file}.css

⬅{file}-rtl.css קראו לו

➡ Generate a fully mirrored file out of the original {file}.css

➡ Name it {file}-rtl.css

The Alternative

The Alternativeהאלטרטיבה

1. wp_register_style( 'file-handle', 'file.css' );2. wp_style_add_data( 'file-handle', );

The Alternativeהאלטרטיבה

1. wp_register_style( 'file-handle', 'file.css' );2. wp_style_add_data( 'file-handle', 'rtl', 'replace' );

מה זה עושה

טוען אוטומטית קובץ עם סיומת rtl.css- במקום

הקובץ המקורי.

Loads the file with the -rtl.css suffix instead

of the original file.

What this does

יצירת קובץ המראה

עקבו אחר הנעשה בקוד הליבה של ⬅וורדפרס

⬅ rtlcss השתמשו במודול נודבתהליך ההרכבה שלכם.

npm install rtlcss -g

➡ Follow core WordPress’ lead ➡ Integrate node module rtlcss

in your build process

npm install rtlcss -g

Generating the mirrored file

rtlcss(המודול ל-Node, לא הקובץ)

קוד מראה מושלם ⬅אפשרויות ופקדים מתקדמים ⬅

,(ignore, remove, replace)ותוספים

שילובים במערכות הרכבה ⬅ grunt, gulp,) נפוצות

.(…webpack

➡ Perfect mirroring ➡ Advanced options and

directives (ignore, remove, replace), and plugins

➡ Integrations with popular build systems (grunt, gulp, webpack…).

rtlcss (The Node module, not the file)

rtlcssשימושים מתקדמים

rtlcss advanced uses

.code { text-align: left ;}



.code { text-align: left /*rtl:ignore*/;}



.rotate { transform: rotate(45deg) ;}



.rotate { transform: rotate(45deg) /*rtl:append:scaleX(-1)*/;}

…

!sknahT

ihraF vaoY fvaoy@

!הדות

יחרפ באוי fvaoy@

Thanks

Yoav Farhi @yoavf

תודה

יואב פרחי@yoavf

Technology

Right To Left Languages Support – The Right Way