Problem/Motivation

As written, the CSS for layouts provides no support for RTL.
This escaped notice until now because the CSS uses flex, not directional floats.

Proposed resolution

Add explicit RTL support.
Consider solutions for how to represent layout icons with RTL support.

Remaining tasks

Do the things.

User interface changes

Yes!

API changes

Maybe?

Data model changes

No.

Comments

tim.plunkett created an issue. See original summary.

xjm’s picture

Priority: Normal » Major

This is major (where "major" is "critical bug for one subsystem"). If we'd caught it before, it would have blocked making Layout Discovery stable.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

tim.plunkett’s picture

Component: layout.module » layout_discovery.module

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

pcate’s picture

This seems like a case I could help with, but I want to make sure I'm not misunderstanding the scale and scope of the issue.

For the layout_discovery module I see the following CSS files which use flexbox:

  • threecol_25_50_25/threecol_25_50_25.css
  • threecol_33_34_33/threecol_33_34_33.css
  • twocol/twocol.css
  • twocol_bricks/twocol_bricks.css

Are these the CSS files which need RTL support added? Are there any others?

Add explicit RTL support.

Am I correct that this should be done via adding [dir="rtl"] CSS selectors and changing the flex direction?

dead_arm’s picture

Assigned: Unassigned » dead_arm
Issue tags: +sprint, +MWDS2018
dead_arm’s picture

Status: Active » Needs review

Flexbox takes the language direction into account on its own, so we do not need to add additional CSS to reverse the layouts for rtl languages.

This Mozilla documentation for Flexbox describes the behavior for row and row-reverse, but the same applies to wrap and wrap-reverse, which is what the layouts are using.

dead_arm’s picture

Assigned: dead_arm » Unassigned
tim.plunkett’s picture

Status: Needs review » Closed (works as designed)

Thanks!