USWDS - Feature: CSS logical properties for multilingual support

[mejiaj]

Is your feature request related to a problem? Please describe.

This new native CSS feature improves support for different writing modes in different layouts (like RTL).

Currently margin-left and margin-right could potentially break designs for RTL or vertical text layouts.

Describe the solution you'd like

CSS logical properties for components and utilities.

Describe alternatives you've considered

A new theme setting that allows users to enable/disable logical properties.

Additional context

Resources

• MDN docs on logical properties
• Example of margin-block-end

Next steps

• [x] ~Identify core properties based on impact, LOE, and browser support.~ Identified margin, padding, position.
• [ ] Identify areas of codebase that could make the most impact with minimal changes. For example: functions, mixins, and placeholders vs component or layout styles.
  • [ ] #6030
  • [ ] Add logical properties for Identifier
• [ ] Confirm is new theme settings flag to enable logical vs traditional is needed.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.
• [X] I checked the current issues for duplicate feature requests.

[mgifford]

I just wanted to chime in on this issue after hearing about it at Drupal GovCon. Moving from a left / right (spatial) framing to a first / last (logical) would be really great.

It would help bidirectional sites (bidi) sites a lot. Any site that requires English and either Arabic, Farsi (Persian) or Hebrew would benefit from this.

It would also help for building a more mobile friendly approach. What does left/right mean in the context of a mobile site?

Furthermore, as we move to more aural interfaces, it would help shift our awareness about how content is displayed in linear aural interfaces. Obviously screen readers are a type of aural interface, but so are Alexa, Siri and Google Home.

Finally, this shift will take a long while to go through legacy content using older LTR models. We should have a transitional window for this, but ultimately, need to make a logical ordering implemented earlier, so that it will cost less to transition in the future.

[mejiaj]

@mgifford thanks for that note. Left to right makes sense and it'd be nice to move this forward.

I've created an issue in #6030 to explore ways to address.

[mejiaj]

Also exploring building with this approach in web components, specifically uswds/web-components#39.