WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#15863 closed enhancement (invalid)

Child Themes don't support RTL

Reported by: ramiy Owned by: yoavf
Milestone: Priority: normal
Severity: critical Version: 3.0
Component: Template Keywords:
Focuses: Cc:

Description

When using wordpress in hebrew/arabic/parsi (right-to-left languages) the theme searches for the rtl.css file and (if exists) it addes it to html <HEAD>. ltr languages use only style.css, rtl languages use both style.css and rtl.css. Theme developers don't need to check if the site is rtl or ltr, wordpress does it for them (this is way we love using wp).

<link rel="stylesheet" type="text/css" media="all"    href="http://www.wp-tricks.co.il/wp-content/themes/twentyten/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.wp-tricks.co.il/wp-content/themes/twentyten/rtl.css"   />

BUT if i create a child theme, the rtl.css file from the parent theme is not auto added to the child theme <HEAD> as it should.

In current situation, users running wordpress in hebrew/arabic/parsi languages can't use child themes because the theme lookes broken without the rtl.css file. We need to fix this.

Wordpress need to check if (1) it's a child theme (2) it's rtl - if so, add the rtl.css file from the parent theme. I think the system need to check, if the child theme has its own rtl.css file, do nothing. but if it does not have rtl.css file, add the rtl.css from the parent theme.

Attachments (1)

include-parent-theme-rtl-css.php (622 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (14)

comment:1 ramiy3 years ago

  • Owner set to yoavf
  • Status changed from new to assigned

comment:2 nacin3 years ago

  • Keywords needs-patch 3.2-early added; need-patch removed
  • Milestone changed from Awaiting Review to Future Release

comment:3 yoavf3 years ago

  • Resolution set to invalid
  • Status changed from assigned to closed

A child theme doesn't auto-load the parent theme style.css, so it shouldn't auto-load the parent theme rtl.css

A child theme does load its own rtl.css if it exists.

If necessary, a child theme author developer can load the parent theme rtl.css file from within the child theme css.file, ie.:

@import url("../parent/rtl.css");

comment:4 ocean903 years ago

  • Keywords needs-patch 3.2-early removed
  • Milestone Future Release deleted

comment:5 ramiy3 years ago

  • Cc ramiy added
  • Resolution invalid deleted
  • Status changed from closed to reopened

Yoav, most of the developers do not add rtl.css to their child theme. Resulting a broken child theme even if there is an rtl.css file in parent theme.

All the child themes for Twenty Ten i downloaded, they where all broken. To fix this i had to add rtl.css file to the child theme. Remember that not all users can code.

comment:6 yoavf3 years ago

  • Resolution set to invalid
  • Status changed from reopened to closed

A child theme can be style-independent from the parent, and only re-use the php. In a case like this, forcing the rtl.css file to load will actually "break" the child theme.

@ramiy I think we need to educate theme developers better about the need to include an rtl.css file - but there's no sense in auto-loading an rtl.css file in a child theme, if we're not auto loading the style.css file.

comment:7 dd323 years ago

I quite agree wit yoavf here, if we included the style.css, then including rtl.css might make sense. As we're not, then it'll potentially break themes for RTL rather than "fixing" them.

The main reason most themes are not RTL'd is due to lack of theme developer knowledge, getting the word out there about how to utilise rtl.css and cases where they can just inherit the parents is the best method forward.

I'd like to point out however, that as many theme authors will not be rtl themselves, getting them to make their themes compatible is going to be hard.. It's not just a simple "replace left with right" in many themes from the little rtl knowledge I have (Which is the exact reason the themes are not rtl'd.. lack of knowledge..)

comment:8 ramiy3 years ago

Wordpress theme directory has 1,300 themes, only 35 has rtl-support (2.7%). Its hard enough to make rtl themes, i just want to make it easyier for users.

And i have a simple sollution - If no rtl.css in child theme, search for one in parent theme.

comment:10 SergeyBiryukov3 years ago

Perhaps a plugin would be useful here? Attached a prototype.

comment:11 follow-up: ramiy3 years ago

  • Keywords has-patch tested added
  • Resolution invalid deleted
  • Status changed from closed to reopened

@Yoav, Please don't close the ticket yet.

@SergeyBiryukov, Code tested, workes great. Why use it as a plugins? Why not add this to wordpress core?

comment:12 in reply to: ↑ 11 ocean903 years ago

  • Keywords has-patch tested removed
  • Resolution set to invalid
  • Status changed from reopened to closed

Replying to ramiy:

Why not add this to wordpress core?

Because it could break more then it helps. It's the same reason, why style.css won't be loaded.
Example: You have a #main part in the parent theme which needs some float:left, in RTL CSS it will be float:right. Now you have a child theme with a #main part too, but it doesn't need the float anymore. And now you want to load the RTL CSS; you see, it will break the layout, because of the remaining float:right.

Two lead devs said the same:

Quote by dd32:

Iif we included the style.css, then including rtl.css might make sense. As we're not, then it'll potentially break themes for RTL rather than "fixing" them.

Quote by yoavf:

A child theme can be style-independent from the parent, and only re-use the php. In a case like this, forcing the rtl.css file to load will actually "break" the child theme.


There are now two possiblities to *fix* it by yourself, first is to import the CSS file via @import or use the plugin by SergeyBiryukov (or add the function to your functions.php).

comment:13 SergeyBiryukov3 years ago

Added two more checks to the plugin as per ticket description:

  • If is_rtl()
  • If a child theme if it doesn't have its own rtl.css file.

It's now available in the Plugin Directory.

Version 0, edited 3 years ago by SergeyBiryukov (next)
Note: See TracTickets for help on using tickets.