Workflow change: automate RTL css generation
|Reported by:||yoavf||Owned by:||nacin|
|Cc:||jeremy+wp@…, maorhaz@…, r_a_m_i@…, amiadb@…, nashwan.doaqan@…|
WordPress has great support for languages written from right-to-left, but that support require a lot of manual work with each release and update. We can change that by automating the creation of RTL css file using CSSJanus in the build process.
Current Status / Issues:
- WP core css files have manually created *-rtl.css files alongside them
- RTL css files only override LTR css, and so must be loaded in addition to the LTR css.
- With every CSS change across WP multiple css files, matching RTL css change must be committed as well.
- RTL css files are often out of sync.
- There's not enough awareness of RTL support for plugins and themes.
- No RTL css files in the core repository.
- RTL css files will be created during the build process.
- RTL css files will fully replace LTR css files and will be loaded instead of LTR files when is_rtl()
This process is already active on WordPress.com for over a year now:
- RTL css files on WordPress.com (excluding core's and themes') are auto generated on commit.
- If is_rtl() a filter to style_loader_src looks to see if an rtl file exists (based on a predefined naming convention), and will load it instead of the LTR file.
- Some of core's css will need to be audited to make sure it can automatically be RTLized. There are a bunch of workarounds that can be used with cssjanus in cases where automatic rtl css is problematic( i.e. @no-flip rules, and .rtl class selector)
- There's a CSSJanus nodejs module, but no grunt plugin yet afaik
- While this process can be relatively easily applied to core, how can we extend it to themes and plugins? (I have a few ideas, but let's get the ball rolling first)
With WordPress moving over to a grunt based build, there's no better time to do this. Let's do it!
Change History (70)
comment:21 in reply to: ↑ 20 ; follow-up: ↓ 23 yoavf — 4 months ago
comment:33 follow-up: ↓ 34 y0natan — 3 months ago
comment:34 in reply to: ↑ 33 mark-k — 3 months ago
comment:47 nacin — 3 weeks ago
- Owner set to nacin
- Resolution set to fixed
- Status changed from new to closed
comment:49 nacin — 42 hours ago
- Resolution fixed deleted
- Severity changed from normal to critical
- Status changed from closed to reopened