Right To Left Languages Support – The Right Way
•
0 gefällt mir•4,183 views
Adding Right to left (RTL) languages support to your themes and plugins doesn’t have to be a chore. This short talk introduces the basics of RTL support and demonstrate how to use automated tools to simplify the process.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Yoav Farhi
Right To Left Languages Support – The Right Way
- 1. Right To Left Languages In WordPress Yoav Farhi @yoavf
- 2. Right To Left Languages In WordPress Yoav Farhi @yoavf הנכתבות בשפות תמיכה בוורדפרס מימין-לשמאל פרחי יואב @yoavf Right To Left Languages In WordPress
- 3. CHAPTER 1 The Basics א פרק הבסיס
- 4. Right to left Applies to script, not language לשמאל ימין ,לכתב מתייחס לשפה ולא
- 16. הגאלי אסטריקס Astérix Le Gaulois
- 23. כיצד ,ימין-שמאל תבניות תוספים ➡ Themes ➡ Plugins RTL How-To
- 24. תבניות rtl.css-ב שימוש➡ Use rtl.css Themes
- 25. קובץ עם הבעיה 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
- 27. האלטרטיבה המקור מקובץ מראה קובץ צרו {file}.css {file}-rtl.css לו קראו ➡ Generate a fully mirrored file out of the original {file}.css ➡ Name it {file}-rtl.css The Alternative
- 28. האלטרטיבהThe Alternative 1. wp_register_style( 'file-handle', 'file.css' ); 2. wp_style_add_data( 'file-handle', );
- 29. האלטרטיבהThe Alternative 1. wp_register_style( 'file-handle', 'file.css' ); 2. wp_style_add_data( 'file-handle', 'rtl', 'replace' );
- 30. עושה זה מה עם קובץ אוטומטית טוען במקום -rtl.css סיומת .המקורי הקובץ Loads the file with the -rtl.css suffix instead of the original file. What this does
- 31. המראה קובץ יצירת של הליבה בקוד הנעשה אחר עקבו וורדפרס 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
- 32. 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)
- 33. rtlcss מתקדמים שימושים rtlcss advanced uses .code { text-align: left ; }
- 34. rtlcss מתקדמים שימושים rtlcss advanced uses .code { text-align: left /*rtl:ignore*/; }
- 35. rtlcss מתקדמים שימושים rtlcss advanced uses .rotate { transform: rotate(45deg) ; }
- 36. rtlcss מתקדמים שימושים rtlcss advanced uses .rotate { transform: rotate(45deg) /*rtl:append:scaleX(-1)*/; }
- 37. …